چک لیست طراحی قالب وردپرس – مقدمه:

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

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

چک لیست طراحی قالب وردپرس

این مطلب در تاریخ 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">

نکته مهم:

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

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

راهنما برای چک لیست طراحی قالب وردپرس:

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

بازگشت به همه سرفصل های مرجع طراحی قالب وردپرس