ساختار قالب وردپرس شی گرا – مقدمه:

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

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

آماده سازی ساختار قالب وردپرس شی گرا

این مطلب در تاریخ ۲۰ تیرماه ۱۳۹۷ مجددا بازنگری و آپدیت شده و کدهای آن به روزرسانی شده و نکات جدید به آن اضافه شده است. 

قسمت اول: ساخت یک Auto loader برای قالب وردپرس

همانگونه که می دانید، ساختار قالب وردپرس به صورت ماجولار بوده و شما با قرار دادن فایل های مختلف ساختار قالب در کنار همدیگر، مانند قطعات پازل، می توانید صفحات سایت خود را نمایش بدهید. برای اینکه بتوانید از فایل های مختلف در قالب وردپرس استفاده کنید، باید آن ها را include نمایید. این امر به خصوص در فایل functions.php اتفاق می افتد. در پروژه های بزرگ تر، این اضافه کردن بسیار زیاد خواهد شد، لذا برای کاهش تکرار این include ها، می توانیم از ساختاری به شکل زیر و از یک کلاس autoloader استفاده نمایییم:

در صورتی که با فایل functions.php و کارکرد آن آشنا نیستید، از این لینک استفاده کنید

  • ساخت یک دایرکتوری با نام app در داخل دایرکتوری قالب به مانند ساختار زیر، قرار دادن یک دایرکتوری برای کلاس های مورد استفاده در قالب با نام classes در داخل آن، ساخت یک کلاس با نام autoloader.php در داخل دایرکتوری app

app (dir)
      - classes (dir)
      - autoloader.php (php class file)

  • بخش بندی کردی فایل functions.php برای مرتب بودن کدهای نوشته شده: اصولا من از این ساختار روبرو استفاده می کنیم و بخش های setup و includes و hooks و shortcodes و small functions را در فایل functionsphp ایجاد می کنم تا داخل این فایل ساختار منظم تری داشته باشد (البته در ساختار قالب وردپرس شی گرا ممکن است خیلی از این بخش استفاده نگردند).

/***** Includes *****/
include "app/autoloader.php";
include "constant.php";

  • معرفی کلاس autoloader.php در فایل fucntions.php و در بخش includes

  • ساخت یک فایل با نام constant.php و تعریف آن در فایل functions.php : کلیه ثابت های قالب در این فایل مطابق زیر تعریف خواهند شد

  • تعریف ثابت های MSN_THEME_PATH و MSN_THEME_URL و MSN_THEME_VIEW در فایل constant.php (همه اسم ها با یک prefix آغاز می گردد تا از تداخل بین نام ها جلوگیری گردد)

<?php
/***** Define constants in theme *****/
define('MSN_THEME_PATH', get_theme_file_path());
define('MSN_THEME_URL', get_theme_file_uri());
define('MSN_THEME_VIEW',MSN_THEME_PATH.DIRECTORY_SEPARATOR.'views');

  • شما می توانید از برای آشنایی با کارکرد تابع های  get_theme_file_uri و  get_theme_file_path از این لینک استفاده کنید.

  • ساخت کلاس autoloader مطابق کد های پایین

آشنایی با تابع spl_autoload_register در کلاس autoloader

در متد سازنده کلاس autoloader، از یکی از توابع کتابخانه استاندارد PHP با نام spl_autoload_register استفاده می شود. در واقع کلیه تابع هایی که در مسیر اجرا قرار داده نشده اند (یا include نشده اند) به این متد پاس داده شده و متد autoload موجود در این کلاس بر روی آن ها فراخوانی می شود تا به برنامه اضافه شوند. در واقع این باعث کاهش حجم کدنویسی و include های پی در پی توسط برنامه نویس خواهد شد.

این تکنیک یکی از بهترین تکنیک ها برای کاهش مصرف حافظه می باشد. در واقع با این روش فقط کدهایی به صفحه attach می شوند که واقعا به آن ها نیاز داشته باشیم.

