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

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

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

بررسی Header – از بین بردن فایل های اضافی قالب

یک قالب وردپرس کامل و تمیز از Header آن شروع به کار میکند . افزونه ای زیادی مانند Head CleanUp هستند که به شما کمک میکنند برخی از خروجی های غیر ضروری در قالب کمتر باشد .

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

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

function wpdocs_dequeue_script() {
 wp_dequeue_script( 'jquery-ui-core' );
}
add_action( 'wp_print_scripts', 'wpdocs_dequeue_script', 100 );

در این حالت شما افزونه jquery-ui-core را غیر فعال میکنید . کافیست در مقابل تابع wp_dequeue_Script نام کتابخانه مورد نظر خود را بنویسید . حتی خیلی وقت ها شما در حالیکه نیاز به jquery در قالب خود ندارید افزونه ها به صورت اتوماتیک این کتابخانه را لود میکنند که شما میتوانید آنها را از بین ببرید

بررسی Header کامل و تمیز – لود کردن فایل ها در محل مورد نیاز

یکی از مهم کار ها این است که افزونه در جایی که نیاز است استفاده شود . برای درک این موضوع شما افزونه محبوب Contact Form 7 را برای وردپرس در نظر بگیرید. این افزونه برای لود کردن فروم مورد نظر خود ۲ فایل CSS و یک فایل JS لود می کند که شما اگر آنها را Dequeue کنید دیگر فرمی برای شما نمایش داده نمی شود و این افزونه برای شما از کار می افتد .

فرض کنید شما در صفحه اصلی وردپرس خود فرمی ندارید و فقط این فرم در برخی از صفحه شما ( مثلا تماس با ما ) ایجاد شده است . پس شما باید فقط این فایل ها را در آن صفحه لود کنید . حال این کار چه جوری است ؟

هر افزونه یک فایلی دارد که شبیه کد بالا که برای Dequeue بود یک سری فایل را Enqueue می کند . یعنی یک سری فایل الحاقی به قالب وردپرس شما اضافه می کند تا بتواند کار خود را انجام دهد . در همین افزونه Contact form 7 یک فایل به نام functions.php وجود دارد و در خط ۱۱۰ آن ما کد زیر را داریم:

function wpcf7_load_js() {
  return apply_filters( 'wpcf7_load_js', WPCF7_LOAD_JS );
}
function wpcf7_load_css() {
  return apply_filters( 'wpcf7_load_css', WPCF7_LOAD_CSS );
}

این دو تابع برای شما فایل های مورد نیاز افزونه را تولید می کند در تمامی صفحات . اما شما با استفاده از is_page() می توانید آن ها را فیلتر کنید که فقط در برگه ها نشان داده شود .

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

function wpcf7_load_js() {
if( is_page() ) {
  return apply_filters( 'wpcf7_load_js', WPCF7_LOAD_JS );
}
 }
function wpcf7_load_css() {
if( is_page() ) {
  return apply_filters( 'wpcf7_load_css', WPCF7_LOAD_CSS );
}
}

همانطور که می دانید یکی از مهم ترین عوامل در سرعت لود یک سایت داشتن فایل های جی کوئری سبک به تعداد کم است که به تعداد بالا هم استفاده نشده باشند. با این کار شما تا حد زیادی می توانید در جا های درست و به جا از JS و CSS خود استفاده کنید.

از بین بردن برخی اضافات وردپرس

همانطور که میدانید wp_head در داخل فایل اطلاعات زیادی در قالب شما به صورت meta قرار میدهد . مثلا یکی از آنها نسخه وردپرس اجرایی است که مشکلاتی به وجود می تواند بیاورد در افزونه head clean up شما می توانید آنرا حذف کنید و بحث دیگر کد های wp_emoji هستند که آنها را وردپرس به صورت پیشفرض لود می کند که در افزونه cleanup نیز آنها را می توانید پاک کنید .

برای از بین بردن این کد ها می توانید به صورت دستی نیز این کد را در فایل functions.php خود قرار دهید . این کار به صورت اتوماتیک این افزونه و این کد های اضافی را برای شما پاک می کند .

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );