در این مجموعه آموزش قصد داریم تا بصورت عملی نحوه ساخت قالب وردپرس را فرا بگیریم. در این آموزش ها سعی بر این داریم تا مفاهیم و اطلاعات لازم را به ساده ترین شکل ممکن بیان کنیم. با ما همراه باشید.
شروع به کار
ابتدا باید به مسیر زیر رفته و پوشه مربوط به قالب خود را ایجاد کنید:
wp-content/themes
بهتر است نام پوشه هم‌نام با قالب باشد.
سپس ابتدایی ترین چیزی که نیاز دارید یک فایل معرف است که نام و مشخصات قالب شما را به وردپرس بفهماند. این اطلاعات باید در فایلی به نام style.css درج شود. این فایل را ایجاد کرده و اطلاعات زیر را در آن قرار دهید:
/* Theme Name:Yusef Template Theme URI: https://myempire.ir Author: یوسف شیری Author URI: https://myempire.ir این یک قالب تست است. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: blog, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, post-formats, rtl-language-support, sticky-post Text Domain: myempiredoctor This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
بسیار عالی! شما اولین قالب وردپرسی خود را ساختید! اکنون می توانید وارد بخش مدیریت وردپرس شوید و در قسمت نمایش، قالب خود را انتخاب کرده و فعال کنید.
با فعالسازی این قالب مشاهده می کنید که وب سایت شما به یک صفحه خالی سفید رنگ تبدیل می شود. نگران نباشید! علت این اتفاق این است که شما هنوز تعیین نکرده اید که قرار است در وب سایت خود چه چیزی را نمایش دهید.
حال تنها کافیست که در کنار این فایل style.css یک فایل با نام index.php ایجاد کنید. برای ادامه باید سراغ فایل index.php برویم و تعیین کنیم که قرار است وب سایت ما چگونه باشد.
بطور کلی فایل index.php وظیفه نمایش دادن فهرستی از مطالب شما را برعهده دارد. در کنار این وظیفه اصلی اگر شما قالب مربوط به نمایش یک مطلب خاص که توسط فایل single.php مشخص می‌شود را تعیین نکرده باشید، فایل index.php این وظیفه را نیز بر عهده می‌گیرد. بیاید با یک قالب خیلی ساده شروع کنیم:
<!DOCTYPE html> <html> <head> <title>site title</title> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <br/> </body> </html>
در کد بالا ساده ترین چیدمان را برای فایل index.php در نظر گرفتیم. یک صفحه ساده که تنها شامل title و یک عنوان h1 و یک پاراگراف p است و در انتها نیز به کمک br به خط بعدی رفته ایم. حال می خواهیم مقادیر موجود در این بخش ها اطلاعات واقعی سایت ما باشد. به تغییرات زیر توجه کنید:
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('name'); ?></title>
<body>
<?php if(have_posts()):?>
<?php while(have_posts()): the_post();?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<br/>
<?php else;?>
<?php endif;?>
</body>
</html>
همانطور که در مثال بالا می‌بینید تابع bloginfo با پارامتر ورودی name عنوان سایت را نمایش می دهد. در بدنه صفحه نیست به کمک تابع have_posts از وجود پست اطمینان کسب می کنیم. در صورت وجود پست(مطلب)، حلقه while اجرا می شود. در داخل این حلقه می‌توانیم نحوه نمایش پست ها را مشخص کنیم. دو تابع the_title و the_content به ترتیب عنوان و محتوای پستی که در داخل حلقه توسط دستور the_post انتخاب شده است را نمایش می دهند. با این توضیح وظیفه تابع the_post نیز مشخص شد. در هر بار بارگذاری صفحه، هر موقع تابع the_post صدا زده شود، یکی از پست ها انتخاب می‌شود. این روند تا زمانی ادامه دارد که به آخرین پست برسیم. در واقع خروجی کار به این صورت خواهد بود:
ادامه آموزش را در مطالب بعدی پیگیری خواهیم کرد.
موفق و پیروز باشید…