آموزش وردپرس: نحوه ایجاد قالب وردپرس از HTML (قسمت 2)

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

پیکربندی تصاویر و فایل های جاوا اسکریپت

اگر تصاویری در قالب HTML اصلی خود (index.html) داشتید، احتمالاً متوجه شده اید که پس از خرد کردن الگو به فایل های PHP، نمایش آنها متوقف شده است. اصلاً نگران نباشید، این دقیقاً همان شکلی است که PHP است. به عنوان مثال، اگر در بخش سرصفحه خود یک لوگو داشتید مانند این…

 پیش>
…شما باید کمی با کد بازی کنید. کدی که در یک لحظه فاش می‌کنم به مرورگرها کمک می‌کند تا نشان‌واره شما (یا هر تصویر دیگری) را در پوشه تصاویر تان، که زیرپوشه دایرکتوری اصلی موضوع شما است (یا باید باشد) پیدا کنند. بنابراین، برای نمایش لوگوی خود در قسمت header، فایل header.php را باز کرده و کد بالا را با کد زیر جایگزین کنید:
/images/logo%20jpg">
تابع get_template_directory_uri() url را برای فهرست تم شما برمی گرداند. بنابراین اگر لوگوی خود را به یک پوشه تصاویر اضافه کنید، کد آن لوگو را می گیرد.
به تفاوتی توجه کرده اید؟ بدیهی است که این قطعه کد فقط لوگوی شما را اصلاح می کند. برای اصلاح سایر تصاویر، باید کدهای آنها را به روشی مشابه بازنویسی کنید. موارد آسان.
اجازه دهید به جاوا اسکریپت برویم. اگر وب سایت HTML شما از جاوا اسکریپت استفاده می کند، پوشه ای به نام js ایجاد کنید و اسکریپت های خود را در آنجا قرار دهید. می توانید با استفاده از کد زیر آنها را در فایل header.php فراخوانی کنید:

کد بالا از example.js به عنوان تصویر استفاده می کند. فراموش نکنید که آن قسمت را با نام فایل جاوا اسکریپت خود جایگزین کنید.
البته اگر برای شخص دیگری تم ایجاد می‌کنید، باید فایل‌های js خود را با wp_enqueue_scripts بارگیری کنید. پست های AJ را در مورد افزودن جاوا اسکریپت به تم های وردپرس< /a> برای اطلاعات و نکات بیشتر.
فایل های الگو
در قسمت اول این آموزش، به چهار فایل قالب اصلی به نام‌های index.php، header.php، sidebar.php و footer.php اشاره کردیم. فایل های الگو نحوه نمایش وب سایت شما در وب را کنترل می کنند. قالب ها اطلاعاتی را از پایگاه داده MySQL وردپرس شما دریافت می کنند و آن را به کد HTML که در مرورگرهای وب نمایش داده می شود ترجمه می کنند. به عبارت دیگر، فایل های قالب بلوک های سازنده قالب های وردپرس هستند. برای درک بهتر الگوها، اجازه دهید مفهومی به نام سلسله مراتب الگو را بررسی کنیم.
ما از یک قیاس استفاده خواهیم کرد. اگر بازدیدکننده روی پیوند یک دسته (یعنی پیوند به یک دسته) مانند https://www.yoursite.com/blog/category/your-category/ کلیک کند، وردپرس از سلسله مراتب قالب برای تولید فایل (و محتوای مناسب) استفاده می کند. در زیر توضیح داده شده است:

ابتدا وردپرس به دنبال فایل قالبی می گردد که با شناسه دسته مطابقت داشته باشد
اگر شناسه دسته، به عنوان مثال 2 باشد، وردپرس به دنبال یک فایل قالب با نام category-2.php
اگر category-2.php در دسترس نباشد، وردپرس به سراغ فایل قالب دسته بندی عمومی مانند category.php می رود
اگر این فایل قالب نیز در دسترس نباشد، وردپرس به دنبال یک الگوی بایگانی عمومی مانند archive.php خواهد بود
اگر قالب بایگانی عمومی وجود نداشته باشد، وردپرس به فایل قالب اصلی، index.php برمی گردد

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

 استفاده می کرد

 استفاده می شود

 استفاده می شود

 استفاده می شود

 استفاده می شود






home.php یا index.php
برای نمایش فهرست پست های وبلاگ


front-page.php
برای نمایش صفحات استاتیک یا آخرین پست ها همانطور که در نمایشگرهای صفحه اول تنظیم شده است استفاده می شود


single.php
برای ارائه یک صفحه پست استفاده می شود


single-{post-type}.php
برای ارائه انواع پست های سفارشی به عنوان مثال استفاده می شود. اگر post-type یک محصول بود، وردپرس از single-product.php


page.php
برای ارائه صفحات استاتیک


category.php یا archive.php
برای ارائه نمایه بایگانی دسته بندی


author.php
برای ارائه نویسنده


date.php
برای رندر تاریخ استفاده می شود


