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

آموزش طراحی سایت وردپرس

طراحی قالب وردپرس

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

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

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

طراحی سایت وردپرس

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

 

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 را در ویرایشگر کد باز کرده و کدهای زیر را در اولین خط فایل قرار دهید.

 

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

برای اضافه کردن تصویر پوسته نیز می توانید فایل logo.png موجود در پوشه ی images را کپی کنید و در کنار فایل style.css پیست کنید سپس نام آن را به screenshot.png تغییر دهید. حال اگر دوباره صفحه پوسته ها را ریفرش کنید، می بینید که تصویر پوسته نیز در کنار اطلاعات نمایش داده شده است.

منبع: سون لزن

پاسخ دهید

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