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

جهت طراحی قالب سایت وردپرس نیاز به تسلط به زبان برنامه نویسی php دارید، همچنین دانستن html و css جهت آماده سازی اولیه قالب یکی از ضروریات است. ما برای طراحی قالب سایت وردپرس ابتدا طی جلسه‌ای با کارفرما درباره اهداف و دستاوردهایش صحبت می‌کنیم، سپس نیازمندی‌های سایت را مشخص میکنیم. بعد از امضا، قرارداد مراحل زیر را انجام میدهیم:

1. طراحی ux روی کاغذ
2. طراحی ui در برنامه‌های خانواده adobe یا مرورگر
3. پیاده سازی سایت با html و sass و کامپایل همزمان به css
4. کد گذاری wordpress در قالب html
5. hook گذاری نهایی وردپرس جهت آپدیت‌های احتمالی آینده
6. بررسی نهایی کدهای وردپرس
7. تست نهایی در مرورگرهای مختلف
8. تست نهایی در موبایل و تبلت
9. نصب و راه اندازی در هاست و دامنه کارفرما
10. تحویل و رفع اشکال احتمالی
11. آموزش و پشتیبانی آموزش کنترل پنل به کارفرما

چگونه فونت جدید به وردپرس اضافه کنیم

یکی از سوالات پر طرفدار در طراحی سایت وردپرس افزودن فونت جدید در ویرایشگر دیداری tinymce است، این‌کار کمی پیچیده است ولی من آنرا در 5 مرحله به شما آموزش میدهم:

1. فونت جدید را در هاست آپلود نمایید (یا از سروری دیگر صدا نمایید)
2. ایجاد یک stylesheet جدید با اعلان فونت
3. افزودن stylesheet جدید به ویرایشگر دیداری tinymce
4. تعیین نام فونت جدید در dropdown ویرایشگر دیداری tinymce
5. افزودن stylesheet فونت جدید به front و end وردپرس

1. آپلود فونتوردپرس:

توسط ftp یا cpanel یه هاست دسترسی پیدا کرده و فونت مورد نظر را در پوشه ای از قالب خود کپی نمایید، همانطور که شاید اطلاع داشته باشید فونت شما که از این پس وب فونت می‌نامیم دارای 6 فرمت woff, woff2, ttf, otf, eot, svg است. جهت اطلاع از موارد استفاده از هر یک از این فرمت‌ها در مرورگرهای مختلف به web font سایت w3schools مراجعه نمایید. در این راستا مطالعه websafe font هم پیشنهاد میشود.

2. ایجاد stylesheet فونت جدید وردپرس:

کافیست کد زیر را در فایل custom-fonts.css ذخیره نمایید

@font-face {
    font-family: seaside;
    src: url('http://mysite.com/wp-content/custom-fonts/seaside.ttf') format('truetype');
}
@font-face {
    font-family: journal;
    src: url('http://mysite.com/wp-content/custom-fonts/journal.ttf') format('truetype');
}

 3. افزودن stylesheet به ویرایشگر tinymce وردپرس:

کد زیر را به فایل function.php اضافه نمایید

function load_custom_fonts($init) {

    $stylesheet_url = 'http://mysite.com/wp-content/custom-fonts/custom-fonts.css';

    if(empty($init['content_css'])) {
        $init['content_css'] = $stylesheet_url;
    } else {
        $init['content_css'] = $init['content_css'].','.$stylesheet_url;
    }

//Step 4

    return $init;
}
add_filter('tiny_mce_before_init', 'load_custom_fonts');

4.  تعیین نام فونت در dropdown ویرایشگر وردپرس:

کد زیر را به کدهای مرحله 3 اضافه نمایید، همان مکانی که با کامنت Step 4 مشخص شده است

$font_formats = isset($init['font_formats']) ? $init['font_formats'] : 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';  

$custom_fonts = ';'.'SeaSide=seaside;Journal=journal';

$init['font_formats'] = $font_formats . $custom_fonts;

 5. افزودن stylesheet فونت جدید به front و end وردپرس

