آموزش طراحی حرفه ای قالب وردپرس(۲)

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

ابتدا به پوشه وردپرس در مسیر زیر بروید :

در این پوشه، پوسته های نصب شده در ورپرس قرار می گیرند، که اگر به صورت پیشفرض باشد و پوسته ای نصب نکرده اید با ساختار زیر روبرو خواهید شد :

 

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

Index.php
Header.php
Footer.php
Sidebar.php
Single.php
Page.php
Loop.php
Comments.php
Search.php
Searchfrom.php
Archive.php
Functions.php
404.php
Style.css
 
البته در یکی از آموزش ها کاملا این فایل ها رو تحلیل و بررسی کردیم (خیلی خیلی مفیده برای اونایی که توقعشون از سایتشون بالاست)

14 فایل! شاید زیاد باشند، اما ایجاد و کار کردن با همه ی آن ها بسیار آسان است ،بد نیست الان هم یه توضیحاتی در مورد هر یک از این فایل ها بدیم:

  • Index.php : قالب صفحه اصلی
  • Header.php : کدهای سرصفحه در این فایل قرار می گیرند.
  • Footer.php : کدهای پاصفحه در این فایل قرار می گیرند.
  • Sidebar.php : کدهای ستون کناری در این فایل قرار می گیرند. البته اگر پوسته دارای 2 ستون کناری یعنی چپ و راست بود دوفایل right-sidebar.php و left-sidebar.php ایجاد می کنیم.
  • single.php : قالب مطالب.
  • Page.php : قالب برگه ها.
  • Loop.php : قالب مطالبی که در صفحه single.php و page.php قرار می گیرند.
  • Comments.php : قالب نظرات.
  • Search.php : قالب صفحه نتایج جستجو.
  • Searchform.php : کدهای فرم جستجو.
  • Archive.php : قالب صفحه آرشیو مطالب.
  • Functions.php : توابع پوسته، دراصل با استفاده از این فایل می توان امکانات بیشتری برای پوسته ایجاد کرد. که پر استفاده ترین امکان نیز ، پشتیبانی از ابزارک هاست.
  • 404.php : قالب صفحه خطای 404 (Not Found)
  • Style.css : استایل پوسته

حال که با فایل های یک پوسته ی وردپرس آشنا شدیم سراغ پوسته خودمان می رویم...

ایتدا یک پوشه جدید در پوشه ی themes در کنار سایر پوسته ها ایجاد کنید، نام آن مهم نمی باشد (من نامش رو mytheme می ذارم.) و سپس فایل های قالبی که ایجاد کردیم، یعنی فایل index.html، پوشه ی images و پوشه ی css را در داخل این پوشه منتقل می کنیم.

حال اگر وارد پنل مدیریت وردپرس شوید ، و از آن جا به بخش نمایش > پوسته ها بروید، پوسته ای که ایجاد کردیم جزء پوسته های خراب قرار گرفته است دلیل آن گم شدن فایل شیوه نامه یا همان فایل استایل است.

برای اینکه این مشکل را حل کرده و پوسته را راه اندازی کنیم ابتدا فایل style.css را از پوشه css بیرون آورده و در کنار index.html قرار دهید

حال اگر صفحه پوسته ها در بخش مدیریت را ریفرش کنید، توضیح به "پوسته گم شده" تبدیل می شود، دلیل آن نبود فایل index.php است. پس باید فرمت فایل را از html به php تبدیل کنید، میتوانید یک فایل جدید با فرمت php و با نام index ایجاد کرده و کدها را  در آن پیست کنید اما برای اینکه یونیکد فایل نیز خراب نشود. کار زیر را انجام دهید :

از Control Panel وارد Folder Options شوید و در تب view  تیک گزینه hide extentsions for known file type رو بردارید و اوکی کنید.

حال اگر به پوشه پوستمان برگردید، می بینید که فرمت فایل ها نیز در کنار آن ها نمایش داده می شود. حال فقط کافیست  فایل index.html را Rename کنید و کلمه html را به php تبدیل کنید و در پیغامی که ظاهر می شود yes را بزنید.

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

اگر دقت کرده باشید، قالب ما بدون استایل است، و دلیل آن تغییر مکان فایل style.css است، که باید آدرس آن را نیز در فایل index.php تغییر دهیم. اما در این جلسه کدنویسی خاصی انجام نخواهیم داد و فقط تا قسمت را اندازی کامل پوسته پیش خواهیم رفت.

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

اما اگر پوسته خودمان را فعال کنیم هیچگونه اطلاعات خاصی ندارد.

برای اضافه کردن این اطلاعات فایل style.css را در ویرایشگر کد باز کرده و کدهای زیر را در اولین خط فایل قرار دهید.

/*
Theme Name: My Theme
Theme URI: http://7learn.com
Author: Sajad Deris
Author URI: http://7learn.com
Description: پوسته آبی وردپرس
Version: 1.0
*/

اما اگر پوسته خودمان را فعال کنیم هیچگونه اطلاعات خاصی ندارد.

برای اضافه کردن این اطلاعات فایل style.css را در ویرایشگر کد باز کرده و کدهای زیر را در اولین خط فایل قرار دهید.

نمونه ای از آخرین کارهای ما

9 دیدگاه ها

  1. سایت ساز گفت:

    سلام. خیلی خوب بود. ممنون از سایت خوبتون.

  2. سلام . ممنون از وب سایت خوبتون. عالی بود.

  3. ایمپلنت گفت:

    بسیار عالی و مفید مرسی

  4. سایت راههای موفقیت گفت:

    آموزش مفیدی بود با تشکر

  5. آموزش خودیاد گفت:

    تشکر
    موفق باشید

  6. بسیار عالی موفق باشید

  7. سئو گفت:

    عالی بود سپاسگزارم

  8. مرسی از سایت عالی تون
    موفق باشید

  9. قانون جذب گفت:

    بسیار عالی موفق باشید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت