ساختار قالب وردپرس شی گرا – مقدمه:
در دومین بخش از چک لیست طراحی قالب وردپرس ، با یک سناریو واقعی در وردپرس ، می خواهیم با ساختارهایی آشنا شویم که در پروژه های حرفه ای و پیچیده قالب وردپرس می توانیم از آن ها استفاده کنیم.
در واقع در بسیاری از قالب های پیشرفته روز دنیا در مارکت های بین المللی، از این روش ها برای ساخت یک ساختار قالب وردپرس شی گرا ، استفاده می کنند. این بدین معنی است که در طراحی ساختار قالب و در بسیاری از موارد (چون توابع پرکاربرد که بسیار فراخوانی می شوند) از ساختار قالب وردپرس شی گرا یا همان استفاده از کلاس ها و اشیا، استفاده می گردد. استفاده از قالب وردپرس شی گرا باعث می شود تا قالب وردپرس شما ساختار یافته تر و مرتب تر بوده و تغییرات آینده در آن بسیار راحت تر انجام پذیرد.
این مطلب در تاریخ ۲۰ تیرماه ۱۳۹۷ مجددا بازنگری و آپدیت شده و کدهای آن به روزرسانی شده و نکات جدید به آن اضافه شده است.
قسمت اول: ساخت یک Auto loader برای قالب وردپرس
همانگونه که می دانید، ساختار قالب وردپرس به صورت ماجولار بوده و شما با قرار دادن فایل های مختلف ساختار قالب در کنار همدیگر، مانند قطعات پازل، می توانید صفحات سایت خود را نمایش بدهید. برای اینکه بتوانید از فایل های مختلف در قالب وردپرس استفاده کنید، باید آن ها را include نمایید. این امر به خصوص در فایل functions.php اتفاق می افتد. در پروژه های بزرگ تر، این اضافه کردن بسیار زیاد خواهد شد، لذا برای کاهش تکرار این include ها، می توانیم از ساختاری به شکل زیر و از یک کلاس autoloader استفاده نمایییم:
ساخت یک دایرکتوری با نام 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 های بالا را، در داخل کلاس تعریف نکرده و همه آن ها را در داخل این متد جادویی مدیریت نماییم.
نکته مهم:
مطالب فوق از فیلم های آموزشی طراحی قالب وردپرس گروه آموزشی سون لرن، برداشت شده و با تغییراتی در آن، به عنوان چک لیست در اینجا قرار داده شده است.
هدف ما، مرتب سازی این مطالب و داشتن چک لیست برای انجام تکراری کارهایی است که به طور روزمره، برای پروژه های طراحی قالب وردپرس انجام می دهیم. برای دسترسی به فیلم این آموزش ها به صورت کامل، می توانید به سایت سون لرن مراجعه فرمایید.
راهنما برای چک لیست طراحی قالب وردپرس:
شما می توانید از لینک های زیر به عنوان مرجع های اصلی برای چک لیست طراحی قالب وردپرس در قسمت بالا استفاده نمایید:
سلام و وقت بخیر
من کلاس 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 استفاده کنید.
کلیه کدها دوباره بازبینی شدند، لطف کنید از این کدهای جدید استفاده کنید. در حال حاضر به درستی این کدها کار می کنند.
در صورتی که باز به مشکل برخوردید، متن ارور رو در اینجا بفرستید تا بتوانم دقیق تر اون رو بررسی کنم اما به احتمال زیاد، مشکلی داشتید، بر طرف شده.
بابت اطلاع از این اشتباه، از شما بسیار ممنون و سپاسگزارم.