آموزش جامع استفاده از Child Theme در وردپرس (2)

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

آموزش جامع استفاده از Child Theme در وردپرس (2)

دوستان در فسمت قبل چند نکته اضافی باید گفته میشد که منتقل شد به این قسمت.این نکات به شما در یادگیری هر چه بیشتر این آموزش بسیار کمک میکنند.دوستان مورد اول این است که اگر می خواهید که قالب شما استاندارد باشد باید تصویر آن را نیز به قالب اضافه کنید. این تصویر در بخش پوسته های وردپرس نمایش داده خواهد شد.پس در صورتی که مایل به این مورد هستید حتما تصویر را نیز قرار دهید توجه کنید که برای این منظور تنها کاری که باید انجام دهید این است که یک تصویر با فرمت PNG برای قالب خود تهیه کرده و آن را با نام screenshot.png ذخیره کنید و در سایت قرار دهید.

اگر این فایل را در پوشه قالب فرزند ( child theme ) خود قرار دهید، وردپرس به صورت خودکار آن را شناسایی کرده و در بخش پوسته نمایش خواهد داد. اندازه توصیه شده برای این تصویر ۸۸۰ در ۶۶۰ پیکسل می باشد پس این نکته را نیز مد نظر قرار دهید.

مورد بعدی از این نکات این است که با استفاده از افزونه One-Click Child Theme به راحتی می توانید برای قالب های خود قالب فرزند ( child theme ) ایجاد کنید.این نکته نیز برای افرادی است که به این مراحل علاقه ای ندارند و دوست دارند افزونه همه کارها را برای آن ها انجام دهد پس آن ها نیز میتوانند در این اموزش سهمی داشته باشند.

دوستان در صورتی که مایل هستید از افزونه استفاده کنید برای این کار بعد از نصب و فعال سازی افزونه به قسمت نمایش > Child Theme مراجعه کنید و با دادن نام و توضیحات و … مورد نیاز، قالب فرزند ( child theme ) خود را بسازید.خب دوستان این هم از این افزونه و بهتر است بار دیگر ادامه دهیم.

در این مرحله میرسیم به شخصی سازی قالب فرزند ( child theme ) وردپرس

دوستان در این قسمت اگر همه مراحل را به درستی انجام داده باشید، قالب فرزند ( child theme ) شما باید هم اکنون فعال بوده و ظاهر سایت شما دقیقا مثل قالب مادر باشد و مشکلی از جهت ظاهر و استایل ان نداشته باشید. از این به بعد یاد می گیریم که چطور قسمت های مختلف سایت را با قالب فرزند ( child theme ) ویرایش کنیم و موارد و خواسته های خود را روی ان ها قرار دهیم

دوستان شخصی سازی ظاهر سایت با استفاده از قالب فرزند ( child theme ) به چند روش قابل انجام است که در ادامه عداد زیادی از آن را مورد بررسی قرار می دهیم.

اولین مورد: شخصی سازی ظاهر سایت با ویرایش style.css قالب فرزند ( child theme )

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

در این قسمت دوستان توجه کنید که برای این کار کافی است که کدهای css خود را توسط افزونه های مختلف مرورگر مثل firebug و … پیدا کرده و تغییرات مورد نیاز خود را در آن ایجاد نمایید. سپس کدهای جدید را در فایل style.css قالب فرزند ( child theme ) قرار داده تا جایگزین کدهای قالب مادر شوند.در این حالت تمامی تعییرات شما تصحیح میشود و میتوانید تعییرات را مشاهده کنید

دوستان توجه کنید که ما قصد داریم از طریق قالب فرزند ( child theme ) که در قسمت های بالا آموزش ساخت ان توضیح داده شد، فاصله زیاد بین آواتار نویسنده و محتوای مطلب را کم کرده و همچنین فونت عنوان مطلب و محتوای آن را تغییر دهیم. با ابزاری مانند firebug نام کلاس آن ها را پیدا کرده و تغییرات مورد نیاز را در آن ایجاد می کنیم و کدهای نهایی را در فایل style.css قالب قرار می دهیم.

دوستان در مثال ما ، کدهایی که باید به فایل style.css قالب فرزند ( child theme ) اضافه شوند را در زیر مشاهده می کنید:

.entry-title {
    font-family: b yekan;
}
.entry-content {
    font-family: adobe arabic;
    font-size: 22px;
    width: 85% !important;
}
    .entry-footer {
    width: 15% !important;
}

جایگزینی فایل های قالب مادر

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

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

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

به عنوان مثال اگر فایل content-single.php قالب دوهزار و شانزده را کپی کرده و آن را در پوشه قالب فرزند قرار دهیم. با باز کردن آن در ویرایش گر با کد زیر مواجه خواهیم شد:

