آموزش ساخت قالب وردپرس - قسمت پنجم

This entry is part [part not set] of 8 in the series آموزش طراحی قالب وردپرس

معرفی و کاربرد فایل functions.php

در پایان قسمت قبل ، قالبی که در حال ساخت آن هستیم حاوی 5 فایل و یک عکس مطابق شکل زیر بود:

در قسمت قبل ، بعد از اضافه کردن فایل های footer.php و header.php دیدیم که ظاهر فایل به علت نبود کد های CSS وارد شده ، کمی نامرتب بود و مرتب کردن آن در این قسمت باید انجام می شد که این کار بی دلیل نبود.

در ادامه مطالب دلیل این موضوع را خواهید آموخت.

پس اکنون یک فایل دیگر به نام functions.php در کنار فایل های دیگر بسازید و به ادامه مطالب بروید.

در این قسمت از آموزش قصد داریم به مطالب زیر بپردازیم :

فایل functions.php چیست؟
چه کارهایی می توانیم با فایل functions.php انجام دهیم؟
اضافه کردن استایل ها style.css و اسکریپت ها javascript به وردپرس
تعریف یک تابع و نمایش خروجی آن در قالب
فعال کردن ویژگی های وردپرس با استفاده از ()add_theme_support
جمع بندی

1. فایل Functions.php در وردپرس چیست؟

یک راه برای تغییر ظاهر و رفتار وردپرس استفاده از فایل functions.php است که در قالب سایت شما قرار دارد.

این فایل همانند یک افزونه ی وردپرس عمل می کند، یعنی اضافه کردن ویژگی ها و کاربردهای بیشتر به وردپرس بوسیله ی کدهای PHP. شما می توانید از این فایل برای فراخوانی توابع PHP، توابع وردپرس و یا توابعی که خودتان ساخته اید استفاده کنید.

به عنوان یک جایگزین برای این فایل شما می توانید توابع خود را به عنوان یک افزونه به وردپرس اضافه کنید و یا از یک افزونه مانند code snippet برای افزودن توابع خود به وردپرس استفاده کنید.

به هر حال در پایین تفاوت بین یک افزونه و فایل functions.php را بیان می کنیم:

یک افزونه وردپرس :

زمانی اجرا می شود که آن را بعد از نصب فعال کنید.
در همه ی قالب ها یا پوسته ها اجرا می شود.
به یک header مخصوص برای شناسایی شدن توسط وردپرس نیاز دارد.
در آدرس wp-content/plugins ذخیره می شود.

فایل functions.php در وردپرس:

تنها در قالبی اجرا می شود که درون آن قرار دارد، هر قالب یک فایل مخصوص به خود دارد.
بعد از عوض کردن قالب، بدون استفاده می ماند. و فایل functions.php قالب جدید فعال می شود.
برای شناسایی شدن توسط وردپرس به چیزی نیاز ندارد و اتوماتیک فعال است.
در پوشه ی اصلی قالب فعال شما در آدرس wp-content/themes ذخیره می شود.

چند نکته ی کوتاه

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

2. چه کارهایی می توانیم با فایل functions.php انجام دهیم؟

استفاده از قلاب های وردپرس action و filter در این فایل
فعال کردن ویژگی های وردپرس مانند ()add_theme_support
تعریف کردن توابع خود در این فایل و استفاده از آن ها در هر جایی از وردپرس
و …

2-1 . استفاده از قلاب ها در functions.php

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

شما به راحتی می توانید از دو قلاب action و filter و تمام کاربرد های شان در این فایل استفاده کنید. باز هم تاکید می کنیم ، این فایل بهترین جا برای استفاده از قلاب هاست.

2-2 . فعال کردن ویژگی های وردپرس مانند ()add_theme_support

برخی از ویژگی های وردپرس مانند تصویر شاخص برای هر پست از ابتدا فعال نیستند، و باید آن ها را با استفاده از تابع ()add_theme_support در فایل functions.php در وردپرس فعال کرد. برای مثال قالبی که اکنون در حال ساخت آن هستیم را در وردپرس فعال کنید.

سپس بر روی نوشته ها کلیک کنید و به صفحه ی ویرایش یکی از نوشته ها بروید و می بینید قسمتی که به هر پست تصویر شاخص اضافه می کنید وجود ندارد، مانند تصویر زیر:

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

<?php
	add_theme_support( 'post-thumbnails' );

حال دوباره به صفحه ی ویرایش می رویم و در تصویر زیر می بینید تصویر شاخص اضافه شده است:

پس همان طور که می بینیدبعضی از ویژگی ها را باید فعال کنیم.

ویژگی هایی که به وسیله ی این تابع می توانید اضافه کنید در زیر آمده است:

