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

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

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

چرا شما نیاز به ایجاد یک تم کودک دارید؟

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

Twenty Thirteen
Twenty Thirteen

نیازمندی ها

درک اساسی CSS / HTML لازم است ، بنابراین شما می توانید تغییرات خود را ایجاد کنید. برخی از دانش های PHP مطمئناً کمک خواهد کرد. اگر در کپی و جایگذاری کد از منابع دیگر مهارت دارید ، این نیز مفید خواهد بود.

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

شروع

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

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

ابتدا باید / wp-content / themes را در پوشه نصب وردپرس خود باز کرده و یک پوشه جدید برای کودک خود ایجاد کنید. می توانید نام این پوشه را هر چیزی که می خواهید قرار دهید. برای این آموزش نام آن را wpbdemo می گذاریم.

ساخت قالب فرزند
ساخت قالب فرزند

یک ویرایشگر متن مانند Notepad باز کنید و این کد را جای گذاری کنید:

/*
 Theme Name:   WPB Child Theme
 Theme URI:    https://www.wpbeginner.com/
 Description:  A Twenty Thirteen child theme 
 Author:       WPBeginner
 Author URI:   https://www.wpbeginner.com
 Template:     twentythirteen
 Version:      1.0.0
*/
 
@import url("../twentythirteen/style.css");

اکنون این پرونده را به عنوان style.css در پوشه قالب کودک که ایجاد کرده اید ذخیره کنید.

بیشتر موارد موجود در این پرونده کاملاً قابل توضیح است. آنچه واقعاً می خواهید به آن توجه کنید الگو: twentythirteen است.

این به وردپرس می گوید که تم ما یک تم کودکانه است و نام شاخه تم پدر و مادر ما twentythirteen است. نام پوشه والد به حروف کوچک و بزرگ حساس است. اگر وردپرس را با الگو: TwentyThirteen ارائه دهیم ، کار نمی کند.

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

این حداقل نیاز برای ایجاد طرح زمینه کودک است. اکنون می توانید به قسمت “Appearance »Themes” بروید که WPB Child Theme را مشاهده خواهید کرد. برای شروع استفاده از طرح زمینه کودک در سایت خود ، باید روی دکمه فعال سازی کلیک کنید.

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

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

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

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

برای این بخش شما به کمی دانش CSS نیاز دارید.

Google Chrome و Firefox با ابزارهای داخلی برای بازرسی ارائه می شوند. این ابزارها به شما امکان می دهند HTML و CSS پشت هر عنصر یک صفحه وب را مشاهده کنید.

اگر می خواهید CSS مورد استفاده برای منوی پیمایش را مشاهده کنید ، به سادگی ماوس را به منوی پیمایش برده و برای انتخاب Inspect Element کلیک راست کنید.

Inspect Element
Inspect Element

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

ویرایش قالب
ویرایش قالب

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

همچنین قوانین CSS مربوط به عنصر برجسته شده در پنجره سمت راست را به شما نشان می دهد.

می توانید همانجا CSS را ویرایش کنید تا ببینید چگونه به نظر می رسد. بیایید سعی کنیم رنگ پس زمینه .navbar را به #e8e5ce تغییر دهیم.

تغییر رنگ منو
تغییر رنگ منو

خواهید دید که رنگ پس زمینه نوار پیمایش تغییر خواهد کرد. اگر این را دوست دارید ، می توانید این قانون CSS را کپی کرده و در فایل Style.css در قالب فرزند خود جای گذاری کنید.

.navbar {
background-color: #e8e5ce;
}

تغییراتی را که در فایل style.css ایجاد کرده اید ذخیره کرده و سپس سایت خود را پیش نمایش کنید.

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

/*
 Theme Name:   WPB Child Theme
 Theme URI:    https://www.wpbeginner.com
 Description:  A Twenty Thirteen child theme 
 Author:       WPBeginner
 Author URI:   https://www.wpbeginner.com
 Template:     twentythirteen
 Version:      1.0.0
*/
 
@import url("../twentythirteen/style.css");
 
.site-title {
padding: 30px 0 30px;
}
 
.site-header .home-link {
min-height: 0px;
}
 
