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

این طبیعی است که شما بخواهید ظاهر قالب وردپرس خود را مطابق نظر خود تغییر دهید

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

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

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

قالب فرزند چی هست وچرا از آن استفاده می کنیم؟

قبل توضیح قالب فرزند باید قالب والد را توضیح دهیم. هنگامی که از یک قالب، قالب فرزند ایجاد می کنیم آن قالب، قالب والد می شود. هر قالبی می تواند قالب والد شود ولی بعضی ها از بقیه بهتر هستند. به عنوان مثال Genesis  مطرح شده توسط studiopress به طور خاص برای ایجاد قالب های فرزند ساخته شده اند.

قالب فرزند چی هست؟ قالب فرزند متفاوت عمل نمی کند.شما می توانید ان را از “Appearance” → “Themes, پیدا و  مانند قالب های دیگر فعال کنید . قالب فرزند کاملا به قالب والد خود مرتبط است. بدون قالب والد نه می تواند کاری انجام دهد نه فعال می شود. این به این دلیل است که قالب فرزند مستقل نیست و در آن فقط مطالب و فایل ها تغییر یا اضافه می شود. هر چیزی که در قالب والد وجود دارد می تواند استفاده کند و فقط قسمتایی که می خواهد می تواند تغییر دهد. در حقیقت شما قالب والد را فراتر از چیزی که می خواهید می توانید تغییر دهید. ولی بدون حضور آن کار نخواهد کرد.

مزایای استفاده از قالب فرزند

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

قالب فرزند می تواند شامل پوشه تصاویر، فایل های css,javascript وفایل ها ی قالب و دیگر فایل ها باشد. نکته زیبا این است که این چیزها لازم نیست و  شما فقط کمی سفارشی سازی نیاز دارید. در حقیقت قالب فرزند به سه چیز نیاز دارد: یک پوشه، یک فایل stylesheet , و یک فایل function.php و دو فایل دیگر که می تواند خالی باشد.

چه هنگام از لینک قالب فرزند استفاه کنیم؟

شما اگر قصد تغییرات کوچکی مثل تغییر رنگ یا تغییر فونت را دارید، آن هنگام افزونه css نیاز به تغییر دارد. بسیاری از قالب ها گزینه ای برای اضافه کردن کدهای سفارشی دارند. ولی اگر شما قصد تغییرات بزرگتری را دارید مانند طراحی کامل یا تغییر کامل قالب یا هر چیز دیگر قطعا” قالب فرزند کاری است که شما باید انجام دهید.

راه اندازی قالب فرزند

حالا که ما از ویژگی های قالب فرزند آگاه شدیم و می دانیم چه کاری انجام می دهند. اجازه دهید ب سراغ آموزش مرحله به مرحله آن برویم ما برای شروع از قالب ۲۰۱۵ استفاده می کنیم.

نکته :

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

ایجاد پوشه در WP-CONTENT/THEMES

همانطور که گفته شد قالب فرزند به سه چیز نیاز دارد: یک پوشه، یک فایل stylesheet , و یک فایل function.php . ما با پوشه شروع می کنیم. قالب فرزند هم مانند سایر قالب ها در مسیر wp-content/themes قرار دارد ما به این مسیر رفته و یک پوشه برای قالب فرزند خود ایجاد می کنیم. بهترین کار دادن نامی مانند نام قالب والد به اضافه نام فرزند می باشد. ماکه از قالب ۲۰۱۵ استفاده می کنیم نام پوشه را ۲۰۱۵-child قرار می دهیم.

ایجاد پوشه قالب فرزند در وردپرس

ایجاد پوشه قالب

شما هر نامی را می توانید استفاده کنید ولی مطمئن شوید که فاصله ای وجود ندارد که اخطار می دهد.

ایجاد یک stylesheet

حالا که پوشه را ایجاد کرده اید. ساخت یک css آسان می باشد یک فایل متنی به نام style.css ایجاد کنید . ما باید کد های فایل stylesheet header  را در ابتدای فایل اضافه کنیم.


