آموزش ساخت پوسته وردپرس با HTML قسمت دوم

[modirantarah]

در قسمت اول آموزش ساخت پوسته وردپرس ، ما به آموزش و تشریح مطالب پایه و ضروری در مورد تبدیل قالب HTML به پوسته وردپرس پرداخیتم.
در قسمت اول ساخت پوسته وردپرس ، مطالبی راجع به تکه ، تکه کردن کد های HTML به صفحات PHP و ایجاد ارتباط بین صفحات را آموختیم ، همچنین با نحوه ساخت فایل style.css برای ساخت پوسته وردپرس آشنا شدیم.
در این مقاله آموزشی ما به بررسی مسائل جزئی تر در مورد ساخت پوسته وردپرس می پردازیم ، تا شما بتوانید پوسته ایی با ساختار توابع وردپرس ایجاد کنید.

پیکربندی تصاویر و فایل های JavaScript
اگر شما در فایل index.html قالب وب سایت خود از تصاویر استفاده کرده باشید ، حتما متوجه این مورد شده اید که تصاویر به کار رفته در قالب HTML پیشین پس از تکه ، تکه شدن به صفحات PHP نمایش داده نمیشوند ! به عنوان مثال ، تصور کنید ما از یک لوگو و یا نشان در قسمت header و یا سربرگ قالب خود استفاده کردیم.

<img alt="your_logo_alt_text"src="images/logo.jpg"/>

شما برای نمایش صحیح این تصویر نیاز به برخی تغییرات خواهید داشت ، کد HTML بالا به مرورگر اطلاع میدهد تا تصویر لوگو (یا هر تصویر دیگری) را در داخل پوشه images (داخل دایرکتوری پوسته) پیدا کرده و نمایش دهد ، بنابراین برای نمایش تصویر لوگو در ناحیه سربرگ وب سایت فایل header.php را باز کنید ، و سپس کد زیر را به جای تکه کد HTML بالا (نگ img) جایگزین نمایید.

<img alt="your_logo_alt_text"src="<?phpechoget_template_directory_uri();?>/images/logo.jpg"/>

تابع get_template_directory_uri مقداری برابر با دایرکتوری فعلی پوسته شما را نمایش خواهد داد ، پس اگر تصویر لوگو و یا نشان شما در پوشه images قرار داشته باشد ، تابع فوق این تصویر را به نمایش خواهد گذاشت.
در نظر داشته باشید که این تابع ، مشکل عدم نمایش تصویر لوگو شما در سربرگ و یا header وب سایت را رفع خواهد کرد ، بنابراین برای نمایش سایر تصاویر به کار رفته در قالب وب سایت خود می بایستی از شیوه ایی مشابه به این تابع استفاده نمایید.
نوبت پیکربندی فایل های JavaScript هست ، اگر شما در قالب HTML و یا پوسته وردپرس خود تمایل به استفاده از کدهای جاوا اسکریپت دارید ، پوشه ایی به نام js (نام دلخواه) در داخل دایرکتوری پوسته وردپرس خود بسازید و فایل های جاوا اسکریپت خود را در داخل این فولدر قرار دهید.
شما میتوانید فایل های جاوا اسکریپت خود را در فایل header.php نیز فراخوانی نمایید.

<script type="text/javascript"src="<?php echo get_template_directory_uri(); ?>/js/example.js"></script>

کد بالا به مرورگر اعلام میکند ، که به هنگام بارگزاری وب سایت شما فایل example.js را نیز فراخوانی نماید. (نام فایل خود را جایگزین نمایید)