.navbar {
background-color: #e8e5ce;
}
 
.widget { 
background-color: #e8e5ce;
}
.site-footer {
background-color: #d8cdc1;
} 
.site-footer .sidebar-container { 
background-color:#533F2A
}

ویرایش فایلهای الگو

ویرایش الگوهای قالب در بخش قالب فرزند
ویرایش الگوهای قالب در بخش قالب فرزند

هر قالب وردپرس طرح متفاوتی دارد. بیایید به طرح قالب Twenty Thirteen نگاه کنیم. شما دارای سرصفحه ، منوهای ناوبری ، حلقه محتوا ، منطقه ویجت پاورقی ، منطقه ویجت ثانویه و پاورقی هستید.

هر یک از این بخش ها توسط پرونده های مختلف در پوشه Twenty Thirteen مدیریت می شوند. به این پرونده ها الگو گفته می شود.

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

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

به عنوان مثال ، شما می خواهید پیوند “Powered by WordPress” را از قسمت پاورقی حذف کرده و یک اخطار کپی رایت در آنجا اضافه کنید. به سادگی فایل footer.php را در طرح زمینه فرزند خود کپی کرده و سپس آن را در یک ویرایشگر متن ساده مانند دفترچه یادداشت باز کنید. خطوطی را که می خواهید حذف کنید پیدا کنید و آنها را با خطوط خود جایگزین کنید. مثل این:

<?php
/**
 * The template for displaying the footer
 *
 * Contains footer content and the closing of the #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
?>
 
        </div><!-- #main -->
        <footer id="colophon" class="site-footer" role="contentinfo">
            <?php get_sidebar( 'main' ); ?>
 
            <div class="site-info">
                <p>&copy; Copyright <?php echo date("Y"); ?> <?php bloginfo('name'); ?> All rights reserved.</p>
                 
            </div><!-- .site-info -->
        </footer><!-- #colophon -->
    </div><!-- #page -->
 
    <?php wp_footer(); ?>
</body>
</html>

در این کد ، ما Twenty Thirteen اعتبار را با اعلامیه حق چاپ جایگزین کرده ایم.

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

افزودن قابلیت های جدید به استایل قالب کودک

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

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

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

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

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

<?php
function wpbdemo_custom_header_setup() { 
 
    add_theme_support( 'custom-header', array( 'default-image' => '%s/images/headers/circle-wpb.png' ) );
 
    register_default_headers( array(
        'caramel' => array(
            'url'           => '%2$s/images/headers/circle-wpb.png',
            'thumbnail_url' => '%2$s/images/headers/circle-wpb-thumbnail.png',
            'description'   => __( 'Caramel', 'Caramel header', 'twentythirteen' )
        ),
    ) );
 
} 
add_action( 'after_setup_theme', 'wpbdemo_custom_header_setup' );
?>

اکنون اگر به “Appearance »Header” سر بزنید ، می توانید تصویری را که اضافه کردیم به عنوان تصویر پیش فرض مشاهده کنید.

تصویر سفارشی برای منو
تصویر سفارشی برای منو

می توانید هر قطعه کد سفارشی مورد نیاز خود را در پرونده functions.php طرح زمینه کودک خود اضافه کنید.

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

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

معمولترین خطایی که مشاهده خواهید کرد احتمالاً خطای نحوی است که معمولاً هنگامی اتفاق می افتد که چیزی از کد را از دست داده باشید.

نتیجه نهایی

نتیجه نهای ویرایش از طریق قالب فرزند
نتیجه نهای ویرایش از طریق قالب فرزند

بارگیری قالب نمایشی

می توانید با کلیک روی اینجا ، نتیجه نهایی آموزش قالب کودک وردپرس را بارگیری کنید. به یاد داشته باشید این یک قالب ابتدایی بسیار اساسی است که بر اساس Twenty Thirteen ساخته شده است.

سایر مضامین کودک مبتنی بر Twenty Thirteen

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

Holi

Holi
Holi

Cherry Blossom

Cherry Blossom
Cherry Blossom

2013 Blue

2013 Blue
2013 Blue

Flat Portfolio

Flat Portfolio
Flat Portfolio

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

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

دیدگاهتان را بنویسید