آموزش تبدیل قالب HTML به وردپرس درآقای وردپرس
تبدیل قالب HTML به WordPress
با سلام خدمت کاربران عزیز و محترم آقای وردپرس
امروز یک آموزش دیگه براتون گذاشتم که امیدوارم ازش خوشتون بیاد.
توی این آموزش قراره تبدیل تبدیل قالب HTML به وردپرس رو بهتون مو به مو آموزش بدم.
همانطور که میدونید وردپرس یکی از دوست داشتنی ترین نرم افزارهای تهیه وبلاگ هست، حتی قدرت آن تا حدی است که می توان به راحتی از آن به عنوان یک CMS هم استفاده کرد. برای همین من تصمیم گرفتن نحوه ساخت قالب رو برای WordPress آموزش بدم. امیدوارم که بعد از خوندن این مطلب بتونید به راحتی برای خودتون قالب تهیه کنید. من پیشنهاد می کنم قبل از ساخت قالب مطالب مربوط ساخت سایت توسط HTML و CSS رو مطالعه کنید، چون اگه کامل به اونها مسلط باشید ساخت قالب برای وردپرس براتون خیلی راحت تر میشه.
برای ساخت فایل styles.css در تبدیل قالب HTML به وردپرس از روش زیر استفاده کنید :
/* Theme Name : Your template name Theme URL : Your template url Description : Descriptions Author : Author name Author URL : Author url Version : Template version */
این خطوط را در ابتدای فایل CSS قرار دهید.
ساختار یک فایل index.php معمولا در تبدیل قالب HTML به وردپرس بدین صورت است :
<Your Doctype Goes Here> <html> <head> <title>عنوان سایت</title> <link rel=”stylesheet” href=”styles.css”> </head> <body> <div id=”container”> <div id=”header”>هدر یا سربرگ شما</div> <div id=”navigation”>منو جایگزین…</div> <div id=”content”>نوشته های شما …</div> <div id=”sidebar”>ساید بار یا نوار کناری</div> <div id=”footer”>فوتر یا پانوشت</div> </div> </body> </html>
برای لینک کردن فایل CSS از کد زیر استفاده می کنیم :
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
برای شروع کار و تبدیل قالب HTML به وردپرس باید یک فولدر که معمولا نام قالبمان است در آدرس
wordpress/wp-content/themes بسازیم. سپس دو فایل index.php و styles.css را در آن ایجاد میکنیم. حال برای شکل دادن به فایل index.php از دستورات زیر استفاده میکنیم :
– مشخصات بلاگ یا سایت در تبدیل قالب HTML به وردپرس :
توسط این دستور نام سایت یا وبلاگ ما نمایش داده می شود :
<?php bloginfo(‘name’); ?>
اگر بخواهیم نام بلاگمان (سایت ) را به لینک تبدیل کنیم از این روش استفاده میکنیم :
<a href=”#”><?php bloginfo(‘name’); ?></a>
و اگر بخواهیم این لینک را به صفحه نخست سایت منتقل کنیم :
<a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>
توضیحات سایت یا وبلاگ در تبدیل قالب HTML به وردپرس :
<?php bloginfo(‘description’); ?>
حلقه وردپرس برای نمایش نوشته ها :
<?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?> <?php endwhile; ?> <?php endif; ?>
خط اول چک میکند که آیا پستی وجود دارد یا نه و اگر وجود داشته باشد آنرا نمایش می دهد و این حلقه را تا زمانی که پستی وجود داشته باشد ادامه میدهد.
3- عناوین پست ها در تبدیل قالب HTML به وردپرس :
<?php the_title(); ?>
توسط این دستور میتوان پستها را نمایش دادو باید بین دستورات the_post و endwhile قرار گیرد. برای اینکه هر title به پست خودش لینک شود از دستور زیر استفاده میکنیم :
<?php the_permalink(); ?>
توسط دستور زیر هم محتوای هر پست نمایش داده می شود :
نمایش محتوای نوشته و پست در تبدیل قالب HTML به وردپرس
<?php the_content; ?>
4- مشخصات پست و نوشته :
توسط دستورات زیر می توان اطلاعات جانبی مربوط به پستها را نمایش داد، اطلاعات بین تگ زیر قرار می گیرند :
<p class=”postmetadata”>……</p>
برای نمایش عبارت Filled Under از دستور زیر استفاده می کنیم :
<?php _e(‘Filled Under#58;’); ?>
برای مشخص کردن اینکه این پست مربوط به کدام دسته بندی است از دستور زیر استفاده می کنیم :
<?php the_category(‘,’); ?>
برای نمایش عبارت By :
<?php _e(‘By’); ?>
و نمایش نام نویسنده :
<?php the_author(); ?>
برای نمایش تعداد نظرات :
<?php comments_popup_link(‘No Comments »’,’۱ Comment»’,’% Comments»’); ?>
برای ویراش پست در صورتی که به صورت admin وارد سایت شده باشید از دستور زیر استفاده می شود :
<?php edit_post_link(‘Edit’,’|’,”); ?>
در صورتیکه پستی وجود نداشته باشد و بخواهیم عبارتی را نشان دهیم دستور زیر را پایین endwhile قرار می دهیم :
<?php else: ?>
<div class=”posts”>
<h2><?php _e(‘Not Found’); ?></h2>
</div>
اگر بخواهیم برای هر پست یک ID قرار دهیم که بتوانیم به آن یک Style خاصی بدهیم از دستور زیر استفاده می کنیم :
<div class=”posts” id=”post-<?php the_ID(); ?>”>
برای ایجاد صفحه بندی از دستورات زیر می توان استفاده کرد :
<div class=”navigation”>
<?php posts_nav_link(); ?>
</div>
این دستور را باید بین endwhile و else قرار داد. دستور فوق را می توان بدین صورت customize کرد :
<div class=”navigation”>
<?php posts_nav_link(‘in between’,’before’,’after’); ?>
</div>
هرچه به جای in between نوشته شود بین next و previous می آید و هرچه به جای before نوشته شود قبل آن و هرچه به جای after نوشته شود بعد آن می آید.
۵- داشتن ساید بار یا نوار کنار :
برای نمایش Category دستورهای زیر را قبل از پایان body tag قرار می دهیم :
<div class=”sidebar”>
<h2><?php _e(‘Categories’); ?></h2>
</div>
حال برای نمایش لسیت Category ها بدین روش عمل می کنیم :
<ul>
<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchial=0′); ?>
</ul>
از option های زیر هم می توان استفاده کرد :
sort-column=name
این عبارت Category ها بر اساس الفبا تنظیم می کند.
optioncount=1
تعداد پست های هر کدام را نشان می دهد.
hierarchial=0
sub-cat ها را درون لسیت نمی برد. بین هر attribute باید از & استفاده کرد.
برای نشان دادن Archives از دستور زیر استفاده می کنیم :
<h2><?php _e(‘Archives’); ?></h2>
<ul>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>
برای قرار دادن blogroll بدین روش عمل می کنیم :
<?php get_links_list(); ?>
6- فرم جستجو :
ابتدا یک فایل به نام searchform.php ایجاد می کنیم و کدهای زیر را درون آن قرار می دهیم:
<form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>
<div>
<input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” size=”۱۵″ />
<input type=”submit” id=”searchsubmit” value=”Search” />
</div>
</form>
حال در فایل index.php کد زیر را بالای همه listing ها درون Sidebar می نویسیم :
<li id=”search”>
<?php include(TEMPLATEPATH.’/searchform.php’); ?>
</li>
7- تقویم :
برای ایجاد تقویم از کد زیر استفاده می کنیم :
<li id=”calendar”>
<?php get_calendar(); ?>
</li>
در انتهای sidebar یک div به نام footer ایجاد می کنیم و کد زیر را درون آن می نویسیم :
<div id=”footer”>
<p>
Copyright © ۲۰۰۸ <?php bloginfo(‘name’); ?>
</p>
</div>
* نحوه جدا کردن فایل index.php
حال بعد از اینکه فایل ما آماده شد باید طبق شکل اول آنرا باید به قسمتهای مختلف تقسیم کنیم. از ابتدای فایل index.php تا پایان قسمت navigation div را درون یک فایل به نام header.php ذخیره می کنیم و دستور زیر را به جای آن درون index.php می نویسیم :
<?php get_header(); ?>
از ابتدای sidebar div تا انتهای آن را جدا کرده و در فایل sidebar.php ذخیره می کنیم و خط زیر را به جای آن در فایل index.php قرار می دهیم :
<?php get_sidebar(); ?>
برای footer هم همینکار را انجام می دهیم و در فایل footer.php ذخیره می کنیم و دستور زیر را به جای آن در فایل index.php قرار می دهیم :
<?php get_footer(); ?>
برای اینکه قسمت archive را از صفحه index جدا کنیم محتویات صفحه index.php را کپی می کنیم و به نام archive.php ذخیره می کنیم و سپس به جای دستور زیر
<?php the_content(); ?>
دستور زیر را می نویسیم :
<?php the_excerpt(); ?>
موفق و سربلند باشید.
بدرود.
منتظر نظرات سازندتون هستم نظر یادتون نره!!!
آقای وردپرس
خیلی ممنون از لطف شما.
مطالب جدیدتر و زیباتر رو هم میتونید بعدا در سایت ببینید
بدرود موفق باشید
سلام خسته نباشید میشه لطف کنید قالب سایت منو به وردپرس تبدیل کنید من من نتونستم انجام بدم خواهش میکنم۰۹۱۵۵۱۵۲۵۰۳
با سلام با شماره تلفن ۰۹۳۷۵۷۷۰۳۳۳ و یا بخش تماس با ما سایت در ارتباط باشید انجام میشه.
باید کد مربوط به فراخوانی استایل رو قرار بدید و در خود استایل باید کد های مربوطه مربوط به نام فایل نوشته بشه .
حتما . امتحانات دانشگاه دست ما رو بسته . ایشالله آموزش های خوبی میذاریم .
خواهش میکنم و ممنون از شما بازدید کننده ی عزیز .
سلام
ببخشید من نفهمیدم اموزشتونو تازه واردم مثلا گفتید برای نمایش کامت ها این کد خب این کدو کجا وارد کنیم توindex.php تو header یا…. یا تعداد صفحات و غیر اگه میشه کمکم کنید
لطف کنید جوابو به ایمیلم بفرستید ممنون
پاسخ به ایمیلتون فرستاده شد دوست من .
ممنون از شما . سایت ما شروع به آموزش طراحی قالب وردپرس کرده و شما میتونید از قسمت تلویزیون وردپرس ( دسته بندی سایت ) این آموزش هارو دانلود کنید . از صفر تا ۱۰۰ آموزش میدیم !
سلام
خیلی ممنون از آموزش خوبتون
دوتا سوال؟؟
آیا کد فقط برای فایل style.css است؟
و اینکه چطوری یه فایل دیگه که مثلا آدرسش به صورت folder1/mainstyle.css هستش رو لینک کنیم؟؟
سلام . خواهش میکنم . شما میتونید از کد template_directory استفاده کنید برای فایل های دیگه
سلام
کد این قالب وبلاگی مال میهن بلاگه همین وردپرسیش می خوام بکنم لطفا دوستان قیمت بدهند
http://zarabanebourse.ir
باتشکر
درود و سپاس از نوشته ی خوبتون . من یک سایت با bootstrap نوشتم . فقط html و css و jQuery متاسفانه کار با javascript و php رو بلد نیستم . حالا برای سیستم مدیریت محتوا میخوام از وردپرس استفاده کنم . سامانه ی تغیر پروفایل برای افرادی که وارد سایت شده اند یک چیزی شبیه به cloob هست و امکاناتی که عضو ها دارند : ۶ صفحه html هست که مربوط میشه به تغیر عکس و مشخصات و اطلاعات تماس و … میتونم چنین سامانه ای رو روی وردپرس پیاده کنم ؟
امکانات سایت من یک برگه ی search حرفه ای باید باشه و سامانه ی ورود و خروج , همین و بس . ولی نمیدونم باید چی کار کنم اصلا میشه از وردپرس اسفاده کنم ؟ من سه تا css از bootstrap دارم و یک custom.css . آیا اینهارو یکی کنم در style.css ؟
و اینکه در قسمت header , خب قراره که سایت من عضویت داشته باشه و header در صورت ورود باید تغیر کنه . اینجا رو نمیدونم چی کار کنم ؟
بعد سایتی که درست کردم از ۹ صفحه html درست شده . که این ۹ صفحه از سه css تقریلا جداگانه استفاده شده . یعنی برگ نخست و برگه ی search سایت , css جداگانه داره . و همینطور از section استفاده نکردم و قالب تقریبا بی اصول نوشته شده . حالا چند تا پرسش ؟؟؟؟ یکی که میتونم از وردپرس استفاده کنم با برگه ی search ی تقریبا شبیه به سایت sheypoor.com و اینکه برگه نخست من از سه بخش تمام صفحه درست شده . یک سامانه عضویت و وردود هم باید داشته باشه که امکانات سایت وقتی که وارد شود کسی . باز شود . یعنی اینهمه زحمت کشیدم و یک سایت html خفن طراحی کردم برم با یک برنامه نویس php همکاری کنم که با یک روز کار میتونه درستش کنه ؟ یا خودم میتونم یک کاریش کنم ؟ حالا با وردپرس یا php از قالب های رایگان … میشه لطفا اگر پاسخ دادید من رو از ایمیل با خبر کنید . سپاس گزارم شدید .
سلام من مطالب رو از طریق این آرایه فراخوانی کردم و گفتم که در صفحه مثلا چهارتا پست باشه و همینطور هم میشه ولی مشکل من صفحه بندیه که از هر کدی کهع استفاده میکنم صفحه بندی نمیاد…..
یعنی من میخوام از پست چهارم به بعد توی یه صفحه جدید نمایش داده بشه….
ممنون میشم کمک کنید
با تشکر از سایت خوبتون