ساختار قالب وردپرس شی گرا – مقدمه:
در دومین بخش از چک لیست طراحی قالب وردپرس ، با یک سناریو واقعی در وردپرس ، می خواهیم با ساختارهایی آشنا شویم که در پروژه های حرفه ای و پیچیده قالب وردپرس می توانیم از آن ها استفاده کنیم.
در واقع در بسیاری از قالب های پیشرفته روز دنیا در مارکت های بین المللی، از این روش ها برای ساخت یک ساختار قالب وردپرس شی گرا ، استفاده می کنند. این بدین معنی است که در طراحی ساختار قالب و در بسیاری از موارد (چون توابع پرکاربرد که بسیار فراخوانی می شوند) از ساختار قالب وردپرس شی گرا یا همان استفاده از کلاس ها و اشیا، استفاده می گردد. استفاده از قالب وردپرس شی گرا باعث می شود تا قالب وردپرس شما ساختار یافته تر و مرتب تر بوده و تغییرات آینده در آن بسیار راحت تر انجام پذیرد.
این مطلب در تاریخ ۲۰ تیرماه ۱۳۹۷ مجددا بازنگری و آپدیت شده و کدهای آن به روزرسانی شده و نکات جدید به آن اضافه شده است.
قسمت اول: ساخت یک Auto loader برای قالب وردپرس
همانگونه که می دانید، ساختار قالب وردپرس به صورت ماجولار بوده و شما با قرار دادن فایل های مختلف ساختار قالب در کنار همدیگر، مانند قطعات پازل، می توانید صفحات سایت خود را نمایش بدهید. برای اینکه بتوانید از فایل های مختلف در قالب وردپرس استفاده کنید، باید آن ها را include نمایید. این امر به خصوص در فایل functions.php اتفاق می افتد. در پروژه های بزرگ تر، این اضافه کردن بسیار زیاد خواهد شد، لذا برای کاهش تکرار این include ها، می توانیم از ساختاری به شکل زیر و از یک کلاس autoloader استفاده نمایییم:
app (dir) - classes (dir) - autoloader.php (php class file)
/***** Includes *****/ include "app/autoloader.php"; include "constant.php";
<?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');
آشنایی با تابع 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
حال برای آدرس دهی های خود در قالب وردپرس نیز می توانیم از یک ساختار شی گرا استفاده نماییم. برای این کار می توانید مراحل زیر را دنبال کنید:
<?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) { }*/ }
<!--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 های بالا را، در داخل کلاس تعریف نکرده و همه آن ها را در داخل این متد جادویی مدیریت نماییم.
نکته مهم:
مطالب فوق از فیلم های آموزشی طراحی قالب وردپرس گروه آموزشی سون لرن، برداشت شده و با تغییراتی در آن، به عنوان چک لیست در اینجا قرار داده شده است.
هدف ما، مرتب سازی این مطالب و داشتن چک لیست برای انجام تکراری کارهایی است که به طور روزمره، برای پروژه های طراحی قالب وردپرس انجام می دهیم. برای دسترسی به فیلم این آموزش ها به صورت کامل، می توانید به سایت سون لرن مراجعه فرمایید.
راهنما برای چک لیست طراحی قالب وردپرس:
شما می توانید از لینک های زیر به عنوان مرجع های اصلی برای چک لیست طراحی قالب وردپرس در قسمت بالا استفاده نمایید:
سلام و وقت بخیر
من کلاس Autoloader در فایل فاکشن include کردم و با استفاده از کلاس Asset اسکریپت ها رو در فایل header لینک کردم ولی اررور میده ولی اگر کلاس Asset رو در فایل هدر include کنم اررور برطرف میشه. فکر می کنم کلاس Autoloader کار نمی کنه.
سلام به شما دوست عزیز
عموما برای اینکه کلاس هایی که استفاده می کنید، در تمام حوزه شما قابل دسترس بوده و شناخته شوند، در زبان های برنامه نویسی از مفهومی به اسم namespace استفاده می شود.
برای رفع مشکلی که اشاره کردید، ابتدا باید یک namespace کلی برای فایل های دایرکتوری قالب خود انتخاب کنید. به این وسیله مشکلی که اشاره کردید در سطح فایل هایی که در یک namespace هستند (یا هم level هستند) برطرف خواهند شد.
ضمن اینکه در دایرکتوری هایی دیگر نیز، می توانید با استفاده از use کردن namespace و کلاس خود، در فایل دیگر استفاده کنید.
برای اینکه با این مفهوم آشنا شوید و نحوه کار را بیاموزید، می توانید از یکی از آموزش های تصویری ما که در زیر لینک آن را برای شما می گذارم، استفاده کنید:
آموزش استفاده از شی گرایی در پلاگین نویسی وردپرس
در ماه آینده تم استارتر ما که در پروژه ها استفاده می کنیم، به صورت رایگان در گیت هاب قرار داده خواهد شد که کاملا به صورت شی گرا پیاده سازی شده و عملا مشکلی در پیاده سازی و استفاده از کلاس های خود نخواهید داشت.
حتما در صفحات مرتبط با آموزش طراحی قالب وردپرس، این مساله اطلاع رسانی خواهد شد. در صورتی که باز نتوانستید مشکل خود را حل کنید، می توانید تا یک ماه آینده صبر کنید و سپس با خیال راحت از این ساختار، برای توسعه قالب وردپرس خود استفاده کنید.
با تشکر فراوان
با سلام
چرا قسمت constant ارور میده
theme_path.directory_separator ‘views’ چه مشکلی داره؟؟
باید دایرکتوری خاصی براش ایجاد کنم؟؟؟
سلام و روز شما بخیر
خیلی ممنونم که به این مشکل اشاره کردید.
متاسفانه در هنگام تایپ اشتباه به وجود آمده و به جای THEME_PATH باید از MSN_THEME_PATH هم در بخش ثابت ها و هم در کلاس Autoloader استفاده کنید.
کلیه کدها دوباره بازبینی شدند، لطف کنید از این کدهای جدید استفاده کنید. در حال حاضر به درستی این کدها کار می کنند.
در صورتی که باز به مشکل برخوردید، متن ارور رو در اینجا بفرستید تا بتوانم دقیق تر اون رو بررسی کنم اما به احتمال زیاد، مشکلی داشتید، بر طرف شده.
بابت اطلاع از این اشتباه، از شما بسیار ممنون و سپاسگزارم.