search.php
برای ارائه نتایج جستجو استفاده می شود


404.php
برای نمایش صفحه خطای سرور 404



این فقط یک لیست کوتاه است،  دیگر وجود دارد قالب های وردپرس. موضوع قالب ها موضوع بزرگی است، و بهترین راه برای یادگیری نحوه بازی با فایل های قالب، خواندن توسعه تم در وردپرس. همچنین، می‌توانید بخش قالب‌ها را در WordPress Codex کوتاه‌تر بخوانید..
برچسب های الگو
با توجه به اینکه ما به تازگی فایل های قالب را معرفی کردیم، منصفانه است که یکی دو مورد در مورد تگ های قالب و نقش آنها در قالب وردپرس ذکر کنیم. به گفته WordPress.org، «…برچسب‌های قالب در قالب وبلاگ شما برای نمایش اطلاعات به صورت پویا یا سفارشی کردن وبلاگ شما استفاده می‌شوند و ابزارهایی را فراهم می‌کنند تا آن را به همان اندازه که هستید منحصر به فرد و جالب کنید.
در آموزش قبلی ما، با چند برچسب الگو مانند get_header، get_sidebar، get_footer و bloginfo آشنا شدید. در بخش بعدی، چند تگ قالب را به قالب جدید وردپرس خود اضافه می کنیم. من فرض می کنم که شما قبلاً اعلان DOCTYPE را در فایل header.php خود قرار داده اید. اگر این کار را نکرده اید، کد زیر است:

اعلامیه DOCTYPE به کد HTML شما معنی می دهد. با این کار، اجازه دهید تگ HTML افتتاحیه را اصلاح کنیم. ما یک ویژگی lang را با استفاده از برچسب_language_attributes اضافه می‌کنیم مانند:

کد بالا موارد زیر را ایجاد می کند:

با قرار دادن اعلان DOCTYPE و برچسب language_attribute، ساختار طرح زمینه شما قانونی است و مرورگرها کد شما را درک خواهند کرد. اگر در حال ایجاد تم برای وبلاگ هستید، مهم است که پیوندهایی به URL پینگ بک و فید RSS خود را در ذهن خود قرار دهید. در header.php کد زیر را اضافه کنید:

آیا متوجه شدید که چگونه از برچسب bloginfo برای گنجاندن فید RSS (‘rss2_url’) و pingback (‘pingback_url’) استفاده کردیم؟ قبل از ذخیره فایل header.php، کد زیر را نیز اضافه کنید:

برچسب wp_head بالا، برگه‌های سبک و فایل‌های جاوا اسکریپت مورد نیاز افزونه‌های شما را وارد می‌کند. اگر این قطعه کوچک کد را کنار بگذارید، ممکن است افزونه های شما آنطور که می خواهید کار نکنند. با وجود این موضوع، اجازه دهید عنوان صفحات را با استفاده از – یک بار دیگر – با استفاده از برچسب bloginfo به قالب وردپرس خود اضافه کنیم. در فایل header.php خود، کد زیر را اضافه کنید:

اولین تگ wp_title عنوان صفحه یا پست شما را اضافه می کند و تگ دوم bloginfo(‘name’) نام وبلاگ شما را اضافه می کند. اکنون که قالب وردپرس شما دارای عناوین صفحه است، چطور می‌خواهید یک اسکرین شات برای موضوع خود ایجاد کنیم، قالب را دوباره بسته بندی کنیم و استراحت کنیم؟
ایجاد یک اسکرین شات برای تم شما
وقتی برای اولین بار پوسته آزمایشی خود را آپلود کردید، حتما متوجه شده اید که فاقد اسکرین شات در پنل قالب وردپرس است. به نظر کسل کننده به نظر می رسید، به خصوص اگر تم های دیگری با اسکرین شات های رنگارنگ داشته باشید. اما نگران نباشید، ایجاد یک اسکرین شات برای تم شما بسیار آسان است. فقط با استفاده از ویرایشگر تصویر مورد علاقه خود (به عنوان مثال Adobe Photoshop) یک تصویر ایجاد کنید یا تم خود را روی صفحه نمایش بگیرید. اطمینان حاصل کنید که تصویر شما 600 پیکسل عرض و 450 پیکسل ارتفاع دارد. تصویر را به عنوان screenshot.png در پوشه تم خود ذخیره کنید. همه تغییرات را ذخیره کنید، پوشه تم خود را در یک آرشیو ZIP فشرده کنید. تم را آپلود کنید و آن را فعال کنید تا تغییرات جدید خود را ببینید 😉
نتیجه گیری
من می‌خواهم باور کنم که این آموزش دوم به شما بینش عمیق‌تری برای ایجاد یک تم وردپرس از HTML ایستا ارائه می‌دهد. در آینده نزدیک شما را با جنبه های دیگر قالب وردپرس آشنا خواهم کرد، اما در این بین منابع زیر را فقط برای شما آماده کرده ام:
ایجادتان مبارک!