post formats
post thumbnails
custom backgrounds
custom header
custom logo
feed links
HTML 5
title tag
Customize Selective Refresh Widgets

هر کدام از این ویژگی ها را در زمان معین توضیح خواهیم داد.

2-3 . افزودن توابع خود به وردپرس

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

3. اضافه کردن استایل ها style.css و اسکریپت ها javascript به وردپرس

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

به همین دلیل در قسمت 4 قبل از معرفی فایل functions.php نمی توانستیم نحوه ی اضافه کردن صحیح CSS و Javascript به وردپرس را به شما بگوییم.

برای اضافه کردن فایل های CSS از تابع زیر در فایل functions.php استفاده می کنیم:

wp_enqueue_style();

برای اضافه کردن فایل های javascript از تابع زیر در فایل functions.php استفاده می کنیم:

wp_enqueue_script();

در قسمت سوم آموزش برای زیباتر کردن ظاهر وب سایت از Bootstrap 3 استفاده کردیم که آن را با استفاده از تگ های <link> زیر درون تگ <head> به وردپرس اضافه کردیم:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

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

فایل functions.php را باز کنید و هر چیزی را که قبلاً در آن نوشتید پاک کنید. و کد زیر را به آن اضافه کنید:

<?php
function add_theme_css_js() {
	wp_enqueue_style('cdnBootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css',null,null);
	wp_enqueue_script('cdnBsjquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array(), null, null);
	wp_enqueue_script('cdnBsjavascript', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js', array(), null, null);
	
}
add_action( 'wp_enqueue_scripts', 'add_theme_css_js');

اگر به یاد داشته باشید در فایل header.php تابع ()wp_head را فراخواندیم.

در کد بالا تابع ()add_theme_css_js را ساختیم. در این تابع با استفاده از توابع ()wp_enqueue_css و ()wp_enqeueu_js فایل های CSS و javascript که قصد داریم به وردپرس اضافه کنیم لیست می کنیم.

و در آخر با wp_enqueue_scripts این تابع را به قلاب action وصل می کنیم. هر گاه تابع ()wp_head که در header.php قرار دادیم اجرا می شود این فایل ها نیز به تگ <head> اضافه می شوند

ما هنوز یک فایل CSS دیگر باید به وردپرس اضافه کنیم و آن فایل style.css می باشد که برای قالب خود ساختیم. style.css را با ویرایش کد بالا به صورت زیر به تابع بالا و در نتیجه به وردپرس اضافه می کنیم:

<?php
function add_theme_css_js() {
	wp_enqueue_style('cdnBootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css',null,null);
	wp_enqueue_script('cdnBsjquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array(), null, null);
	wp_enqueue_script('cdnBsjavascript', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js', array(), null, null);
	wp_enqueue_style( 'style', get_stylesheet_uri(),null,null );
}
add_action( 'wp_enqueue_scripts', 'add_theme_css_js');

پس همیشه می توانید با استفاده از کدی که در تابع بالا می بینید فایل stye.css را به روش استاندارد به وردپرس خود اضافه کنید.

در ضمن کد های CSS زیر را برای زیبا شدن قالب خود به فایل style.css اضافه کنید و در انتها فایل style.css باید مانند زیر باشد:

/*
Theme Name:  My Basic Theme
Theme URI:   https://kerasno.com
Author: 	Hadi Mohammade
Author URI: https://kerasno.com/HadiMohammade
Description:  another wordpress Theme for our businedd / a short description abouth this theme.
Version:  1.0
License:  FREE
License URI:  https://kerasno.com/
Text Domain:  HadiMohammade
Tags:  Free theme.
*/
body{
		background-color: #eee;
	}
.container {
		margin-top:30px;
		background-color: white;
		padding: 25px;
		border-radius: 15px;
 	}
.post-box {
		padding:10px;
		font-family: "sans-serif","tahoma";
	 }
h1 {
		font-size:23px;
	}
h2 {
		font-size:22px;
	}

پس با انجام تغییرات بالا صفحه ی اصلی همانند شکل زیر می شود:

در صفحه اصلی راست کلیک کنید و گزینه ی view page source را بزنید خواهید دید که فایل هایی که در تابع بالا وارد کردید به درون تگ <head> شما اضافه شده است.

4. تعریف یک تابع و نمایش خروجی آن در قالب

خوب است که در مبحث معرفی فایل functions.php ، یک مثال از طرز استفاده و اجرای توابعی که خود ما ، برای وردپرس می سازیم به کار ببریم .

فرض کنید می خواهیم در پایان هر نوشته متنی اضافه کنیم به عنوان مثال در پایان هر نوشته این متن را اضافه کنیم ” از وقتی که برای خواندن این مطلب صرف کردید ممنون هستیم “.

برای این کار ابتدا تابع زیر را به انتهای فایل functions.php اضافه می کنیم:

function add_thanks_message() {

	echo "از وقتی که برای خواندن این مطلب صرف کردید ممنون هستیم" ;
}

اسم تابع موردنظر ما ()add_thanks_message می باشد. حال کافی است برای نمایش و اجرای آن در هر جای وردپرس که می خواهیم آن را فراخوانی کنیم.

ما قصد داریم در انتهای هر پست آن را اضافه کنیم. پس به فایل single.php که وظیفه ی نمایش محتوای پست ها را دارد تابع زیر را مانند زیر به آن اضافه می کنیم.

فایل single.php :

<?php
	get_header();
?>
<body>		
		<div class="container">
			<div class="post-content">
		<?php

					/* Start the Loop */
					while ( have_posts() ) {
						the_post();
		?>
							<h1> <?php the_title() ?></h1>       <!--  show the title of post  -->
							<span> <?php the_date(); ?> </span>  <!--  show the time post published  -->
							<p>  <?php the_category(); ?></p>    <!--  show the post categories  -->
							<div>

								<?php the_content(); ?>          <!--  show the post content   -->
							</div>
							<p>  <?php add_thanks_message(); ?> </p>	
							<p> <?php the_tags(); ?> </p>        <!--  show the post tags  -->


		<?php
					}  /* end loop */
		?>
			</div>
	</div>

<?php
	get_footer();
?>

همان طور که می بینید تابع ساخته شده را بعد از ()the_content که وظیفه نمایش متن اصلی نوشته را دارد اضافه کردیم و نتیجه برای نوشته سلام دنیا یا hello world مانند زیر است.

درست همانند این مثال می توانید توابع خود و دیگر توابع را با استفاده از فایل functions.php در وردپرس اجرا کنید و از وردپرس لذت ببرید.

5. فعال کردن ویژگی های وردپرس با تابع ()add_theme_support

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

در بالا در مورد این ویژگی ها صحبت کردیم و لیست آن ها را دیدید. برای فعال کردن همه ی این ویژگی ها در وردپرس بوسیله ی تابع add_theme_support کد زیر را به انتهای فایل functions.php خود دقیقا بعد از تابع ()add_thanks_message که در بالا ساختیم اضافه کنید.

/**
 * Essential theme supports
 * */
function theme_setup(){
    /** automatic feed link*/
    add_theme_support( 'automatic-feed-links' );
 
    /** tag-title **/
    add_theme_support( 'title-tag' );
 
    /** post formats */
    $post_formats = array('aside','image','gallery','video','audio','link','quote','status');
    add_theme_support( 'post-formats', $post_formats);
 
    /** post thumbnail **/
    add_theme_support( 'post-thumbnails' );
 
    /** HTML5 support **/
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
 
    /** refresh widgest **/
    add_theme_support( 'customize-selective-refresh-widgets' );
 
    /** custom background **/
    $bg_defaults = array(
        'default-image'          => '',
        'default-preset'         => 'default',
        'default-size'           => 'cover',
        'default-repeat'         => 'no-repeat',
        'default-attachment'     => 'scroll',
    );
    add_theme_support( 'custom-background', $bg_defaults );
 
    /** custom header **/
    $header_defaults = array(
        'default-image'          => '',
        'width'                  => 300,
        'height'                 => 60,
        'flex-height'            => true,
        'flex-width'             => true,
        'default-text-color'     => '',
        'header-text'            => true,
        'uploads'                => true,
    );
    add_theme_support( 'custom-header', $header_defaults );
 
    /** custom log **/
    add_theme_support( 'custom-logo', array(
        'height'      => 60,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
        'header-text' => array( 'site-title', 'site-description' ),
    ) );
 
 
 
}
add_action('after_setup_theme','theme_setup');

در آموزش های بعد هر جایی که به این مقادیر برسیم ، آن ها را توضیح می دهیم.

6. جمع بندی

این مطلب به صورت کلی به فایل functions.php اختصاص یافت البته بیان کاربرد های این فایل در یک یا دو پست نمی گنجد.

در آموزش های آینده خیلی بیشتر با این فایل سر و کار داریم.

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

پس اکنون قالب ما شامل فایل های زیر می باشد:

Series Navigation

معرفی و کاربرد فایل functions.php

فایل functions.php چیست؟

چه کارهایی می توانیم با فایل functions.php انجام دهیم؟

اضافه کردن استایل ها style.css و اسکریپت ها javascript به وردپرس

تعریف یک تابع و نمایش خروجی آن در قالب

فعال کردن ویژگی های وردپرس با استفاده از ()add_theme_support

جمع بندی