/*

Theme Name: Twenty Fifteen Child

Theme URI: http://example.com/twenty-fifteen-child/

Description: Twenty Fifteen Child Theme

Author: John Doe

Author URI: http://example.com

Template: twentyfifteen

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

Text Domain: twenty-fifteen-child

*/

اینجا هر خط به یک نامی است.

  • Theme name

نام قالب که که به عنوان نام قالب  وردپرس شما نشان داده خواهد شد.

  • Theme URI

این به سایت یا ظاهر صفحه قالب وردپرس شما اشاره می کند. این یا URI نویسنده برای پذیرش در دایرکتوری وردپرس باید وجود اشته باشد.

  • Description

این توضیحات قالب شما است هنگامیکه روی detail theme” ” کلیک  می کنید نشان داده می شود.

  • Author

نام نویسنده که در این حالت نام شما است.

  • Author URI

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

  • Version

این قسمت مدل قالب فرزند شما رانشان می دهد که شما می توانید از ۱٫۰ شروع کنید.

  • License

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

  • License URI

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

  • Tags

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

  • Text domain

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


*
 Theme Name: Twenty Fifteen Child Theme
 Description: A child theme of the Twenty Fifteen default WordPress theme
 Author: Nick Schäferhoff
 Template: twentyfifteen
 Version: 1.0.0
*/

فعال کردن قالب فرزند

بعد از اینکه پوشه و فایل stylesheet خود را ایجاد کردید به “Appearance” → “Themes” بروید و قالب فرزند خود را پیدا کنید. هنگامیکه روی “Theme Details” کلیک می کنید محتوای style sheet header. را خواهید دید.چیزی که به شما اطلاع داده می شود:

سرصفحه قالب فرزند د روردپرس

سرصفحه قالب فرزند

حالا روی دکمه“Activate ”کلیک کنید. قالب شما فعال می شود. سایت شما به این صورت باید نمایش داده شود. نگران نباشید دلیل اینکه وب سایت خالی است نداشتن سبک می باشد.

قالب فرزند بدون سبک در وردپرس

قالب فرزند بدون سبک

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

ایجاد فایل function.php

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

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


<?php

//* Code goes here

فقط کافی تگ بازphp را قرار دهید و شما می توانید برخی اطلاعات را در قسمت سرصفحه بنویسید. ولی باید این طبق هدف باشد حالا این فایل را به پوشه اضافه کنید.اگر شما برنامه تغییر سایت خود با php را ندارید به function.php نیاز نیست و بدون آن می توانید کار کنید یک style sheet و یک پوشه کافی می باشد. ابتدا اهمیت این فایل را بیان می کنیم و بعد گام بعدی را بیان می کنیم.

درج سبک والد

ابتدا هنوز سایت شما بیشتر متن می باشد. شما چون از قالب والد استفاده می کنید یک تصوری از سایت خود دارید به عنوان مثال که ما از قالب ۲۰۱۵ استفاده می کنیم تصور ما به این صورت می باشد: شما نیاز دارید از فایل stylesheet قالب والد خود ارث ببرید. دوراه برای انجام این کار وجود دارد: یک راه استفاده از css می باشد با قانون @import که با کپی کردن کدهای زیر در فایل styl.css شما به قالب فرزند خود می گویید که از محتوای style sheet قالب والد برای دادن سبک به محتوای خود استفاده کند.


@import url("../twentyfifteen/style.css");

این ارث بری یک راه حل قدیمی می باشد و دیگر توصیه نمی شود. اگر شما از چندین stylesheet  بخواهید استفاده کنید @import باید چندین تا دانلود داشته باشد.و این باعث کاهش سرعت بارگذاری صفحه می شود.

راه حل دوم: شما می توانید از فایل style sheet والد، با اضافه کردن. این تابع وردپرس wp_enqueue_style()، فایل style sheet را به قالب خود اضافه کنید.در مورد ما کدها به این صورت می باشند:


add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

 

function enqueue_parent_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}

