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

  1. 1. آموزش وردپرس: نحوه ایجاد یک موضوع وردپرس از HTML (قسمت 1)
  2. 2. در حال خواندن: آموزش وردپرس: نحوه ایجاد یک موضوع وردپرس از HTML (قسمت 2)
  3. 3. معرفی به آناتومی یک موضوع وردپرس

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


پیکربندی تصاویر و پرونده های JavaScript

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

your_logo_alt_text

… شما باید کمی با کد بازی کنید. کدی که من در یک لحظه فاش می کنم به مرورگرها کمک می کند تا آرم (یا هر تصویر دیگر) خود را در شما پیدا کنند تصاویر پوشه ، که (یا باید باشد) یک زیر پوشه از فهرست اصلی فهرست شما است. بنابراین ، برای نشان دادن آرم خود در بخش هدر ، پرونده header.php را باز کنید و کد فوق را با موارد زیر جایگزین کنید:

your_logo_alt_text

تابع get_template_directory_uri () نشانی اینترنتی فهرست راهنمای موضوع شما را برمی گرداند. اگر آرم خود را در پوشه تصاویر اضافه کنید ، کد آن آرم را می گیرد.

به هیچ تفاوتی توجه کنید؟ بدیهی است که این قطعه کد فقط آرم شما را برطرف خواهد کرد. برای رفع سایر تصاویر ، باید کدهای آنها را با روشی مشابه بازنویسی کنید. مواد طلایی آسان.

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

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

البته اگر برای شخص دیگری مضمون ایجاد می کنید ، باید واقعاً پرونده های js خود را با wp_enqueue_scripts بارگذاری کنید. برای اطلاعات و نکات بیشتر ، پستهای AJ را در اضافه کردن جاوا اسکریپت به مضامین وردپرس پرداخت کنید.

پرونده های قالب

در قسمت اول این آموزش ، ما به چهار پرونده الگوی اصلی اشاره کردیم index.php ، header.php ، sidebar.php و footer.php. فایلهای قالب نحوه نمایش وب سایت شما در وب را کنترل می کنند. قالب ها از پایگاه داده MySQL وردپرس شما اطلاعات دریافت می کنند و همان را به کد HTML که در مرورگرهای وب نمایش داده می شود ترجمه می کنند. به عبارت دیگر ، فایلهای قالب بلوک ساخت تم های وردپرس هستند. برای درک بهتر از الگوهای ، اجازه دهید تا به مفهومی بنامیم که به آن می پردازیم سلسله مراتب الگو.

ما از یک قیاس استفاده خواهیم کرد. اگر بازدید کننده روی پیوند دسته (مثلاً پیوند به یک دسته) کلیک کند ، مانند http://www.yoursite.com/blog/categ/your-categ/ ، وردپرس از سلسله مراتب الگو برای تولید پرونده (و محتوا) مناسب استفاده می کند. در زیر توضیح داده شده است:

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

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

home.php یا index.phpاستفاده می شود برای ارائه فهرست پست های وبلاگ
صفحه اول.phpاستفاده می شود برای ارائه صفحات استاتیک یا آخرین ارسال ها به عنوان در صفحه نمایش صفحه اول تنظیم شده است
single.phpاستفاده می شود برای ارائه یک صفحه پست
نوع {post-type} .phpاستفاده می شود برای ارائه انواع پست سفارشی به عنوان مثال اگر نوع محصول یک محصول باشد ، وردپرس از single-product.php استفاده می کند
صفحه.phpبرای ارائه صفحات استاتیک استفاده می شود
category.php یا archive.phpبرای ارائه فهرست بایگانی رده استفاده می شود
نویسنده.phpبرای ارائه نویسنده استفاده می شود
date.phpبرای ارائه تاریخ استفاده می شود
جستجو .phpبرای ارائه نتایج جستجو استفاده می شود
404.phpاستفاده می شود برای ارائه صفحه خطای 404 سرور

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

برچسب های الگو

با دیدن اینکه ما فقط Temple Files را معرفی کردیم ، صرفاً منصفانه است که یک مورد یا دو مورد را در مورد برچسب های قالب ، و نقشی که در مضامین وردپرس ایفا می کنند ، ذکر کنیم. طبق گفته WordPress.org ، “… از برچسب های قالب در قالب وبلاگ شما استفاده می شود تا اطلاعات را بصورت دینامیکی نمایش داده یا در غیر این صورت سفارشی کردن وبلاگ شما ، ابزاری را فراهم کند تا آن را به عنوان فردی و جالب جلوه دهد.”

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

اعلامیه DOCTYPE به کد HTML شما معنی می دهد. با استفاده از این روش ، بگذارید برچسب HTML را تغییر دهیم. ما با استفاده از ویژگی صفت lang را درج خواهیم کرد برچسب language_attributes مثل این:

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

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

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

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

<?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?>

اولین برچسب wp_title عنوان صفحه یا پست شما را اضافه می کند و برچسب دوم bloginfo (“نام”) نام وبلاگ شما را اضافه می کند. اکنون که موضوع وردپرس شما دارای عناوین صفحه است ، چگونه می توانیم برای موضوع خود اسکرین شات ایجاد کنیم ، موضوع را مجدداً بسته بندی کنیم و استراحت کنیم?

ایجاد تصویری برای موضوع شما

وقتی بار اول موضوع تست خود را بارگذاری کردید ، باید توجه داشته باشید که فاقد تصویر در صفحه تم وردپرس است. به نظر می رسید خسته کننده است ، به خصوص اگر تم های دیگری با تصاویر رنگارنگ داشته باشید. اما نگران نباشید ، ایجاد یک تصویر صفحه برای موضوع شما بسیار آسان است. فقط با استفاده از ویرایشگر تصویر مورد علاقه خود (به عنوان مثال Adobe Photoshop) تصویری بسازید یا از صفحه مورد نظر خود استفاده کنید. اطمینان حاصل کنید که تصویر شما 600px عرض و 450px ارتفاع داشته باشد. تصویر را به عنوان ذخیره کنید تصویر تصویر.png در پوشه تم خود همه تغییرات را ذخیره کنید ، پوشه تم خود را در یک بایگانی ZIP فشرده کنید. برای دیدن تغییرات جدید ، موضوع را بارگذاری کرده و آن را فعال کنید

نتیجه

می خواهم باور کنم که این آموزش دوم بینش عمیق تری در ایجاد یک موضوع وردپرس از HTML استاتیک به شما ارائه داده است. در آینده نزدیک شما را با سایر جنبه های مضامین وردپرس آشنا می کنم ، اما در ضمن منابع زیر را نیز فقط برای شما آماده کرده ام:

ایجاد مبارک!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map