.::آموزش طراحی پوسته وردپرس::. [ حرفه ای ] .::

  • نویسنده موضوع erfan
  • تاریخ شروع

erfan

طراح وب
پرسنل مدیریت
.:: آموزش طراحی پوسته ی وردپرسی به صورت حرفه ای ::.


دوستان تصمیم بر این شد که آموزش مرحله به مرحله طراحی یک پوسته وردپرسی رو قرار بدم سعی میکنم در اولین فرصت آموزش رو شروع کنم لطفا در این تاپیک هیچ پست اسپمی ایجاد نکنید. :stop:

میتونید سایر توضیحات لازم رو در زیر مطالعه کنید:

پیش نیاز ها:

  • آشنایی سطحی با HTML و CSS
  • آشنایی با وردپرس
  • یک ویرایشگر ساده به انتخاب خودتون

یک پوسته ی ساده قبلاً برای این کار طراحی شده که الان میتونید کنید...

 
آخرین ویرایش توسط مدیر:

erfan

طراح وب
پرسنل مدیریت
پوسته های وردپرس با فرمت PHP ساخته میشن د این راستا صفحات متعددی برای بخش های مختلف یک وبلاگ وردپرسی وجود داره که در زیر به توضیحات این بخش ها پرداختیم...

index.php این صفحه پوسته ی صفحه ی اصلی سایت است

header.php این کدهای بخش هدر وبسایت را در خود جای میدهد و در سایر صفحات فراخوانی میشود.

footer.php این کدهای بخش فوتر وبسایت را در خود جای میدهد و در سایر صفحات فراخوانی میشود.

single.php این صفحه ادامه مطلب پست های وردپرس میباشد.

page.php این یکی پوستهی یه برگه ها است.

404.php این صفحه خطای 404 میباشد.

sidebar.php این کد های بخش ابزارک وبسایت را در خود جای میدهد و در سایر صفحات فراخوانی میشود.

style.css کد های سی اس اس (CSS) وبسایت را در خود دارد.

search.php این یکی صفحه ی نتایج جستجو است.

searchform.php این کد های باکس جستجوی سایت را در خود جای داده و در سایر صفحات فراخوانی میشود.

functions.php این فایل محل قرار گیری کد های آماده است که جنبه ی نمایشی ندارد.

comments.php این فایل کد های بخش نظرات وردپرس را در خود دارد. و در سایر صفحات فراخوانی میشود

در پست بعدی شروع به ترجمه HTML به وردپرس خواهیم کرد...

 
آخرین ویرایش توسط مدیر:

erfan

طراح وب
پرسنل مدیریت
جهت شروع شما باید قالبی را به صورت HTML طراحی کرده باشید و آماده به تبدیل آن به وردپرس باشید. ما برای آموزش یک پوستهی ساده در پست اول قرار دادیم. میتوانید از آن استفاده کنید...

1 ، 2 ، 3 شروع!

خوب فایل های HTML رو به فرمت PHP تبدیل کنید.

سی اس اس های خود رو حتما در فایل style.css قرار بدید...

کد های قسمت هدر از تگ HTML تا پایان بخش هدر وبسایت را در فایل header.php قرار دهید و آن در تاوسط کد زیر در فایل index.php فراخوانی کنید:


کد:
<?php get_header(); ?>
و به همین صورت کد های بخش هدر تا پایان تگ HTML را در فایلی با نام footer.php قرار دهید و با کد زیر فراخوانی کنید:


کد:
<?php get_footer(); ?>
حالا وقت فراخوانی style.css در فایل header.php هست. کافیه کد زیر رو در تگ head قرار بدید(البته توجه کنید که فایل style.css در فولدری جز فولدر قالب نباشه)


کد:
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
خوب همونطور که نمیدونید توضیحاتی همچون مشخصات پوسته ی وردپرسی در فایل style.css قرار میگیره. بهتره جز اولین کد ها باشه...

خوب توضیحات به شکل زیر نوشته میشن:


کد:
/*
Theme Name: نام پوسته
Theme URI: http://آدرس پوسته.ir
Author: نام طراح پوسته
Author URI: http://آدرس طراح وسته.ir
Description: توضیحات قالب به صورت دلخواه
Version: نگارش قالب
*/
خوب با وارد کردن این مشخصات در فایل style.css حالا ورپرس پوسته شما رو میشناسه همینطور میتونید تصویری رو برای پوسته قرار بدید کافیه فایل تصویری ترجیعاً با فرمت png و. jpeg و با نام screenshot در پوشه اصلی وسته قرار بگیره.

حالا وارد پیشخوان پوسته ها بشید و نتیجه رو ببینید.

منتظر ادامه آموزش باشید...

 

erfan

طراح وب
پرسنل مدیریت
خوب حالا:

بریم سراغ قرار دادن یکسر کدهایی که لازمه قرار بگیرند!!

به طور مثال ما باید تگ head قالب رو به وردپرس بشناسونیم. و یا کد نوار مدیریت وردپرس رو اضافه کنیم:

