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

فرهاد کره بندی

می دانید که هر قالب وردپرس از چند بخش مجزا تشکیل شده است که هر کدام دارای کاربرد های مختلفی هستند . همانطور که فایل Header.php رو بررسی کردیم به این نتیجه رسیدیم که هر بخش نه تنها باید جدا باشد .

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

1 . سریعا از سروری که ضعیف است دوری کنید

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

2 . افزونه Yoast Seo بهتر است یا All in one seo ؟

به نظر شما این بی ربط ترین سوالی است که در مورد قالب استاندارد می شنویم !؟ فکر میکنید استفاده از این افزونه ها زیاد به قالب ربطی ندارد اما در برخی از مسائل به صورت مستقیم در قالب شما دخیل هستند . بگذارید یک قطعه کد در هدر وردپرس را بررسی کنیم که طراحان قالب ها آنرا قرار می دهند .

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>">

<title><?php wp_title( '|', true, 'right' ); ?></title>

<link rel="profile" href="http://gmpg.org/xfn/11">

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<meta name="robots" content="index, follow">

<meta name="robots" content="all">

<?php wp_head(); ?>

</head>

می دانید که این افزونه ها در WP_Head اجرا می شوند . اما دو متای robots را نگاه کنید . اینها توسط خود افزونه کنترل می شوند پس بهتر است از قرار دادن این کد ها اجنتاب کنیم . اما در داخل تگ title ما کدی درست قرار دادیم . نمی خواهد چیزه خاصی به آن اضافه کنیم . فقط این کد را میگذاریم و بقیه اطلاعات تیتر ها را از طریق پنل وردپرس این افزونه ها تنظیم می کنیم

3 . تصاویر , تصاویر , تصاویر در قالب

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

 

می دانید که وردپرس با سایز های زیر در حالت استاندارد کار می کند مثلا شما یک عکس با سایز 1400 در 952 پیکسل دارید پس وردپرس زمانی که با کد the_thumbnail آنرا در قالب فراخوانی می کند مقدار های زیر را میگیرد , یعنی :

عکس با سایز 1400 در 952
سایز عرض (px) ارتفاع (px) نحوه برش مقیاس
full (اصلی) 1400 952 soft 1.47
large 1024 696 soft 1.47
medium_large 768 522 soft 1.47
medium 300 204 soft 1.47
thumbnail 150 150 hard 1

شما با تغییر این سایز ها می توانید تصاویر سایت خود را با قالب وردپرس خود هماهنگ تر کنید .

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

<?php if ( has_post_thumbnail() ) : ?>

	$id = get_post_thumbnail_id();
	$src = wp_get_attachment_image_src( $id, 'full' );
	$srcset = wp_get_attachment_image_srcset( $id, 'full' );
	$sizes = wp_get_attachment_image_sizes( $id, 'full' );
	$alt = get_post_meta( $id, '_wp_attachment_image_alt', true);

  	<img src="<?php echo esc_attr( $src );?>"
  		srcset="<?php echo esc_attr( $srcset ); ?>"
		sizes="<?php echo esc_attr( $sizes );?>"
		alt="<?php echo esc_attr( $alt );?>" />

<?php endif; ?>

 

4 . افزونه های مربوط به قالب

چندین افزونه وجود دارد که به شما کمک می کند قالب بهتری داشته باشید . افزونه هایی که لینک های شما را حاوی title می کند . به عکس شما alt می دهد . قالب شما را سبک و بهینه می کند یا افزونه ای که هدر وردپرس شما را تمیز تر می کند .

  • افزونه Image Seo آنرا نصب کنید تا تصاویر شما از نظر کد کامل باشد .
  • افزونه Smart Link برای کنترل لینک های سایت
  • افزونه WP Security
  • افزونه Super Cache

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

5 . کد های صحیح در داخل صفحات

به غیر از صفحه header که تقریبا مهم ترین بخش است چون در همه صفحات وجود دارد کد های دیگری هستند که باید در صفحات مختلف قالب وردپرس قرار بگیرند . مثلا صفحه archive.php یا search.php .

صفجه archive.php باید شامل چندین قطعه کد باشد . اگر افزونه wp yoast را دارید می توانید حتما بخش breadcrumb (خرده نان) را فعال کنید و کد آنرا در داخل صفحه خود قرار بدید.

<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb(' <p id="breadcrumbs">','</p> '); } ?>

مرحله بعد مربوط به سرتیتر هاست که داخل تگ heading قرار میگیرند . بدین شکل که شما باید در داخل صفحه در داخل h1 یا h2 کد زیر را داشته باشید

 
<?php  if (is_category()) {
  printf(__('مطالب مربوط به موضوع :  <em>%s</em>', ''), single_cat_title(NULL, false)); 
} elseif( is_tag() ) 
{
 printf(__('مطالبی که برچسب <em>%s</em> را دارند .', ''), single_tag_title(NULL, false)); 
} elseif (isset($_GET['paged']) && !empty($_GET['paged'])) 
{
  _e('آرشیو وبلاگ', 'Arjuna');}
 ?>

این کد برای گوگل و کاربرهای سایت شما یک غنیمت به حساب می آید . اول از همه یک تیتر برای تمامی صفحات شما مثل برچسب , آرشیو و دسته بندی می سازد و آنرا داخل تگی که باید قرار بگیرد قرار میدهد . دوما کاربر شما کامل راحت با سایت کار می کند و می داند صفحه ای که در آن است چیست .

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

<?php

global $query_string;

$search_query = wp_parse_str( $query_string );
$search = new WP_Query( $search_query );

?>

برچسب ها : , , , , ,

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

آموزش طراحی سایت

آموزش کامل طراحی سایت

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


براتون منتشر کنم