تخفیف ویژه زمستانه پی استور
تا 60 درصد تخفیف
شامل پروژه‌ها و دوره‌های آموزشی
روز
ساعت
دقیقه
ثانیه
تخفیف ویژه زمستانه پی استور
یک قالب وردپرس می‌تواند فقط از دو فایل style.css و index.php تشکیل شده باشد چون سلسله مراتب قالب وردپرس این امکان را بوجود آورده است یعنی زمانی که وردپرس به یک صفحه وب خروجی می‌دهد، خاص‌ترین قالب موجود را جستجو می‌کند، اگر قالبی وجود نداشته باشد، سلسله مراتب را پایین می‌آورد تا زمانی که یکی از فایل های مورد نیاز را پیدا کند و در خروجی نمایش دهد. وردپرس سعی می کند به ترتیب با اولویت بالا از الگوهای زیر برای انتخاب قالب استفاده کند:
پس وردپرس به دنبال این فایل ها است تا قالب شما را شناسایی کند و در نهایت اگر هیچکدام از این فایل های نباشد از index.php استفاده خواهد کرد. بیایید با ساختن یک قالب ساده و فقط با فایل‌های ضروری شروع کنیم و سپس می‌توانیم ویژگی‌های بیشتری را با بررسی نحوه عملکرد آنها در آموزش طراحی پیشرفته قالب وردپرس لایه‌بندی کنیم.
در قسمت /wp-content/themes/، یک پوشه به نام my-custom-theme ایجاد کنید و این دو فایل زیر را ایجاد کنید:
برای اینکه وردپرس تم یا قالب ما را بشناسد و آن را به درستی در Appearance → Themes نشان دهد، باید مقداری کد مخصوص وردپرس را در بالای style.css قرار دهیم، به این صورت است:
/* Theme Name: My Custom Theme Theme URI: https://yourwebsite.com/theme Author: Your Name Author URI: https://yourwebsite.com Description: This is my first custom theme! Version: 1.0.0 License: GNU General Public License v2 or later License URI: <https://www.gnu.org/licenses/gpl-2.0.html> Text Domain: my-custom-theme Tags: custom-background *
در واقع هیچ یک از فیلدهای بالا مورد نیاز نیست و بیشتر برای شناسایی و توزیع قالب در وردپرس بکار برده می شود. در هر حال شما این کار را انجام دهید تا همه چیز در آموزش طراحی پیشرفته قالب وردپرس به صورت اصولی پیش برود.
موارد بالا را در style.css کپی و پیست کنید و چیزی شبیه به تصویر زیر را در پیشخوان وردپرس خواهید داشت:
در حال حاضر پوسته ما خالی به نظر می‌رسد زیرا ما هنوز اسکرین شات نداریم که بعداً اضافه خواهیم کرد. در این آموزش فرض بر این است که شما با وردپرس کار کرده اید. اگر آشنایی با سیستم مدیریت محتوای وردپرس ندارید می توانید از آموزش وردپرس فرادرس استفاده کنید.
index.php فایل مورد نیاز دیگر است. وظیفه آن رندر کردن تمام خروجی های Front End برای قالب ما است. از آنجایی که index.php قرار است تمام صفحات ما (Home، پست ها، دسته ها، بایگانی ها) را رندر کند، کار زیادی انجام خواهد داد. برای شروع به یک بخش head نیاز داریم که اصول HTML را رعایت کند. کد زیر را به index.php اضافه کنید:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
کد HTML بالا یک استاندارد با یک استثنا است، [()wp_head]. wp_head یک تابع اصلی است که به وردپرس و افزونه‌های شخص ثالث اجازه می‌دهد بدون تغییر فایل‌های قالب، کد را در هدر وارد کنند. که به آن action hook می گویند. اگر با HTML آشنایی دارید، متوجه می شوید که برچسب <title> برای خروجی عنوان صفحه وجود ندارد. این کار به این دلیل است که وردپرس می تواند از هوک wp_head برای درج پویای عنوان استفاده کند.
یکی دیگر از کاربردهای wp_head قرار دادن سبک ها CSS. و اسکریپت ها JS. است. دلایل بسیار خوبی برای انجام این کار به جای هاردکد کردن آنها وجود دارد که در ادامه آموزش طراحی پیشرفته قالب وردپرس به آنها خواهیم پرداخت. در مرحله بعدی بدنه یا body صفحه را داریم:
<body <?php body_class(); ?>>
()body_class یک تابع کمکی است که توسط وردپرس ارائه شده است که لیستی از کلاس های مفید CSS را که صفحه نمایش داده شده را توصیف می کند مانند:
class="page page-id-2 page-parent page-template-default logged-in"
همچنین ()body_class یک پارامتر را می پذیرد تا بتوانید کلاس های خود را اضافه کنید، به عنوان مثال:
<body <?php body_class( 'wide-template blue-bg' ); ?>>
در مرحله بعدی هدر header قالب را اضافه می کنیم:
<header class="site-header">
<p class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php bloginfo( 'name' ); ?>
</a>
</p>
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
</header><! – .site-header – >
در اینجا ما از توابع قالب داخلی وردپرس برای خروجی عنوان و توضیحات سایت استفاده می کنیم و از یک تابع کمکی، ()home_url برای پیوند دادن عنوان سایت به صفحه اصلی استفاده کرده ایم. در ادامه برای بدنه صفحه از کد زیر استفاده کنید:
<div class="site-content">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<article <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><! – .entry-header – >
<div class="entry-content">
<?php the_content( esc_html__( 'Continue reading →', 'my-custom-theme' ) ); ?>
</div><! – .entry-content – >
</article><! – #post-## – >
<?php
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
else :
?>
<article class="no-results">
<header class="entry-header">
<h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1>
</header><! – .entry-header – >
<div class="entry-content">
<p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p>
</div><! – .entry-content – >
</article><! – .no-results – >
<?php
endif;
?>
</div><! – .site-content – >
اینجاست که کار جالب و کمی پیچیده می شود. در اینجا ما از مهمترین ویژگی وردپرس یعنی Loop استفاده می کنیم. حلقه LOOP کار سختی را انجام می دهد تا بفهمد کاربر در کدام صفحه است و چه چیزی باید نشان داده شود. سپس فهرستی از یک یا چند «پست» را برمی‌گرداند که می‌توانیم آنها را با استفاده از توابع الگو، در خروجی نشان دهیم.
اگر Loop هیچ نتیجه ای را برنگرداند، به عنوان مثال در صفحه ۴۰۴ یا پست حذف شده، از عملگر else برای نشان دادن یک پیام از پیش تعریف شده استفاده می کنیم. بدون کدهای اطراف، یک Loop ساده شده به این صورت است:
if ( have_posts() ) : // check if the loop has returned any posts.
while ( have_posts() ) : // loop through each returned post.
the_post(); // set up the content so we can use template tags like the_title().
the_title(); // output the post title.
the_content(); // output the post content.
endwhile;
else :
echo 'No Page Found'; // output an error message if there are no posts.
endif;
?>
توجه: از آنجا که وردپرس منشأ و وجود خود را از وبلاگ نویسی دارد، بسیاری از توابع از اصطلاحات “پست” استفاده می کنند، در صورتی که می توانند هر نوع محتوایی اعم از پست ها، صفحات، انواع پست های سفارشی را برگردانند و خروجی بدهند.
در نهایت، ما فوتر footer را داریم، تنها کاری که باید در اینجا انجام دهیم این است که تگ‌های HTML را که قبلاً باز کردیم، ببندیم. یک اکشن هوک دیگر به نام ()wp_footer وجود دارد که به طور فعال توسط وردپرس و افزونه‌ها برای گنجاندن اسکریپت‌ها در footer مورد نیاز برای ارائه صفحه استفاده می‌شود.
<?php wp_footer(); ?>
</body>
</html>
اگر کارهای بالا را انجام داده اید، یک تم یا قالب وردپرس کاملا کاربردی خواهید داشت که به شکل زیر است:
قالب ما قرار نیست برنده جایزه طراحی شود (چون CSS ندارد) و بسیاری از ویژگی هایی همچون (نوارهای کناری، پیمایش، تصاویر بند انگشتی، صفحه بندی، و غیره) را از ندارد، اما این یک شروع عالی است! بیایید کار آموزش طراحی پیشرفته قالب وردپرس را ادامه دهیم و ببینیم چگونه می توانیم این قالب را بهبود دهیم.
Functions.php یک فایل الزامی نیست، اما مزایای زیادی را ارائه می دهد که تقریباً تمامی قالب ها آن را دارند. در functions.php می توانید از قابلیت قالب داخلی وردپرس استفاده کنید و همچنین کد PHP سفارشی خود را اضافه کنید. اکنون یک فایل functions.php در پوشه theme خود ایجاد کنید زیرا در بخش های بعدی کدی را به آن اضافه خواهیم کرد.
اکثر وب‌سایت‌ها، از منوی پیمایش استفاده می‌کنند،برای اینکه به وردپرس بگوییم که قالب ما دارای یک منوی ناوبری است، باید آن را در functions.php به صورت زیر بین تگ های php?> و <؟ تعریف کنیم:
register_nav_menus( array(
'menu-1' => __( 'Primary Menu', 'my-custom-theme' ),
);
تابع ()register_nav_menus یک آرایه را به عنوان پارامتر می گیرد تا در صورت نیاز بتوانید بیش از یک منو را ثبت کنید. وردپرس اکنون در مورد منوی ما می داند، اما ما هنوز باید آن را در قالب خود خروجی بگیریم. ما این کار را با اضافه کردن کد زیر زیر bloginfo سایت در index.php انجام می دهیم:
wp_nav_menu( array(
'theme_location' => 'menu-1',
) );
اکنون یک منوی ناوبری (بدون CSS) داریم:
قالب ما نوار کناری یا سایدبار (ناحیه ویجت) ندارد، بیایید برای قالب خودمان Sidebar ایجاد کنیم. ابتدا باید سایدبار را در functions.php ثبت کنیم:
function my_custom_theme_sidebar() {
register_sidebar( array(
'name' => __( 'Primary Sidebar', 'my-custom-theme' ),
'id' => 'sidebar-1',
) );
}
add_action( 'widgets_init', 'my_custom_theme_sidebar' );
یک فایل با نام sidebar.php را در پوشه theme خود ایجاد کنید و کد زیر را در آن اضافه کنید:
<?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?>
<ul class="sidebar">
<?php dynamic_sidebar('sidebar-1' ); ?>
</ul>
<?php } ?>
در اینجا از یک دستور if استفاده می کنیم تا قبل از خروجی کد بررسی کنیم که نوار کناری “فعال” است یا خیر. نوار کناری فعال، نواری است که کاربر حداقل یک ویجت به آن اضافه کرده باشد. آخرین مرحله این است که نوار کناری را در index.php قرار دهید، در بالای ()wp_footer تابع ()get_sidebar را اضافه کنید.
همانند سایدبار و منوهای پیمایش، از تصاویر ویژه را در قالب خود نمی توان خروجی گرفت، بایستی به وردپرس بگوییم که ابتدا از آن ویژگی پشتیبانی می‌کنیم. پس کد زیر را به functions.php اضافه کنید:
add_theme_support( 'post-thumbnails' );
اکنون می توانیم ()the_post_thumbnail را در Loop و تصاویر بند انگشتی استفاده کنیم. تنها مشکل این است که آنها در حداکثر اندازه وردپرس یعنی 1920px 2560px خروجی خواهند داشت، که برای اکثر موارد بسیار بزرگ است. خوشبختانه وردپرس یک تابع کمکی ()add_image_size دارد.
زمانی که کاربر تصویری را آپلود می‌کند، و اگر اندازه تصویر تعریف شده باشد، وردپرس نسخه‌ای از تصویر آپلود شده را در آن اندازه تولید می‌کند (با حفظ نسخه اصلی). اگر تصویر کاربر کوچکتر از ابعادی باشد که تنظیم کرده‌اید، وردپرس کاری نمی‌کند، زیرا نمی‌تواند تصویری را بزرگ‌تر از تصویر اصلی کند.
برای استفاده از یک تصویر ویژگی بهینه شده به جای اصلی، کد زیر را در functions.php قرار دهید:
add_image_size( 'my-custom-image-size', 640, 999 );
در index.php نیز کد زیر را قرار دهید:
the_post_thumbnail( 'my-custom-image-size' );
قبلاً بیان کردیم که بهتر است استایل ها و اسکریپت ها را به جای هاردکد کردن مستقیم در فایل های قالب در صف‌بندی یا به اصطلاح Enqueueing قرار دهیم. این کار به این دلیل است که صف بندی اجازه انعطاف پذیری بسیار بیشتری را به ما می دهد.
هنگامی که، صف بندی به درستی انجام شود به وردپرس می گوید که کدام منابع در حال بارگیری هستند. وقتی وردپرس بداند به چه منابعی نیاز است، می تواند مطمئن شود که همان منبع بیش از یک بار بارگذاری نمی شود. این امر به ویژه زمانی مهم است که شما یک کتابخانه بسیار محبوب مانند jQuery یا FontAwesome دارید که از چندین تم و افزونه استفاده می شود.
یکی دیگر از مزایای صف بندی این است که منبعی که در نوبت قرار می گیرد می تواند توسط یک افزونه صف بندی شود و نیازی به تغییر فایل های قالب نباشد. اگرچه قالب ما دارای یک فایل style.css است که هنوز از آن استفاده نمی کند، بیایید اکنون آن را در صف قرار دهیم:
function my_custom_theme_enqueue() {
wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );
()get_stylesheet_uri یک تابع کمکی است که URI شیوه نامه موضوع فعلی را بازیابی می کند. اگر فایل دیگری را در صف قرار می دادیم، باید این کار را انجام دهیم:
wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/style.css' );
قالب ما هیچ اسکریپتی ندارد، اگر داشت آنها را به این صورت در صف قرار می دهیم:
function my_custom_theme_enqueue() {
wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );
wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/scripts.js' );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );
قالب ما دارای پایه های قوی ولی فاقد هر گونه طراحی است، افزودن برخی از CSS های اولیه به style.css تفاوت بزرگی و چشگیری ایجاد خواهد کرد. می توانید انواع طراحی CSS خودتان را به دلخواه در style.css خود اضافه کنید تا ظاهر زیبایی را داشته باشید.
همه تم ها باید از عملکرد داخلی وردپرس برای تولید برچسب یا tag استفاده کنند که با افزودن این کد به فایل functions.php شما فعال می شود: add_theme_support( ‘title-tag’ )، وردپرس خروجی صفحه <title> را مدیریت می کند و در صورت نیاز افزونه ها می توانند خروجی را با استفاده از فیلترها تغییر دهد. افزونه های سئو اغلب این کار را در تلاش برای بهینه سازی بیشتر عناوین انجام می دهند.
در حال حاضر ۸۰ درصد کد قالب ما در index.php است. درست است هیچ اشکالی در کار کردن قالب وجود ندارد ولی زمانی که فایل های قالب دیگری مانند singular.php، search.php، و archive.php داشته باشیم، منجر به تکرار کدهای زیادی می شود. پارت ها یا قطعات الگو با استفاده مجدد از کد در قالب ها، توسعه قالب را آسان تر می کند. از آنجایی که هدر و فوتر ما در هر صفحه یکسان خواهد بود، کاندیدای مناسبی برای استفاده از قطعات قالب هستند. ابتدا header.php را ایجاد کنید و کد زیر را از index.php منتقل کنید:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="<https://gmpg.org/xfn/11>">
<?php wp_head(); ?>
</head>
<header class="site-header">
<p class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php bloginfo( 'name' ); ?>
</a>
</p>
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
) );
?>
</header><! – .site-header – >
در index.php کد بالا را جایگزین کنید:
<?php get_template_part( 'header' ); ?>
توجه: هنگام دریافت قسمت قالب، باید .php را از دسته قسمت قالب حذف کنید.
در مرحله بعد، با انتقال این کد به footer.php و تکرار فرآیند بالا، یک قسمت قالب فوتر ایجاد کنید:
<?php wp_footer(); ?>
</body>
</html>
در نهایت، ما در آموزش طراحی پیشرفته قالب وردپرس کد “content-none” را به یک بخش الگو نیز منتقل می کنیم، زیرا احتمالاً در چندین قالب استفاده می شود. content-none.php را ایجاد کنید و این کد را به فایل جدید منتقل کنید.
<article class="no-results">
<header class="entry-header">
<h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1>
</header><! – .entry-header – >
<div class="entry-content">
<p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p>
</div><! – .entry-content – >
</article><! – .no-results – >
در نهایت index.php شما اکنون باید به شکل زیر باشد:
<?php get_template_part( 'header' ); ?>
<div class="site-content">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<article <?php post_class(); ?>>
<?php the_post_thumbnail(); ?>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><! – .entry-header – >
<div class="entry-content">
<?php the_content( esc_html__( 'Continue reading →', 'my-custom-theme' ) ); ?>
</div><! – .entry-content – >
</article><! – #post-## – >
<?php
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
else :
get_template_part( 'content-none' );
endif;
?>
</div><! – .site-content – >
<?php
get_sidebar();
get_template_part( 'footer' );
در حالی که موارد فوق کاملاً درست کار می‌کنند، ما می‌توانیم بهبود های جزئی نیز ایجاد کنیم. وردپرس دارای توابع کمکی برای قسمت های هدر، فوتر و قالب سایدبار است. از آنجایی که استفاده از عملکردهای اصلی در صورت امکان بهترین روش است، باید به جای آن از توابع زیر استفاده کنیم.
یعنی جایگزینی get_template_part( ‘header’ ) با ()get_header و get_template_part( ‘footer’ ) با ()get_footer
کارهایی که ما در آموزش طراحی پیشرفته قالب وردپرس با قطعات قالب تکمیل کردیم، با اضافه کردن فایل‌های قالب جدید به قالب خود، فواید بیشتری به همراه خواهد داشت. در ادامه رایج ترین فایل ها استفاده شده در قالب های وردپرس را فهرست کرده ایم و مثال های نمونه ای را برای هرکدام از این فایل ها قرار داده ایم.
پست‌ها و صفحات، زمانی که در URLهای خودشان نشان داده می‌شوند، «تک نوشته یا singular» در نظر گرفته می‌شوند، در اکثر مواقع طرح‌بندی برای هر دو نوع صفحه یکسان است. اما در صورتی که اینطور نیست، می‌توانید به جای آن از page.php و single.php (پست) استفاده کنید.
کد مثال – singular.php
<?php
/**
* The template for displaying single posts and pages.
*
* @copyright Copyright (c) 2020, Danny Cooper
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
*/
get_header(); ?>
<div class="site-content">
<?php
while ( have_posts() ) :
the_post();
?>
<article <?php post_class(); ?>>
<?php the_post_thumbnail( 'my-custom-image-size' ); ?>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content(); ?>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<?php
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</div><!-- .site-content -->
<?php
get_sidebar();
get_footer();
قالب‌های آرشیو معمولاً از دو جهت با قالب‌های تکی متفاوت هستند: این قالب‌ها گزیده‌ها را به جای محتوای کامل نشان می‌دهند و یک سرصفحه بایگانی را نشان می‌دهند که محتوا را توضیح می‌دهد. به سلسله مراتب الگو مراجعه کنید و خواهید دید که الگوی بایگانی همه انواع آرشیوها (نویسنده، دسته، برچسب، طبقه بندی، تاریخ) را پوشش می دهد.
کد مثال – archive.php
<?php
/**
* The template for displaying archive pages.
*
* @copyright Copyright (c) 2020, Danny Cooper
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
*/
get_header(); ?>
<div class="site-content">
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="archive-description">', '</div>' );
?>
</header><!-- .page-header -->
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<article <?php post_class(); ?>>
<?php the_post_thumbnail( 'my-custom-image-size' ); ?>
<header class="entry-header">
<?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content( esc_html__( 'Continue reading →', 'my-custom-theme' ) ); ?>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<?php
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
the_posts_navigation();
else :
get_template_part( 'content-none' );
endif;
?>
</div><!-- .site-content -->
<?php
get_sidebar();
get_footer();
وب سایت های وردپرسی را می توان با استفاده از پارامتر ?s= URL جستجو کرد، به عنوان مثال، yourwebsite.com?s=test. قالب search.php نتایج آن جستجوها را خروجی می دهد. برای همین براحتی با مثال کد زیر می توانید جستجو را در سایت انجام دهید.
کد مثال – search.php
<?php
/**
* The template for displaying search result pages.
*
* @copyright Copyright (c) 2020, Danny Cooper
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
*/
get_header(); ?>
<div class="site-content">
<header class="page-header">
<h1 class="page-title">
<?php
/* translators: %s: the search query */
printf( esc_html__( 'Search Results for: %s', 'scaffold' ), '<span>' . get_search_query() . '</span>' );
?>
</h1>
</header><!-- .page-header -->
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<article <?php post_class(); ?>>
<?php the_post_thumbnail( 'my-custom-image-size' ); ?>
<header class="entry-header">
<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content( esc_html__( 'Continue reading →', 'my-custom-theme' ) ); ?>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<?php
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
the_posts_navigation();
else :
get_template_part( 'content-none' );
endif;
?>
</div><!-- .site-content -->
<?php
get_sidebar();
get_footer();
عبارت else که در index.php اضافه کرده‌ایم خطاهای «صفحه یافت نشد» را می‌گیرد، اما ممکن است بخواهید آن عملکرد را در فایل قالب خودش جدا کنید تا کنترل بیشتری روی خروجی داشته باشید. این مورد استفاده از فایل قالب ۴۰۴.php است.
کد مثال – ۴۰۴.php
<?php
/**
* The template for displaying 404 page.
*
* @copyright Copyright (c) 2020, Danny Cooper
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
*/
get_header(); ?>
<div class="site-content">
<article class="no-results">
<header class="entry-header">
<h1 class="page-title"><?php esc_html_e( 'Nothing Found Here', 'my-custom-theme' ); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p>
</div><!-- .entry-content -->
</article><!-- .no-results -->
</div><!-- .site-content -->
<?php
get_sidebar();
get_footer();
اگر تم خود را برای عموم توزیع می کنید، فایل های زیر ضروری هستند. بدون این موارد، موضوع شما از مخازن تم و بازارها رد می شود.
هنگامی که کاربر در حال انتخاب یک تم جدید است، اسکرین شات در لیست تم های wp-admin نشان داده می شود. در اینجا برخی از بهترین روش هایی که باید دنبال کنید آورده شده است:
وردپرس از هیچ اطلاعاتی از readme.txt استفاده نمی کند، همه چیزهایی را که نیاز دارد از style.css استخراج می کند. از سوی دیگر، دایرکتوری تم وردپرس اطلاعات مهمی را از فایل readme بیرون می کشد و آن را یک فایل مورد نیاز در نظر می گیرد.
اکثر توسعه دهندگان از readme.txt به عنوان مکان مرکزی برای ذخیره تمام اطلاعات در مورد موضوع خود استفاده می کنند. یک readme.txt ساده به شکل زیر است:
=== Theme Name === Requires at least: 5.0 Tested up to: 5.2 Requires PHP: 5.6 License: GPLv2 or later License URI: <https://www.gnu.org/licenses/gpl-2.0.html> Short description. No more than 150 chars. == Description == Theme desc. == Changelog == = 1.۰ = * Added new option == Resources == * normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, [MIT](<https://opensource.org/licenses/MIT>)
قالب‌های برگه یا صفحه به توسعه دهندگان اجازه می دهد تا الگوهای سفارشی ایجاد کنند که می تواند برای پست ها و صفحات جداگانه استفاده شود. به عنوان مثال، اکثر تم ها دارای طرح بندی دو ستونی (محتوا – نوار کناری) هستند، اما در برخی از صفحات، کاربر ممکن است بخواهد فقط روی محتوا تمرکز کند و نوار کناری را نشان ندهد. اینجاست که یک قالب صفحه می تواند کمک کند.
در پوشه theme، یک پوشه جدید به نام “page-templates” ایجاد کنید و در آن پوشه یک فایل به نام single-column.php ایجاد کنید. برای سرعت بخشیدن به کارها، همه کدها را از singular.php به page-templates/single-column.php کپی کنید و فراخوانی ()get_sidebar را حذف کنید زیرا این الگو به آن نیاز ندارد.
اکنون باید یک هدر ویژه اضافه کنیم که به وردپرس بگوید این یک قالب صفحه است:
/* Template Name: Single Column Template Template Post Type: post, page */
این کد کاملاً یک توضیح است، ما به سادگی به وردپرس می گوییم که نام قالب را دارد و با کدام نوع پست می توان از آن استفاده کرد. الگوی صفحه جدید ما اکنون در ویرایشگر زیر “page attributes” موجود است.
در آموزش طراحی پیشرفته قالب وردپرس به بحث RTL می رسیم. همه زبان ها از چپ به راست خوانده نمی شوند. به عنوان مثال، عربی و فارسی از راست به چپ (RTL) خوانده می شوند. یک راه ساده برای سازگار کردن تم شما با زبان‌های RTL وجود دارد. یک فایل جدید در پوشه theme خود به نام rtl.css ایجاد کنید، سپس کد زیر را کپی و پیست کنید:
body {
direction: rtl;
unicode-bidi: embed;
}
اگر یک زبان RTL زبان فعال در یک وب سایت وردپرس باشد، وردپرس می داند که این فایل CSS را به طور خودکار بارگیری کند. این یک پیاده سازی بسیار اساسی از عملکرد RTL برای شروع است.
در آموزش طراحی پیشرفته قالب وردپرس در ۷ گام نحوه طراحی قالب یا تم وردپرس را توضیح دادیم اما همه چیز به این آموزش ختم نمی شود مطمئناً منابع و مراجع زیادی را شما عزیزان بایستی مطالعه کنید تا بتوانید قالب های پیشرفته و حرفه ای در وردپرس طراحی کنید. این آموزش تنها شروع کار و ایجاد انگیزه برای شما بود. منابع بسیار مفیدی در رابطه با کار کردن با WordPress وجود دارد که بسیاری از از این منابع را از سایت هایی همچون فرادرس برای شما معرفی کردیم.
اگر علاقه مند به حوزه وب هستید حتماً در این حوزه تلاش و مطالعه کنید چون بازار کار خوبی در کشور ما و حتی سایر کشورها دارد. پیشنهاد می کنیم مقاله آموزش کسب درآمد از برنامه نویسی – چگونه از برنامه نویسی پول در بیاوریم؟ را نیز مطالعه کنید. در ضمن فایل های کلی آموزش طراحی پیشرفته قالب وردپرس را نیز می توانید بصورت یک‌جا از باکس زیر دانلود کنید. در پایان منتظر نظرات و پیشنهادات شما عزیزان هستیم. موفق و پیروز باشید.