<header class="entry-header">
    <?php the_title( '
<h1 class="entry-title">', '</h1>

' ); ?>
</header>

<!-- .entry-header -->
<?php twentysixteen_excerpt(); ?>
<?php twentysixteen_post_thumbnail(); ?>

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

<?php twentysixteen_post_thumbnail(); ?>

<header class="entry-header">
    <?php the_title( '
<h1 class="entry-title">', '</h1>

' ); ?>
</header>

<!-- .entry-header -->
<?php twentysixteen_excerpt(); ?>

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

دوستان توجه داشته باشید که در مثال ما، فایل content-single.php در قالب مادر، در پوشه ای با نام template-parts وجود داشت، برای این که این فایل به درستی در قالب فرزند خوانده شود باید همان ترکیب در قالب فرزند هم وجود داشته باشد. به عبارت دیگر در این مثال، ما پوشه ای با نام template-parts در پوشه قالب فرزند ایجاد کردیم و فایل content-single.php را در آن قرار دادیم و تغییرات را روی آن اعمال کردیم. پس به طور کلی می توان گفت که در این روش، ساختار درختی فایل در قالب مادر، باید در قالب فرزند نیز رعایت شود.

کار کردن با فایل های چیدمان برگه

دوستان عزیز امیدوارم تا به انجای کار خسته نشده باشید و ادامه دهیم.دوستان تا اینجا یاد گرفتیم که ما می توانیم کلیه فایل های موجود در قالب مادر را با کپی کردن آن در قالب فرزند جایگزین کنیم و آن ها نیز به خوبی جایگزین شوند. با این حال این امکان هم وجود دارد که از فایل هایی که تنها در قالب فرزند وجود دارند نیز استفاده کنیم. به عنوان مثال می توانیم به استفاده از فایل های چیدمان برگه (Template files) اشاره کنیم که به راحتی قابل استفاده هستند.

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

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

دوستان در این مثال، ما فایل page.php موجود در قالب مادر را کپی کرده و آن را به custom-full-width.php تغییر نام می دهیم. حالا این فایل را در پوشه template-parts قالب فرزند قرار می دهیم و تغییرات زیر را در آن اعمال می کنیم توجه کنید که نسخه پشتیبان از موارد انجام شده در بالا حتما داشته باشید:

<?php /* * Template Name: Custom Full Width * Description: Page template without sidebar */ get_header(''); ?>


<div id="primary" class="content-area-full">
    <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( 'template-parts/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(); } // End of the loop. endwhile; ?>

    </main><!-- .site-main -->


</div>

<!-- .content-area -->


<?php get_footer(''); ?>

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

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

استفاده از فایل functions.php قالب فرزند

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

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

خب دوستان به شخصی سازی قالب فرزند بر می گردیم و ادامه کار را بررسی میکنیم. توجه کنید که در این مثال قصد داریم با استفاده از فایل functions.php قالب فرزند یک پست تایپ سفارشی به قالب اضافه کنیم. برای این کار کد زیر را انتهای این فایل قرار می دهیم:

// Register Custom Post Type
function custom_movie_type() {
    $labels = array(
        'name'                  => _x( 'فیلم ها', 'Post Type General Name', 'text_domain' ),
        'singular_name'         => _x( 'فیلم', 'Post Type Singular Name', 'text_domain' ),
        'menu_name'             => __( 'فیلم ها', 'text_domain' ),
        'name_admin_bar'        => __( 'فیلم ها', 'text_domain' ),
        'all_items'             => __( 'نمایش همه فیلم ها', 'text_domain' ),
        'add_new'               => __( 'اضافه کردن فیلم جدید', 'text_domain' ),
        'new_item'              => __( 'فیلم جدید', 'text_domain' ),
    );
    $args = array(
        'label'                 => __( 'فیلم', 'text_domain' ),
        'description'           => __( 'فیلم ها جدید من', 'text_domain' ),
        'labels'                => $labels,
        'supports'              => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'custom-fields', ),
        'taxonomies'            => array( 'category', 'post_tag' ),
        'hierarchical'          => false,
        'public'                => true,
        'show_ui'               => true,
        'show_in_menu'          => true,
        'menu_position'         => 5,
        'show_in_admin_bar'     => true,
        'show_in_nav_menus'     => true,
        'can_export'            => true,
        'has_archive'           => true,     
        'exclude_from_search'   => false,
        'publicly_queryable'    => true,
        'capability_type'       => 'page',
    );
    register_post_type( 'movie', $args );

}
add_action( 'init', 'custom_movie_type', 0 );

دوستان همانطور که متوجه شدید این کد باعث می شود که یک پست تایپ سفارشی جدید با عنوان فیم ها در وردپرس اضافه شود.
دوستان همان طور که مشاهده کردید با استفاده از فایل functions.php قالب می توان قست های مختلف قالب را ویرایش نمود و تمامی موارد را به سلیقه خود تکمیل کرد و ان ها را در اختیار داشت. همچنین از این فایل می توانید برای ساخت ابزارک های جدید، ستون های کناری مختلف و کلا هر چیزی که از طریق تین فایل امکان پذیر است، استفاده کنید.

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

نتیجه گیری

دوستان عزیزم همان طور که دیدید ساخت یک قالب فرزند در وردپرس کاری بسیار ساده است و اصلا کاری پیچیده نیست و به راحتی می توان آن را به سادگی و راحتی اجرا کرد. تمام چیزی که برای ساخت قالب فرزند(Child Theme) نیاز دارید، یک پوشه و دو فایل است.همین و بس.هیچ مورد دیگری نیز نیاز نیست .

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

دوستان توجه کنید که این روش ویرایش دارای مزایای زیادی است که در ادامه به برخی از آن ها پرداخته میشود:

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

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

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

آموزش جامع استفاده از Child Theme در وردپرس (1) : لینک

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

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