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

در دو آموزش قبل طراحی قالب وردپرس با فایلهای اصلی و کاربرد آنها در قالب وردپرس آشنا شدید. از این جلسه به بعد شروع به طراحی و پیاده سازی یک قالب فارسی می‌کنیم که می‌توانید همزمان با آموزش ها شما هم قالب را پیاده سازی کنید.

قالبی که برای این بحث آموزشی انتخاب کرده ایم، قالب HTML رایگان به نام “سبک وبلاگ” می باشد که از سایت تم شاپ دانلود و در این مبحث آموزش داده می‌شود.

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

دانلود قالب HTML- سبک وبلاگ

بعد از دانلود قالب فایلهای آن را باز کنید و گام به گام قالب را به قالب وردپرس تبدیل نمایید.

نکته: در این آموزش از کد ادیتور VsCode استفاده می‌شود که یکی از بهینه‌ترین محیطهای کدنویسی می‌باشد.

دانلود Vs code

گام اول: ایجاد فایلهای اصلی قالب

بعد از نصب وردپرس در یک مسیر مشخص دایرکتوری آن را در ادیتور vscode باز کنید.

نکته: استفاده از ادیتور دیگر خللی در کار ایجاد نمی‌کند شما با هر ادیتوری که آشنا و مسلط هستید می توانید کار کنید.

همانطور که در آموزش اول طراحی قالب وردپرس دیدید تعدادی فایل ثابت در قالب‌های وردپرسی وجود دارد که ما هم آن را در این قالب ایجاد می‌کنیم.

فایلهایی که در این تصویر می بینید معمولا فایلهای معمولی هستند که در یک قالب ساده وردپرس شما می‌توانید آنها را ببینید.

علاوه بر این فایلها، معمولا دایرکتوریهای را که برای نگهداری فایلهای جانبی مثل css, fonts, js, img را شما در پوشه assets  می‌توانید ببینید.

توضیح هر کدام این فایلها در دو آموزش قبلی طراحی قالب وردپرس قابل مشاهده می‌باشند.

• آشنایی با طراحی قالب وردپرس- درس اول

• آشنایی با طراحی قالب وردپرس- درس دوم

حالا به سراغ فایلهای html می رویم و شروع به بارگذاری آنها در بین فایلهای قالب وردپرس می‌کنیم.

2- فایل header.php: فایلهای index.html را در یک ادیتور دیگر مثل notepad++  باز کنید و از ابتدای فایل تا تگ شروع body کپی بگیرید و به ادیتور vscode برگردید. فایل header.php را باز کنید و کدها را در این فایل paste کنید.

3-فایل footer.php: در ادامه فایل index.html به انتهای فایل بروید تا به تگ div با کلاس footer برسید. از کلاس فوتر تا انتهای فایل را کپی نمایید و در فایل footer.php قالب paste کنید.

4-فایل index.php:این فایل را باز کنید و دو تابع زیر را به ترتیب در قالب فراخوانی کنید.

<?php  get_header(); ?>
<?php get_footer(); ?>

5- برای اینکه قالب خود را به سیستم وردپرس معرفی کنید فایل style.css را باز کنید و مشابه با کدهای زیر را در آن وارد نمایید.( شما می توانید اطلاعات خود را در آن ثبت کنید.)

/*
Theme Name: Style Blog
Theme URI: http://wphashtag.com/style-blog
Author: wp Hashtag
Author URI: https://wphashtag.com
Description:این قالی رایگان و آموزشی برای وردپرس می باشد.
Requires at least: WordPress 4.9.6
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: styleblog
*/

6-فایل index.html قالب را باز کنید و یک اسکرین شات از صفحه بگیرید و آن را با نام screenshot.png ذخیره کنید و به دایرکتوری قالب منتقل کنید. با اینکار تصویر قالب شما هم در کنار قالبهای وردپرس قرار می‌گیرد.

7-به نمایش» پوسته ها بروید، می‌بنید که پوسته شما هم در کنار پوسته‌های دیگر قرار گرفته است شما می‌توانید قالب خودتان را فعال کنید.

8-بعد از فعال کردن قالب، در صورتی که سایت را بررسی کنید خواهید دید بخشی از محتوای هدر و فوتر در صفحه شما قابل مشاهده می‌باشد اما ظاهر مناسبی ندارند به دلیل اینکه فایلهای css, js به درستی بارگذاری نشده است.

دینامیک کردن بارگذاری فایلهای css, js

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

به فایل functions.php بروید و مشابه کدهای زیر را در آن وارد نمایید.

<?php
define('SBLOG_URL',get_template_directory_uri());
define('SBLOG_PATH',get_template_directory().DIRECTORY_SEPARATOR); 
define('SBLOG_ASSET_URL',SBLOG_URL.DIRECTORY_SEPARATOR.'assets'.DIRECTORY_SEPARATOR); 

فایل را ذخیره کنید و به فایل header.php وارد شوید. و برای لینک‌ها و اسکریپت‌ها به شکل زیر ثابت SBLOG_ASSER_URL را فراخوانی کنید.

<?= SBLOG_ASSET_URL ?>

بعد از انجام این مرحله صفحه سایتتان را رفرش کنید خواهید دید که استایل‌ها و js های سایتتان به درستی بارگذاری شده و می‌توانید بخشی از محتوا را در صفحه ببینید.

مطالبی که در این آموزش گفته شده و برای شما ممکن است مبهم باشد:

• نصب وردپرس بر روی لوکال
• تابع Define در php
• تابع get_template_directory_uri()
• تابع get_template_directory()
• ثابت DIRECTORY_SEPARATOR

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