هل تتطلع إلى إنشاء قالب فرعي في ووردبريس؟
بمجرد أن تتعلم أساسيات ووردبريس ، ربما ترغب في معرفة كيفية تخصيص موقع ووردبريس الخاص بك. تعد السمات الفرعية نقطة انطلاق رائعة لأي شخص يتطلع إلى تخصيص سمات ووردبريس.
في هذه المقالة ، سوف نوضح لك كيفية إنشاء قالب فرعي في ووردبريس.
كيفية إنشاء قالب طفل ووردبريس
و موضوع الطفل هو موضوع وورد أن يرث وظيفة، ويضم، وأسلوب موضوع آخر وورد، موضوع الأم. يمكنك بعد ذلك تخصيص السمة الفرعية دون إجراء أي تغييرات على السمة الأصلية.
تعد السمات الفرعية هي أفضل طريقة لتخصيص سمة ووردبريس لأنها توفر الوقت والجهد. يحتوي النسق الرئيسي بالفعل على الكثير من التنسيقات والوظائف ، لذلك لا يتعين عليك ترميز كل شيء من البداية.
كما أنها تجعل من الآمن تحديث سمات ووردبريس الخاصة بك . نظرًا لأنك قمت بتعديل النسق الفرعي وليس الموضوع الرئيسي ، فلن تفقد أي تخصيص عند تحديث السمة الأصلية.
بمجرد أن تكون سعيدًا بموضوع طفلك ، يمكنك حتى استخدامه على موقع ووردبريس آخر .
لإنشاء قالب فرعي ، يجب أن تدرك أنك ستعمل باستخدام رمز. ستحتاج إلى فهم أساسي لـ HTML و CSS لفهم التغييرات التي تحتاج إلى إجرائها على الكود لتحقيق أهدافك.
بعض المعرفة بلغة PHP مفيدة أيضًا. يجب أن تكون على الأقل على دراية بنسخ ولصق مقتطفات التعليمات البرمجية من مصادر أخرى.
نوصيك بالتدرب على بيئة التطوير المحلية الخاصة بك . يمكنك نقل موقع ووردبريس مباشر إلى خادم محلي لأغراض الاختبار أو استخدام محتوى وهمي لتطوير السمات .
أخيرًا ، عليك أن تقرر موضوعًا رئيسيًا. يجب أن تختار موضوعًا أصليًا مشابهًا في المظهر والميزات لهدفك النهائي. الهدف هو إجراء أقل عدد ممكن من التغييرات.
في هذه المقالة ، سنستخدم قالب Twenty-One ، وهو أحد سمات ووردبريس الافتراضية.
يمكنك إنشاء نسق فرعي يدويًا عن طريق إنشاء المجلد والملفات المطلوبة. أو يمكنك إنشاء سمة فرعية باستخدام مكون إضافي.
الطريقة اليدوية مفيدة لأنها ستساعدك على التعرف على الملفات التي تحتاج إلى العمل عليها لاحقًا في البرنامج التعليمي. يمكن استخدام طريقة البرنامج المساعد إذا كنت تواجه صعوبات في إنشاء هذه الملفات.
ما عليك سوى استخدام طريقة واحدة ، ويمكنك الانتقال إلى الطريقة التي تفضلها باستخدام الروابط أدناه.
الطريقة الأولى: إنشاء موضوع تابع باستخدام التعليمات البرمجية
الطريقة الثانية: إنشاء سمة فرعية باستخدام البرنامج المساعد
أولاً ، تحتاج إلى فتح / wp-content / theme / في مجلد تثبيت ووردبريس الخاص بك وإنشاء مجلد جديد لموضوع طفلك. يمكنك تسمية هذا المجلد بأي شيء تريده. في هذا البرنامج التعليمي ، سنقوم بتسميته wpbdemo.
قم بإنشاء مجلد لموضوع الطفل
بعد ذلك ، تحتاج إلى إنشاء أول ملفين لموضوع طفلك. ابدأ بفتح محرر نصوص مثل Notepad. ثم تحتاج إلى لصق الكود التالي في المستند الفارغ.
Theme Name: WPB Child Theme
Theme URI: https://www.wpbeginner.com/
Description: A Twenty Twenty-One child theme
Author: WPBeginner
Author URI: https://www.wpbeginner.com
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechildيحتوي هذا الرمز على معلومات حول الموضوع الفرعي ، لذلك لا تتردد في تغييره لتلبية احتياجاتك. الآن احفظ هذا الملف باسم style.css في مجلد النسق الفرعي الذي أنشأته للتو. هذه هي ورقة الأنماط الرئيسية لموضوع طفلك.
الشيء التالي الذي عليك القيام به هو إنشاء ملف ثانٍ يقوم باستيراد أو إدراج أوراق الأنماط من القالب الأصلي. للقيام بذلك ، قم بإنشاء مستند جديد في محرر النصوص الخاص بك وانسخه في الكود التالي.
/* enqueue scripts and style from parent theme */
function twentytwentyone_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');سيعمل هذا الرمز عند استخدام Twenty-One كموضوع رئيسي. إذا كنت تستخدم موضوعًا رئيسيًا مختلفًا ، فأنت بحاجة إلى استخدام رمز مختلف كما هو موضح في كتيب ووردبريس Theme Handbook .
إذا كنت تواجه صعوبة في تعديل التعليمات البرمجية لموضوع رئيسي مختلف ، فقد ترغب في استخدام طريقة البرنامج المساعد بدلاً من ذلك.
الآن احفظ هذا الملف باسم jobs.php في مجلد السمات التابع لك. سنعود إلى هذا الملف لاحقًا لإضافة وظائف إلى المظهر الفرعي الخاص بك.
ملاحظة: في الماضي ، تم استيراد النسق الأصلي باستخدام الأمرimport في style.css. لا نوصي بهذه الطريقة بعد الآن لأنها ستزيد من مقدار الوقت اللازم لتحميل أوراق الأنماط.
لقد قمت الآن بإنشاء سمة فرعية أساسية جدًا ، وعندما تنتقل إلى المظهر »المظاهر ، يجب أن ترى موضوع WPB Child. ستحتاج إلى النقر فوق الزر “تنشيط” لبدء استخدام السمة الفرعية على موقعك.
انقر فوق زر التنشيط
نظرًا لأنك لم تغير أي شيء في المظهر الفرعي الخاص بك حتى الآن ، فسيستخدم موقعك وظائف ومظهر المظهر الأصلي. يمكنك الآن الانتقال إلى القسم التالي حيث ستقوم بتخصيص السمة الفرعية.
يعد Child Theme Configurator وسيلة سهلة لاستخدام مكون ووردبريس الإضافي الذي يتيح لك إنشاء وتخصيص سمات الطفل بسرعة دون استخدام التعليمات البرمجية.
أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي Child Theme Configurator . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
عند التنشيط ، تحتاج إلى الانتقال إلى Tools »Child Themes في لوحة معلومات ووردبريس الخاصة بك.
في علامة التبويب الوالد / الطفل ، سيُطلب منك تحديد سمة رئيسية من القائمة المنسدلة. سنختار موضوع Twenty-One.
حدد موضوع الأصل
بمجرد النقر فوق الزر “تحليل” ، سيتأكد المكون الإضافي من أن السمة مناسبة للاستخدام كقالب رئيسي. عشرون وعشرون على ما يرام.
انقر فوق الزر تحليل
بعد ذلك ، سيُطلب منك تسمية المجلد الذي سيتم حفظ النسق الفرعي فيه واختيار مكان حفظ الأنماط. سنترك الإعدادات الافتراضية.
قم بتسمية المجلد للموضوع الفرعي
في القسم التالي ، سيُطلب منك اختيار كيفية الوصول إلى ورقة أنماط النسق الأصل. مرة أخرى ، سنذهب مع الإعداد الافتراضي.
اختر كيف سيتم الوصول إلى ورقة أنماط الموضوع الأصلي
عندما تصل إلى القسم 7 ، ستحتاج إلى النقر فوق الزر المسمى “انقر لتحرير سمات سمة الطفل”. يمكنك بعد ذلك ملء تفاصيل موضوع طفلك.
انقر لتحرير سمات سمة الطفل
عند إنشاء سمة فرعية يدويًا ، تفقد قوائم وعناصر واجهة المستخدم الخاصة بالنسق الأصلي. يمكن لـ Child Theme Configuratator نسخها من النسق الرئيسي إلى النسق الفرعي. حدد المربع القسم 8 إذا كنت ترغب في القيام بذلك.
انقر فوق الزر لإنشاء موضوع طفلك الجديد
أخيرًا ، انقر فوق الزر لإنشاء المظهر الجديد الخاص بك. سيقوم المكون الإضافي بإنشاء مجلد للسمات الخاصة بك وإضافة ملفات style.css و function.php التي ستستخدمها لتخصيص السمة لاحقًا.
قبل تنشيط السمة ، يجب النقر فوق الارتباط الموجود بالقرب من أعلى الشاشة لمعاينتها والتأكد من أنها تبدو جيدة ولا تؤدي إلى تعطل موقعك.
قم بمعاينة موضوع الطفل قبل تنشيطه
إذا بدا أن كل شيء يعمل ، فانقر فوق الزر “تنشيط ونشر” وسيتم نشر المظهر الخاص بك.
انقر فوق زر التنشيط والنشر
في هذه المرحلة ، سيبدو المظهر الفرعي ويتصرف تمامًا مثل موضوع الأصل. بعد ذلك ، سنبدأ في تخصيصه.
سنقوم الآن بتخصيص السمة الفرعية بحيث تبدو مختلفة قليلاً عن السمة الأصلية. نقوم بذلك عن طريق إضافة كود إلى ملف style.css ، وهذا يتطلب بعض الإلمام بـ CSS .
يمكنك تبسيط العملية عن طريق نسخ وتعديل الكود الموجود من السمة الرئيسية. يمكنك العثور على هذا الرمز باستخدام Chrome أو Firefox Inspector ، أو عن طريق نسخه مباشرة من ملف style.css للسم الرئيسي.
أسهل طريقة لاكتشاف كود CSS التي تحتاج إلى تعديلها هي باستخدام أدوات المفتش التي تأتي مع Google Chrome و Firefox. تتيح لك هذه الأدوات إلقاء نظرة على HTML و CSS خلف أي عنصر في صفحة الويب.
على سبيل المثال ، إذا كنت تريد رؤية CSS المستخدم لنص المنشور ، فما عليك سوى تمرير مؤشر الماوس فوق المنشور والنقر بزر الماوس الأيمن لتحديد فحص.
انقر بزر الماوس الأيمن وحدد فحص
سيؤدي ذلك إلى تقسيم شاشة المتصفح إلى قسمين. في الجزء السفلي من الشاشة ، سترى HTML و CSS للصفحة. بناءً على إعدادات المستعرض الخاص بك ، قد يظهر HTML و CSS على يمين الشاشة بدلاً من ذلك.
سترى HTML و CSS للصفحة
أثناء تحريك الماوس فوق سطور HTML مختلفة ، سيقوم مفتش Chrome بتمييزها في النافذة العلوية. سيُظهر لك أيضًا قواعد CSS المتعلقة بالعنصر المميز.
يمكنك محاولة تحرير CSS هناك لترى كيف سيبدو. لنحاول تغيير لون خلفية الجسم إلى # fdf8ef.
قم بتغيير لون الخلفية
سترى أن لون خلفية الصفحة سيتغير ، لكن التغيير مؤقت فقط. لجعله دائمًا ، ستحتاج إلى نسخ قاعدة CSS هذه ولصقها في ملف style.css الخاص بموضوع الطفل.
body {
background-color: #fdf8ef;
}احفظ التغييرات التي أجريتها على ملف style.css ثم قم بمعاينة موقعك.
يمكنك الاستمرار في تكرار العملية لأي شيء تريد تغييره في ورقة أنماط المظهر الخاص بك. فيما يلي ورقة الأنماط الكاملة التي أنشأناها للموضوع الفرعي. لا تتردد في التجربة وتعديلها.
Theme Name: WPB Child Theme
Theme URI: https://www.wpbeginner.com/
Description: A Twenty Twenty-One child theme
Author: WPBeginner
Author URI: https://www.wpbeginner.com
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}يمكنك أيضًا نسخ بعض التعليمات البرمجية مباشرةً من ملف style.css للنسق الأصل. يمكنك بعد ذلك لصقها في ملف style.css للقالب الفرعي ثم تعديله.
هذا مفيد بشكل خاص عند استخدام Twenty-One كموضوع رئيسي لأنه يستخدم بشكل مكثف متغيرات CSS.
على سبيل المثال ، عندما عدلنا لون خلفية الصفحة أعلاه ، كان الرمز الأصلي هو:
background-color: var(--global--color-background);هنا “– global – color-background” متغير. يمكن استخدام المتغير في مواقع متعددة في جميع أنحاء الموضوع. لتغيير اللون في كل تلك الأماكن مرة واحدة ، عليك ببساطة تغيير قيمة المتغير.
تحتاج إلى الانتقال إلى / wp-content / theme / twentytwentyone في مجلد تثبيت ووردبريس الخاص بك ثم فتح ملف style.css في محرر النصوص الخاص بك. يمكنك بعد ذلك العثور على مكان تحديد الخلفية الملونة العالمية.
--global--color-background: var(--global--color-green);نكتشف أن المتغير يتم تعريفه بواسطة متغير آخر!
في الواقع ، في قسم: الجذر من style.css للنسق الأصل ، نجد مجموعة كاملة من متغيرات الألوان المحددة. هذه هي لوحة الألوان المستخدمة في نسق Twenty-One.
:root {
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
}بمجرد اختيار نظام الألوان المثالي لموقع ووردبريس الخاص بك ، ستتيح لك هذه المتغيرات تخصيص سمة طفلك بسرعة.
يمكنك ببساطة نسخ هذا الرمز ولصقه في ملف style.css الخاص بموضوع الطفل. ثم تحتاج إلى استبدال رموز الألوان بأخرى جديدة اخترتها للوحة الألوان الخاصة بك.
سيتم بعد ذلك استخدام هذه الألوان تلقائيًا في أماكن متعددة في جميع أنحاء موضوع طفلك. إنه ليس أسرع فحسب ، بل سيجعل ألوان السمة الخاصة بك أكثر اتساقًا.
كن مغامرًا. لا يجب أن يكون متغير اللون الأخضر أخضر.
يمكنك أن تفعل الشيء نفسه بالنسبة للمتغيرات الأخرى. يسرد style.css من Twenty-One متغيرات مجموعات الخطوط وأحجامها والعناوين وتباعد الأسطر والمزيد. يمكنك نسخ أي منها إلى ملف style.css الجديد حيث يمكنك تخصيصها.
كل قالب ووردبريس له تصميم مختلف. على سبيل المثال ، يحتوي نسق Twenty-One على رأس وحلقة محتوى ومنطقة عنصر واجهة مستخدم تذييل وتذييل.
واحد وعشرون موضوع تخطيط
يتم التعامل مع كل قسم من خلال ملف مختلف في مجلد واحد وعشرون. تسمى هذه الملفات قوالب .
عادة ما يتم تسمية القوالب بعد المنطقة التي يتم استخدامها من أجلها. على سبيل المثال ، عادةً ما تتم معالجة قسم التذييل بواسطة ملف footer.php ، وتتم معالجة مناطق الرأس والتنقل بواسطة ملف header.php.
قد تتم معالجة بعض المناطق ، مثل منطقة المحتوى ، بواسطة ملفات متعددة تسمى قوالب المحتوى.
إذا كنت ترغب في تعديل قالب ، فستجد الملف أولاً في مجلد النسق الأصل ونسخه إلى مجلد النسق الفرعي. بعد ذلك ، يجب عليك فتح الملف في محرر نصي وإجراء التعديلات التي تريدها.
في هذا البرنامج التعليمي ، سنقوم بنسخ ملف footer.php من مجلد النسق الرئيسي إلى مجلد القالب الفرعي. بمجرد القيام بذلك ، ستحتاج إلى فتح الملف في محرر نص عادي مثل Notepad.
على سبيل المثال ، سنقوم بإزالة رابط “Proudly powered by ووردبريس” من منطقة التذييل وإضافة إشعار حقوق النشر هناك. للقيام بذلك ، يجب حذف كل شيء بين العلامات <div class = “powered-by”>.
<div class="powered-by">
<?php
printf(
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
);
?>
</div><!-- .powered-by -->ثم تحتاج إلى لصق الكود الذي تجده أسفل تلك العلامات في المثال أدناه.
<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->بمجرد حفظ الملف وزيارة موقع ووردبريس الخاص بك ، يجب أن تكون قادرًا على رؤية إشعار حقوق النشر الجديد.
يستخدم ملف function.php في السمة كود PHP لإضافة ميزات أو تغيير الميزات الافتراضية على موقع ووردبريس. إنه بمثابة مكون إضافي لموقع ووردبريس الخاص بك والذي يتم تنشيطه تلقائيًا مع المظهر الحالي الخاص بك.
ستجد العديد من دروس ووردبريس التي تطلب منك نسخ ولصق مقتطفات التعليمات البرمجية في function.php. ولكن إذا قمت بإضافته إلى السمة الأصلية ، فسيتم استبدالها كلما قمت بتثبيت تحديث جديد للسمة.
لهذا السبب نوصي باستخدام سمة فرعية عند إضافة مقتطفات تعليمات برمجية مخصصة. في هذا البرنامج التعليمي ، سنضيف منطقة عنصر واجهة مستخدم جديدة إلى موضوعنا.
يمكننا القيام بذلك عن طريق إضافة مقتطف الشفرة هذا إلى ملف function.php الخاص بالقالب الفرعي الخاص بنا.
<?php
// Register Sidebars
function custom_sidebars() {
$args = array(
'id' => 'custom_sidebar',
'name' => __( 'Custom Widget Area', 'text_domain' ),
'description' => __( 'A custom widget area', 'text_domain' ),
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
?>بمجرد حفظ الملف ، يمكنك زيارة صفحة Appearance »Widgets بلوحة معلومات ووردبريس الخاصة بك وسترى منطقة عنصر واجهة المستخدم المخصصة الجديدة.
منطقة عنصر واجهة مستخدم مخصصة جديدة
يمكنك معرفة المزيد حول إضافة مناطق عناصر واجهة المستخدم في دليلنا حول كيفية إضافة مناطق جاهزة لعناصر واجهة المستخدم الديناميكية وأشرطة جانبية في ووردبريس .
هناك الكثير من الميزات الأخرى التي يمكنك إضافتها إلى المظهر الخاص بك باستخدام مقتطفات التعليمات البرمجية المخصصة. تحقق من هذه الحيل 25+ مفيدة للغاية لملف وظائف ووردبريس .
إذا لم تكن قد أنشأت موضوعًا فرعيًا من قبل ، فهناك فرصة جيدة لارتكاب بعض الأخطاء. فقط لا تستسلم بسرعة كبيرة. تحقق من قائمتنا لأخطاء ووردبريس الأكثر شيوعًا للعثور على حل.
أكثر الأخطاء شيوعًا التي ستراها على الأرجح هي أخطاء بناء الجملة الناتجة عن شيء فاتك في الشفرة. ستجد مساعدة في حل هذه المشكلات في دليلنا السريع حول كيفية البحث عن خطأ بناء الجملة وإصلاحه في ووردبريس .
يمكنك دائمًا البدء من جديد إذا حدث خطأ ما. على سبيل المثال ، إذا حذفت عن طريق الخطأ شيئًا ما تطلبه المظهر الرئيسي الخاص بك ، فيمكنك ببساطة حذف الملف من القالب الفرعي الخاص بك والبدء من جديد.
نأمل أن يساعدك هذا البرنامج التعليمي في تعلم كيفية إنشاء قالب ثانوي لـ ووردبريس. قد ترغب أيضًا في معرفة كيفية اختيار أفضل منشئ مواقع الويب أو التحقق من قائمة المكونات الإضافية التي يجب أن تحتوي على مكونات إضافية لتنمية موقعك.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