توسط دو دستور add_action زیر stylesheet ایجاد شده در مرحله 2 را به front و end اضافه خواهیم کرد

function load_custom_fonts_frontend() {

    echo '< link type="text/css" rel="stylesheet" href="http://mysite.com/wp-content/custom-fonts/custom-fonts.css">';
}
add_action('wp_head', 'load_custom_fonts_frontend');
add_action('admin_head', 'load_custom_fonts_frontend');

 

نمایش همه دسته بندی و برچسب‌ها در طراحی سایت وردپرس

در طراحی سایت وردپرس صفحه‌ای به نام 404 هست، زمانی که نوشته‌ای وجود نداشته باشد یا آدرس داخلی به اشتباه توسط ویزیتور تایپ شده باشد به این صفحه هدایت میشود. شما در هنگام طراحی سایت وردپرس با ساخت صفحه 404 میتوانید یک Template اختصاصی یرای فانکشن 404 خود طراحی نمایید.

از دیدگاه سئو بهتر از در صفحه 404 لیستی از تمامی دسته بندی ها و برچسب‌ها موجود باشد، از این‌رو جهت نمایش لیست دسته‌بندی‌ها به روش زیر عمل می‌کنیم:

$args = array(
    'type'                     => 'any',
    'orderby'                  => 'name',
    'order'                    => 'ASC',
    'taxonomy'                 => 'category',
); 

$categories = get_categories( $args );

echo "Categories:< br/>";

foreach ( $categories as $category ) {
     echo '< a href="' . get_category_link( $category->term_id ) . '">' . $category->name . '< /a>< br/>';
}

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

echo "Tags:
";

$args = array( 
    'orderby'                  => 'name',
    'order'                    => 'ASC',
); 

$tags = get_tags( $args );

foreach ( $tags as $tag ) {
     echo '' . $tag->name . '
';
}

TAXONOMIES

get_taxonomies ( ) Get a list of registered taxonomy objects.

echo "Taxonomies:
";

$taxonomies = get_taxonomies(); 

foreach ( $taxonomies as $taxonomy ) {
    echo '< p>' . $taxonomy . '< /p>';
}

ایجاد shortcode جدید در طراحی سایت وردپرس

ابتدا باید بگویم که بگارگیری shortCode در طراحی سایت وردپرس به زبان فارسی اشتباه است، زیرا shortcode‌ها بدرستی در ویرایشگر دیداری در حالت RTL نمایش داده نمی‌شوند، به هر ایجاد shrtcode یا کد کوتاه وردپرس بسیار ساده است، به مثال زیر توجه کنید:

// Add Shortcode
function video_embed_shortcode( $atts ) {

	// Attributes
	extract( shortcode_atts(
		array(
			'src' => '',
			'width' => '',
			'height' => '',
		), $atts )
	);

	// Code
return '< embed 
		src="' . $src . '"
		width="' . $width . '"
		height="' . $height . '"
		type="application/x-shockwave-flash"
		allowscriptaccess="always"
		allowfullscreen="true">';

}
add_shortcode( 'video_embed', 'video_embed_shortcode' );

 کافی‌ست کد بالا را در function.php قرار دهید، همانطور که میدانید شورت کد Video بصورت پیش‌فرض در وردپرس وجود دارد ولی ما می‌توانیم آنها را با شورت کد جدید جایگزین کنیم. در نهایت شورت کد که در ویرایشگر دیداری یا tinymce بکار میرود بصورت زیر خواهد شد.

[video_embed src="" width="" height=""]

مشکل ریدایرکت شدن لوکال به سایت اصلی

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

برای حل این مشکل کد زیر را در Query دیتابیس خود اجرا نمایید.

UPDATE wp_options SET option_value = REPLACE(option_value,'xcurrentx','xreplacementx');

دستور فوق فیلد option_value جدول wp_options را جستجو می‌کند و کلمه xreplacementx را جایگزین xcurrentx خواهد کرد.

بنابراین در طراحی سایت وردپرس لوکال بجای xcurrentx آدرس سایت زنده را وارد نمایید و بجای xreplacementx آدرس سایت وردپرس لوکال را وارد نمایید.