خوب برای شناسوند تگ head به وردپرس کد زیر رو در فایل header.php در تگ head قرار بدید:


کد:
<?php wp_head(); ?>
حالا اگر با وردپرس لاگین باشید میبینید یک فاصله در بالای صفحه به وجود اومد خوب اون برای نوار ابزار وردپرس هست که با قرار دادن کد زیر در فایل footer.php قبل از پایان تگ body ظاهر میشه:


کد:
<?php wp_footer(); ?>
خوب اگر مراحل رو به درستی انجام داده باشید نتیجه مثبت خواهد بود ( از کجا فهمیدم؟)

اگر توجه کرده باشید با تبدیل ایل ها به PHP و قرار دادن اونها در فولدر themes وردپرس ، دیگه تصاویری که با تگ img تعریف شدند ود نمیشن. چرا؟ چون آدری که بهشون داده شده حالا دیگه به کار نمیاد و باید یک کد PHP بهشون اضافه کرد که بتونه آدرس وبسیات و قولدر ها رو قرار بده.

مثلاً اگر کدی اینجوریاس:


کد:
<img src="image/logo.png" />
باید اینجوری بشه:


کد:
<img src="<?php bloginfo('template_url'); ?>/image/logo.png" />
گرفتی؟

یعنی این کد آدرس وبسایت و فولدر هایی که پوسته در اون قرار داره رو میزاره جا خودش!!!


کد:
<?php bloginfo('template_url'); ?>
مثال:


کد:
http://persianscript.ir/wp-contect/themes/yourtheme
.

خوب حالا کدی که عنوان وبسایت رو میسازه و باید در title قرار بگیره( تگ title در تگ head در فایل header.php قرار داره)

به این صورت:


کد:
<title>‫<?php bloginfo('name'); ?><?php wp_title(); ?>‬</title>
خوب این توی سئو وبسایت خعلی تاثیر داره و هیچوقت فراموشش نکنید.

کد <?php bloginfo('name'); ?> نام وبسایت رو در خود داره و کد <?php wp_title(); ?> عنوان صفحات پست ها و... رو تعریف میکنه

.

خوب حالا بریم سراغ ابزارک ها البته در پست بعد قالب رو ابزارک خور میکنیم الان فقط میخوایم کارهای اولیه رو انجام بدیم.

فایلی با نام sidebar.php ایجاد کنید و کد های ابزارک هایی که طراحی کردید رو درونش بریزید(با هدر و فوتر هم همین کار رو کردیم) حالا با کد زیر فراخوانیش کنید:


کد:
<?php get_sidebar(); ?>
اگر قلت عملایی چیزی دیدید ببخشید چون وقت اندکه و خعلی سریع تایپ میکنم.

منتظر ادامه آموزش باشید...

 

erfan

طراح وب
پرسنل مدیریت
سلام دوستان.

تو این پست با حلقه پست های وردپرس آشنا میشید و همینطور چگونگی استفاده ازش...

حلقه مطالب کارش صرفاً قرار دادن مطالب پست شده وردپرس هست. که به ترتیب قرار بگیرند.

این حلقه با کد زیر شروع میشه:


کد:
<?php if(have_posts()) : ?>
  <?php while(have_posts()) : the_post(); ?>
و با این کد هم به پایان می انجامه و شرطی قرار میگیره که اگر مطلبی وجود نداشت.چاپ کنه: "مطلبی موجود نیست":


کد:
<?php endwhile; ?>  <?php else : ?>  <span>مطلبی موجود نیست!</span>  <?php endif; ?>
پس شد اینجوری:


کد:
<?php if(have_posts()) : ?>  <?php while(have_posts()) : the_post(); ?>

/محل قرار گیری محتوای ارسالی...


  <?php endwhile; ?>  <?php else : ?>  <span>مطلبی موجود نیست!</span>  <?php endif; ?>
خوب حالا درون حلقه باید محتوای پست رو قرار بدیم مثلاً عنوان پست،تصویر شاخص،متن پست و...

ادامه در تاپیک بعدی...

 

erfan

طراح وب
پرسنل مدیریت
سلام دوستان. (پوزش بابت تاخیر)...

در پست قبلی به معرفی حلقه مطالب وردپرس پرداختیم، حالا وقتش رسیده که محتوا هر پست وردپرس رو برای حلقه مشخص کنیم.

در وحله*ی اول ما باید عنوان پست رو قرار بدیم. بهتره که در یک تگ <h1> قرار بگیره:


کد:
[SIZE=10px][/SIZE][/SIZE][SIZE=10px][/SIZE][/SIZE][SIZE=10px][SIZE=2][/SIZE][SIZE=10px] <h1><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">[/SIZE][SIZE=10px][/SIZE][/SIZE][SIZE=10px][SIZE=2][/SIZE][SIZE=10px]      <?php the_title(); ?>[/SIZE][SIZE=10px][/SIZE][/SIZE]
[SIZE=10px][SIZE=2][/SIZE]
[SIZE=10px]      </a></h1>[/SIZE][SIZE=10px][/SIZE][/SIZE][SIZE=10px][SIZE=1][/SIZE][SIZE=10px][SIZE=2][/SIZE]
ما با استفاده از کد <?php the_title(); ?> عنوان پست رو قرار دادیم و با استفاده از کد <?php the_permalink() ?> آدرس پست رو برای لینک مشخص کردیم.