مطمئن شوید که کد را در فایل function.php را جای گذاری و ذخیره کرده اید. حالا ظاهر سایت خود را بررسی کنید باید به این شکل باشد:

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

سفارشی سازی موفق قالب فرزند

حتما اعتراض خواهید کرد که ظاهر مانند قالب والد است نگران نباشبد در مرحله بعد سراغ سفارشی کردن قالب فرزند می رویم.

اضافه کردن قالب تصویر:

شما برای متصور کردن قالب خود تصویر آن را اضافه کنید که این تصویر در منوی قالب ورد پرس نشان داده خواهد شد .شما باید یک تصویرpng به نام screenshot.png ایجاد کنید و در پوشه قالب وردپرس خود قرار دهید. مطمئن شوید که آن را در پوشه اصلی قرار داده اید و در پوشه فرعی نمی باشد. پیشنهاد می شود سایز آن را ۸۸۰ × ۶۶۰ پیکسل در نظر بگیرید هر چند که بصورت  ۳۸۷*۲۹۰ نشان داده می شود. ابعاد بزرگتر اطمینان می دهد که تصویر وضوح بالایی خواهد داشت.فرمت ها ی دیگر هم مانند jpeg, gif هم می باشند ولی png پیشنهاد داده می شود.

سفارشی سازی قالب فرزند

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

اجرای سبک های سفارشی

یکی از آسان ترین راهها استفاده از فایل css می باشد. که براحتی رنگ، فونت و دیگر عناصر طراحی را می توانید تغیر دهید.اگر شما css را کامل یاد داشته باشید کل طرح خود را می توانید تغییر دهید که ما در اینجا چند تغییر کلی را بیان خواهیم کرد.اگر شما سبک قالب والد را در فایل style.css خود فراخوانی کرده اید باید کدهای سفارشی سازی را بعد @import قرار دهید مانند شکل زیر:


/*
 Theme Name: Twenty Fifteen Child Theme
 Description: A child theme of the Twenty Fifteen default WordPress theme
 Author: Nick Schäferhoff
 Template: twentyfifteen
 Version: 1.0.0
*/

// Custom styles go here

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

محتوای قالب ۲۰۱۵

شما از ابزار Firebug برای تغییر طرح خود می توانید استفاده کنید. جستجوی شما به شکل زیر خواهد بود:


entry-header {

padding: 0 10%;

}

.entry-title, .widecolumn h2 {

font-size: 3.9rem;

line-height: 1.2308;

margin-bottom: 1.2308em;

}

.entry-content, .entry-summary {

padding: 0 10% 10%;

}

ما تغییراتی که مد نظر داریم را ایجاد می کنیم:


entry-header {

padding: 0 5%;

}

.entry-title, .widecolumn h2 {

margin-bottom: 0.5em;

}

.entry-content, .entry-summary {

padding: 0 5% 10%;

}

نتیجه:

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

ُبک سفارشی قالب فرزند

شما یاد گرفته اید که چطور قالب والد را تغییر دهید.

مهمتر از قالب والد:

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

به عنوان مثال فایل content.php محتوای آن به صورت زیر خواهد بود:

<?php
 // Post thumbnail.
 twentyfifteen_post_thumbnail();
?>

<header class="entry-header">
 <?php
 if ( is_single() ) :
 the_title( '<h1 class="entry-title">', '</h1>' );
 else :
 the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
 endif;
 ?>
</header><!-- .entry-header -->

کدها ی زیر را جابجا می کنیم:

<header class="entry-header">
 <?php
 if ( is_single() ) :
 the_title( '<h1 class="entry-title">', '</h1>' );
 else :
 the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
 endif;
 ?>
</header><!-- .entry-header -->

<?php
 // Post thumbnail.
 twentyfifteen_post_thumbnail();
?>

بعد از ذخیره و آپلود کردن قالب فرزند خواهید دید که تصویر در زیر عنوان قرار گرفته است.

قالب فرزند در ورد پرس

قالب فرزند

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

کار با فایل های قالب