فایل های پوسته وردپرس
در قسمت اول آموزش ساخت پوسته وردپرس به بررسی و ساخت فایل های اصلی قالب و یا پوسته وردپرس تحت عناوین index.php ، header.php ، sidebar.php ، footer.php پرداختیم ، فایل های سازنده پوسته وردپرس وظیفه کنترل به نحوه نمایش وب سایت در مرورگر را بر عهده دارند ، این فایل ها محتوای وب سایت شما را از طریق بانک اطلاعاتیMySQL فراخوانی نموده و سپس آن ها را به کد های HTML و قابل تفسیر برای مرورگرها تبدیل میکنند ، به عبارت بهتر فایل های قالب وردپرس ، بلوک های سازنده پوسته می باشند ، برای درک بهتر به سلسله مراتبی بودن این فایل ها می پردازیم.
در صورتی که بازدیدکننده ایی بر روی لینک دسته بندی نوشته ها کلیک نماید ، (به عنوان مثال : دسته بندی وبلاگ یا …) وردپرس از طریق قواعد سلسله مراتبی به تشخیص دسته بندی مربوطه پرداخته و فایل مورد نظر را بارگذاری می کند.
در قدم اول ، وردپرس به دنبال فایل های پوسته خود که تظابقی با ID و یا شناسه دسته بندی مورد نظر دارند ، خواهد بود.
به عنوان مثال : اگر ID و یا شناسه دسته بندی مورد نظر 2 بود ، وردپرس در فایل های قالب وب سایت به دنبال فایل category-2.php خواهد بود.
در صورتیکه فایل category-2.php وجود نداشت وردپرس به دنبال فایل مادر و یا category.php میرود.
اگر فایل ذکر شده در بالا نیز یافت نشد ، وردپرس به دنبال فایل آرشیو در پوسته خود ، خواهد بود. archive.php
و در نهایت ، در صورتیکه فایل archive.php نیز ، در داخل فایل های سازنده پوسته وردپرس وجود نداشته باشد ، وردپرس به فایل index.php رجوع خواهد کرد.
به طور کلی مکانیزم نمایش و فراخوانی وردپرس بصورت فوق می باشد ، شما میتوانید با ساخت و شخصی سازی فایل های اشاره شده در بالا ، پوسته وردپرس خود را جامع تر نمایید. سایر فایل های پوسته وردپرس شامل موارد زیر می باشند.
home.php or index.php برای رندر نمودن ، نوشته های وبلاگ در index به کار میرود.
front-page.php برای نمایش تکی پست استفاده میشود.
single-{post-type}.php برای نمایش پست تایپ شخصی سازی شده به کار میرود ، به عنوان مثال در صورتی که پست تایپ شما product باشد ، وردپرس از فایل single-product.php استفاده خواهد کرد.
page.php برای بارگذاری برگه های ایستا به کار میرود.
category.php یا archive.php برای نمایش دسته بندی و آرشیو استفاده میشود.
author.php نمایش اطلاعات مربوط به نویسنده وب سایت
date.php نمایش تاریخ
search.php نمایش لیست نتایج جستجو
404.php برای کنترل صفحات یافت نشده در وب سایت یا خطای 404 در هاست

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

تگ های پوسته وردپرس
در قسمت اول آموزش ساخت پوسته وردپرس شما با تگ هایی مانند get_header, get_sidebar, get_footer , bloginfo آشنا شدید ، در ادامه ما تعدادی تگ های پوسته وردپرس برای تکمیل قالب خود اضافه خواهیم کرد ، در ابتدا معرف سند متنی HTML را به بالای فایل header.php اضافه کنید.

<!DOCTYPE HTML>

برای اعلام و مشخص کردن زبان وب سایت خود تابع language_attributes tag را به کد بالا اضافه میکنیم.

<html xmlns="http://www.w3.org/1999/xhtml"<?phplanguage_attributes();?>

کد بالا نتیجه زیر را خواهد داشت.

<html xmlns="http://www.w3.org/1999/xhtml"lang="en-US">

با اضافه کردن DOCTYPE و همچنین تابع مشخص کننده زبان وب سایت ، مرورگرها از ساختار پوسته شما آگاه خواهند شد ، در صورتی که شما از این پوسته برای وبلاگ و یا پایگاه خبری استفاده خواهید کرد ، به نظر من افزودن دستورات مربوط به pingbackلینک ها ، خوراک فید RSS بسیار ضروری می باشد ، در فایل header.php دستورات زیر را وارد کنید.

<link title="<?phpbloginfo('name');?> RSS Feed"href="<?phpbloginfo('rss2_url');?>"rel="alternate"type="application/rss+xml"/><link href="<?phpbloginfo('pingback_url');?>"rel="pingback"/>

و همچنین قبل از ذخیره و خروج از فایل header.php کد PHP زیر را نیز وارد کنید.

<!--?php wp_head();?-->

دستور wp_head فایل های مربوط به Stylesheet و JavaScript مورد نیاز توسط پلاگین های نصب شده را فراخوانی میکند ، در صورتیکه شما این تکه کد کوچک را فراموش کنید ، پلاگین های شما درست بارگذاری نخواهند شد ، برای افزودن اطلاعات وبلاگ و عنوان صفحه کد های زیر را در فایل header.php اضافه نمایید.

<!--?php bloginfo('name');?--><!--?php wp_title('-')?-->

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

شما میتوانید با نرم افزارهای ویرایش تصویر نظیر فتوشاپ تصویری در ابعاد طولی 600px و عرض 450px ساخته و با فرمت png ذخیره نمایید ، در نظر داشته باشید که نام تصویر پیشنمایش می بایستی screenshot.png باشد ، تصویر را در دایرکتوری پوسته خود قرارداده و سپس مجدد اقدام به نصب و آپلود پوسته وردپرس خود نمایید.

در آموزش بعدی به بررسی آناتومی و یا ساختار بندی ساخت پوسته وردپرس خواهیم پرداخت…​