تصویر شاخص:

برای قرار دادن تصویر شاخص شما باید یک فایل functions.php رو درون فولدر قالبتون ایجاد کنید، سپس کد رو درون فایل functions.php قرار بدید:


کد:
[SIZE=10px]<?php[/SIZE]
[SIZE=10px]add_theme_support( 'post-thumbnails' );if (function_exists('add_image_size')):	add_image_size('film_thumbs',220,155);	endif;	[/SIZE]
[SIZE=10px]?>[/SIZE]
به کد بالا دقت کنید، ما اول به وردپرس فهموندیم که قالبمون از تصویر شاخص پشتیبانی میکنه، سپس سایز تصویر شاخص رو به اون دادیم که با چه سایزی در سرور تصویر شاخص رو زخیره کنه در بالا سایز 220*155 مشخص شده که به دلخواه میتونید تغییرش بدید.

حالا وقت اون رسیده که ما در حلقه مطالب وردپرس تصویر شاخص پست رو فراخوانی کنیم:


کد:
[SIZE=10px]<a href="<?php the_permalink() ?>">        <?phpif(has_post_thumbnail()):the_post_thumbnail('film_thumbs');endif;?>[/SIZE]
[SIZE=10px]</a>[/SIZE]
کد بالا این کار رو انجام میده اگر دقت کنید میبینید که ما کد تصویر شاخص رو در یک لینک قرار دادیم و کد آدرس پیت رو برای اون فرا خوندیم!

حالا وقت این رسیده که کد متن پست رو به حلقه بدیم:

این کد متن کامل پست رو قرار میده:


کد:
[SIZE=10px]<?php the_content(); ?>[/SIZE]
و این کد هم خلاصه ای رو قرار میده که بیشتر مورد استفاده وبلاگ ها و مجلات خبری قرار میگیره:


کد:
[SIZE=10px]<?php the_excerpt(); ?>[/SIZE]
ادامه در پست بعدی منتظر باشید...

 

erfan

طراح وب
پرسنل مدیریت
سلام

قصد دارم چند کد جهت استفاده در حلقه مطالب وردپرس معرفی کنم به طور مثال: تاریخ انشار مطلب / نویسنده / موضوع مطلب / تعداد دیدگاه ها

کد تاریخ انتشار:


کد:
<?php the_time('d / m / y') ?>
کد نام نویسنده:


کد:
<?php the_author(); ?>
موضوع مطلب:


کد:
<?php the_Category(' , '); ?>
دیدگاه:


کد:
<?php comments_popup_link(); ?>
(این کد های باید در حلقه مطالب وردپرس استفاده بشن)

در پست بعدی روش ساخت ساید بار رو به طور کامل توضیح میدم...

 

erfan

طراح وب
پرسنل مدیریت
سلام

پوزش بابت تاخیری که در روند آموزش پیش آمد...

در این پست به آموزش ساخت سایدبار قابل تغییر در مدیریت وردپرس خواهیم پرداخت.

در پست های قبل از شما خواستیم که برای قرار دادن تصویر شاخص در پست نیاز به شناسایی این ویژگی قالب به وردپرس دارید و برای این امر از فایل functions.php و محتوای درون اون استفاده میشه... حالا برای شناسایی سایدبار به وردپرس هم باید کدی رو در functions.php قرار بدیم، کد لازم به شرح زیر است:


کد:
<?php
    if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'ابزارک ها',
'id' => 'sidebar',
'description' => 'مدیرت ابزارک ها.',
'before_widget' => '<div class="widget">', //کد باز شدن DIV یک ساید*بار
'after_widget' => '</div>', //کد بسته شدن DIV یک سایدبار
'before_title' => '<h3 class="widget-title">', //کد باز شدن برچسب h3 عنوان سایدبار
'after_title' => '</h3><div class="widget-text"></div>'
));
}
?>
همونطور که در کد های بالا مشخص است ما با این کد ، سایدبار را به وردپرس فهماندیم!

حالا نوبت به نمایش ساید بار در هرجا که دوست داریم میرسد. فایلی با نام sidebar.php ایجاد کنید و کد زیر رو در اون قرار بدید:


کد:
<?php
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar')):
endif; 
?>
اگر دقت کنید واژه*ی sidebar که در کد function در مقدار id قرار گرفت در کد بالا نیز قابل مشاهده است.

خوب حالا با قرار دادن این کد در هرکجای قالبتون مثلاً در فایل index.php میتونید سایدبار رو نمایش بدید:


کد:
<?php get_sidebar(); ?>
منتظر ادامه آموزش باشید.

خوش باشید.

 
بالا