چک لیست طراحی قالب وردپرس – مقدمه:
در اولین بخش از چک لیست طراحی قالب وردپرس ، با یک سناریو واقعی در وردپرس کار را شروع خواهیم کرد و مراحل مختلف تبدیل یک قالب استاتیک را به یک قالب داینامیک در وردپرس بررسی خواهیم کرد. این مجموعه به صورت یک سری کامل می تواند مورد استفاده تمام کسانی قرار گیرد که به نوعی با پروژه های طراحی قالب وردپرس سر وکار دارند.
فرض کنید یک قالب استاتیک در اختیار شما قرار داده شده تا آن را تبدیل به یک قالب وردپرس نمایید. در این بخش یک چک لیست طراحی قالب وردپرس در چندین بخش آماده شده است که شما برای سرعت کار خود می توانید از آن استفاده کنید.
این مطلب در تاریخ 20 تیرماه 1397 مجددا بازنگری و آپدیت شده و کدهای آن به روزرسانی شده و نکات جدید به آن اضافه شده است.
قسمت اول: آماده سازی دایرکتوری قالب
در ابتدا باید دایرکتوری قالب خود را مطابق آنچه در فصل های پیشین شرح داده شد، درست کرده و مرتب نمایید. می توانید از لینک های پایین صفحه جهت راهنمایی بیشتر نیز استفاده نمایید:
ساخت دایرکتوری قالب در مسیر wp-content/themes
اضافه کردن فایل های مورد نیاز برای قالب وردپرس (طبق لینک داده شده در زیر) که بسته به نیاز قالب خود باید آن ها را اضافه نمایید، آن ها عبارتند از:
index.php
style.css
rtl.css
comments.php
front-page.php
home.php
header.php
singular.php
single.php
single-{post-type}.php
archive-{post-type}.php
page.php
page-{slug}.php
category.php
tag.php
taxonomy.php
author.php
date.php
archive.php
search.php
attachment.php
image.php
404.phpالبته بسته به پروژه ای که انجام می دهید ممکن است به بعضی از آن ها نیازی نداشته باشید و یا به تعداد آن ها اضافه نمایید. مثلا در انجام پروژه های فارسی و یا زبان هایی که از راست به چپ نوشته می شوند، مسلما به فایل rtl.css نیز نیاز خواهید داشت
تعریف هدر فایل style.css و فعال کردن قالب جدید وردپرس در پنل ادمین که می خواهید آن را بسازید (برای آن می توانید از بخش زیر و همین طور لینک های پایین صفحه، استفاده نمایید)
قرار دادن کلیه کلیه کد های صفحه های اصلی تا انتهای تگ head و شروع تگ body
/* Theme Name: Your theme name Theme URI: https://yoursite.com Author: the author specifications Author URI: https://authorsite.com Description: Your theme descriptons Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: yourTextDomainName Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready 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. */
آماده سازی هدر قالب وردپرس
در این بخش می باید تا فایل هدر قالب وردپرس، که در تمامی صفحات بارگذاری می شود را آماده نماییم:
قرار دادن کلیه کلیه کد های صفحه های اصلی تا انتهای تگ head و شروع تگ body
فراخوانی فایل header.php در فایل index.php با دستور ()get_header
قرار دادن کلیه فایل های استایل قالب استاتیک در فایل style.css و استفاده از تابع get_stylesheet_uri برای استفاده از آن در فایل header.php (بخش 001 و 002 موجود در کدها)
تبدیل کردن کلیه آدرس های نسبی موجود در هدر با مدل آدرس دهی در قالب وردپرس با استفاده از تابع get_theme_file_uri ، در صورتی که favicon در مسیری به غیر از روت اصلی باشد، می توانید با استفاده از get_template_directory آن را مسیردهی نمایید. هرجا که از توابعی که با get شروع می شوند، استفاده می کنید، برای نمایش آن ها، حتما باید از echo استفاده نمایید.
پس از تصحیح مسیردهی ها در فایل header.php حتما با refresh کردن صفحه سایت و گرفتن ctrl + U بر روی آن، در سورس صفحه چک کنید که آیا استایل ها و فایل های جاوا اسکرییپت شما به درستی شناخته شده اند یا خیر. برای این کار روی مسیرها کلیک کنید و در صورتی که فایل به همراه محتویاتش به درستی در مرورگر شما باز شد، آدرس دهی به درستی انجام شده است.
<link rel="favicon" href="favicon.ico">
<!-- Place favicon.ico in the root directory -->
<!--003-->
<!--OOP-001-->
<link rel="stylesheet" href="<?php echo Asset::css('normalize.css')?>">
<!--002-->
<link rel="stylesheet" href="<?php echo get_theme_file_uri().'/css/font-awesome.min.css'?>">
<!--OOP-001-->
<link rel="stylesheet" href="<?php echo Asset::css('animate.min.css')?>">
<!--<link rel="stylesheet" href="<?php /*echo get_theme_file_uri().'/css/animate.min.css'*/?>">-->
<!--002-->
<link rel="stylesheet" href="<?php echo get_stylesheet_uri();?>">
<!-- <script src="<?php /*echo get_theme_file_uri().'/js/vendor/modernizr-2.8.3.min.js'*/?>"></script>-->
قرار دادن title سایت در تگ head : برای این کار از دو روش می توانید استفاده کنید. روش اول به صورت دستی بوده و ابتدا باید feature ای با نام title-tag را در قالب خود فعال نمایید. برای فعال سازی این قابلیت می باید درون فایل functions.php قالب خود، این feature را به توسط تابع add_theme_support اضافه نمایید. برای بهتر انجام دادن این کار، می توانیم تابعی را به نام msn_theme_setup تعریف کرده و آن را به action ای با نام after_setup_theme هوک نماییم. سپس در داخل این تابع، از add_theme_support برای اضافه کردن title_tag استفاده کنیم. دقت کنید که کلیه مواردی که باید پس از اکشن after_setup_theme تعریف نماییم، را می توانیم در درون تابع msn_theme_setup تعریف کنیم:
function msn_theme_setup(){
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'msn_theme_setup' );
پس از آن می توانیم با کدی که در زیر آمده است (بخش 004 ) از توابع bloginfo و wp_title برای فراخوانی عنون، استفاده نماییم:
<title><?php bloginfo('name'); ?> | <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
روش دوم، استفاده از تابع wp_head دقیقا پیش از بسته شدن تگ head یعنی دقیقا قبل ازمی باشد. با انجام این کار دیگر نیازی به روش اول نمی باشد.
در صورتی که می خواهید یک کامنت در کدهای خود داشته باشید که در مرورگرهای قدیمی به نمایش دربیاید (تا از کاربر درخواست کند تا مرورگر خود را برای دسترسی به امکانات کامل بروز رسانی نماید)، کافی است آن را دقیقا بعد از تگ body و مطابق زیر (بخش 005) قرار دهید:
<!--004-->
<?php wp_head(); ?>
</head>
<body>
<!--005-->
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
در صورتی که در حال طراحی قالب وردپرس برای فروش در مارکت های بین المللی هستید، می باید زبان سایت خود را در تگ html باز قالب وردپرس خود تعریف نمایید. همچنین اهمیت دارد تا نوع encoding خود را نیز در تگ head بیان کنید. برای این کار می توانید مانند زیر (بخش 006) عمل نمایید:
<!--006-->
<html class="no-js" lang="<?php language_attributes()?>">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
نکته مهم:
مطالب فوق از فیلم های آموزشی طراحی قالب وردپرس گروه آموزشی سون لرن، برداشت شده و با تغییراتی در آن، به عنوان چک لیست در اینجا قرار داده شده است.
هدف ما، مرتب سازی این مطالب و داشتن چک لیست برای انجام تکراری کارهایی است که به طور روزمره، برای پروژه های طراحی قالب وردپرس انجام می دهیم. برای دسترسی به فیلم این آموزش ها به صورت کامل، می توانید به سایت سون لرن مراجعه فرمایید.
راهنما برای چک لیست طراحی قالب وردپرس:
شما می توانید از لینک های زیر به عنوان مرجع های اصلی برای چک لیست طراحی قالب وردپرس در قسمت بالا استفاده نمایید:
واقعا خوب بود ،، البته دوباره باید بررسیش کنم
سایت جالبی دارید لینکتونو برای چندتا از دوستام فرستادم بدردشون میخوره ،، ممنون