<?php
/***** Autoloder class *****/
class Autoloader
{
    public function __construct()
    {
        spl_autoload_register(array($this, 'autoload'));
    }
    public function autoload($class_name)
    {
        $file = $this->convert_class_to_file($class_name);
        if (is_file($file) && file_exists($file) && is_readable($file)) {
            //var_dump($file);
            include $file;
        }
    }
    public function convert_class_to_file($class_name)
    {
        $class = strtolower($class_name);
        $class = 'class-'.$class;
        $filename = $class.'.php';
        return MSN_THEME_PATH.DIRECTORY_SEPARATOR.'app'.DIRECTORY_SEPARATOR.'classes'.DIRECTORY_SEPARATOR.$filename;
    }
}
new Autoloader();

چند نکته در مورد کلاس Autoloader

  • پس از تعریف کلاس، بلافاصله یک شی از این کلاس ساخته می شود که همواره برای برنامه قابل دسترس باشد

  • برای استفاده از این روش باید یک قاعده برای نامگذاری  کلاس های خود انتخاب نماییم که بسته به آن بتوانیم با هربار احرای تابع autoload فایل مورد نظر را به برنامه خود اضافه کرده و کلاس مورد نظر خود را لود نماییم.

  • کلیه دسته بندی هایی که در مدل MVC مورد استفاده قرار می گیرند را هم می توانیم در ساختار قالب وردپرس شی گرا، برای خود پیاده سازی نماییم. این بسته به نیاز شما و سبک دلخواه برنامه نویسی توسط شما خواهد بود.

  • در متد autoload، قبل از include کردن فایل، حتما باید از صحت فایل بودن آن و خوانایی فایل مطمئن شویم. در واقع هرجا که قصد داریم تا روی یک فایل کار کنیم، حتما باید از سه تابع شرطی: is_file و file_exists و is_readable استفاده کرده و پس از مطمئن شده از صحت فایل و خوانایی آن توسط برنامه، ادامه علمیات در برنامه را انجام دهیم.

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

  • تعریف کلاس Asset در داخل دایرکتوری classes: در نظر داشته باشید که نام کلاس ها تعریف شده دارای قاعده ای هستند که در کلاس autoloader تعریف شده است تا این کلاس بتواند با بسته به نام آن ها، فایل مربوط به آن ها را در برنامه include نماید. نام این کلاس را class-asset.php می گذاریم.

  • در داخل فایل class-asset.php کدهای زیر را برای کلاس asset تعریف می کنیم. برای متد فراخوانی css و js و عکس ها در این کلاس، از متد استاتیک استفاده می شود، تا بسیار در مصرف حافظه صرفه جویی گردد.

<?php
/***** Asset class *****/
class Asset
{
    public static function css($file_name)
    {
        $file_url = MSN_THEME_URL.'/assets/css/'.$file_name;
        echo $file_url;
    }
    public static function js($file_name)
    {
        $file_url = MSN_THEME_URL.'/assets/js/'.$file_name;
        echo $file_url;
    }
    public static function image($file_name)
    {
        $file_url = MSN_THEME_URL.'/assets/images/'.$file_name;
        echo $file_url;
    }
    /*OOP-001-01 : For future implementation
     public static function __callStatic($method_name, $args)
    {  }*/
}

  • با ساخت کلاس autoloader دیگر نیازی به include کردن کلاس Asset نیست

  • استفاده از متد های استاتیک css و js و image برای درست کردن آدرس دهی های نسبی در قالب وردپرس (بخش های مشخص شده با OOP-001 – ضمنا بخش های script کامنت شده اند)

<!--OOP-001-->
<link rel="stylesheet" href="<?php echo Asset::css('normalize.css')?>">
<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')?>">
<!--002-->
<link rel="stylesheet" href="<?php echo get_stylesheet_uri();?>">
<!--OOP-001-->
<!--<script src="<?php echo Asset::js('vendor/modernizr-2.8.3.min.js') ?>"></script>-->
<!-- <script src="<?php /*echo get_theme_file_uri().'/js/vendor/modernizr-2.8.3.min.js'*/?>"></script>-->
<!--<script src="<?php echo Asset::js('vendor/wow.min.js') ?>"></script>-->

استفاده از متد callStatic__ در داخل کلاس Asset

روش دیگر پیاده سازی در کلاس Asset استفاده از متد جادویی callStatic__ می باشد. در واقع با استفاده از این متد، می توانیم هیچکدام از function های بالا را، در داخل کلاس تعریف نکرده و همه آن ها را در داخل این متد جادویی مدیریت نماییم.

نکته مهم:

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

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

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

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

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