ما برای نمونه می خواهیم قالب ۲۰۱۵ که تمام صفحه نیست در قالب فرزند بصورت تمام صفحه تبدیل کنیم. برای این کار به چهار فایل نیاز داریم: ایجاد صفحه قالب سفارشی، یک فایل header و footer سفارشی، و فایل های css سفارشی

برای شروع فایل page.php قالب والد را کپی کرده و به اسم custom-full-with.php تغییر می دهیم و در پوشه صفحه قالب فرزند قرار می دهیم.

حالا تغییرات زیر را اعمال می کنیم:


<?php
/*
 * Template Name: Custom Full Width
 * Description: Page template without sidebar
 */

get_header('custom'); ?>

 <div id="primary" class="content-area">
 <main id="main" class="site-main" role="main"> 

 <?php
 // Start the loop.
 while ( have_posts() ) : the_post();

 // Include the page content template.
 get_template_part( 'content', 'page' );

 // 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;

 // End the loop.
 endwhile;
 ?>

 </main><!-- .site-main -->
 </div><!-- .content-area -->

<?php get_footer('custom'); ?>

ما در این فایل گفته ایم که فایل header تغیر کرده است و قسمت های  get-header و get-footer به نامهای custom-header.php و custom-footer.php تغییر کرده است.اجازه دهید برای دیدن تغییرات به قسمت  “Page Attributes,” رفته و قالب صفحه را به  “Custom Full Width” تغییر دهیم.

فعال کردن قالب فرزند در وردپرس

فعال کردن قالب فرزند

برای تغییر header و footer به قالب والد رفته و دو فایل header.php و footer.php را کپی و در قالب فرزند قرار دهید و نامهای آنها را به custom-header.php و custom-footer.php  تغییر دهید.


<?php
/**
 * The template for displaying the header
 *
 * Displays all of the head element and everything up until the "site-content" div.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
 <meta charset="<?php bloginfo( 'charset' ); ?>">
 <meta name="viewport" content="width=device-width">
 <link rel="profile" href="http://gmpg.org/xfn/11">
 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
 <!--[if lt IE 9]>
 <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
 <![endif]-->
 <?php wp_head(); ?>
</head>

<body class="full-width-body" <?php body_class(); ?>>
<div id="page" class="hfeed site">
 <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>

 <header id="masthead" class="site-header full-width" role="banner">
 <div class="site-branding full-width">
 <?php
 if ( is_front_page() && is_home() ) : ?>
 <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
 <?php else : ?>
 <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
 <?php endif;

 $description = get_bloginfo( 'description', 'display' );
 if ( $description || is_customize_preview() ) : ?>
 <p class="site-description"><?php echo $description; ?></p>
 <?php endif;
 ?>
 <button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
 </div><!-- .site-branding -->
 </header><!-- .site-header -->

 <div id="content" class="site-content full-width">

ما در اینجا به عناصر <body> کلاس full-width-body اعمال می کنیم. ما همچنین کلاس full-width را به site-header, site-branding و  site-content اضافه می کنیم.د رگام آخر عناصر sidebar را رها می کنیم زیرا ما نمی خواهیم در قالب ما آنها قرار گیرند.تنها تغییر ما رو ی فایل custom-footer.php  است که کلاس full-width را اضافه کرده ایم.


<footer id="colophon" class="site-footer full-width" role="contentinfo">

صفحه تمام عرض ما:

.full-width-body::before {
 display: none;
}

.site-content.full-width {
 float: none;
 margin: 0 auto;
}

.site-header.full-width {
 background-color: #fff;
 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
 margin: 0;
 padding: 2% 0;
}

.site-branding.full-width {
 margin: 0 auto;
 width: 58.8235%;
}

.site-footer.full-width {
 float: none;
 margin: 0 auto;
}

صفحه تمام عرض ما:

صفحه تمام عرص قالب فرزند در وردپرس

صفحه تمام عرص قالب فرزند

 

آنفایو مرجع مقالات تخصصی طراحی قالب وردپرس

مشاهده بیشتر مقالات تخصصی طراحی قالب وردپرس در http://on5.ir