كيفية إنشاء قالب مخصص لـ WordPress

يحتل WordPress نسبة كبيرة من مواقع الويب في العالم ، ويشكل 37٪ من جميع المواقع الموجودة على الإنترنت حاليًا. في حين أن هناك العديد من الأسباب والعوامل لهذا النجاح ، فإن أحد الأسباب الرئيسية هو شعبية الميزات المتاحة لجميع المستخدمين. المكونات الإضافية والسمات والمنشورات والصفحات والفئات والتصنيفات وأدوار المستخدم ومعالجة الوسائط على سبيل المثال لا الحصر. لتحقيق أقصى استفادة من WordPress ، يوصى المستخدمين بدراسة وتعلم كيفية استخدام كل هذه الميزات. في هذه المدونة ، سنركز على سمات WordPress ومناقشتها وسنوجهك عبر الأساسيات المطلوبة حول كيفية إنشاء قالب مخصص لـ WordPress.

ما هو موضوع مخصص؟

يتم تشغيل كل شيء على الواجهة الأمامية لموقعك والتحكم فيه باستخدام شيء يسمى "موضوع". موضوع موقع الويب هو المسؤول عن التصميم والوظيفة المحددة للموقع. يمكنك التحقق من مستودع قوالب WordPress أو Themeforest للحصول على أمثلة للموضوع ؛ ستجد هنا آلاف السمات المدرجة لتستكشفها وتنزيلها.

على الرغم من أن سمات WordPress التي تم إنشاؤها رائعة ، إذا كانت لديك القدرة والحاجة ، فقد ترغب أيضًا في إنشاء قالب مخصص خاص بك لعميل أو لنفسك أو لتقديمه إلى الأسواق بقصد بيعه. عند إنشاء موضوع تجاري ، ستحتاج إلى اتباع إرشادات السوق لمعايير الترميز ، وهيكل الملفات والمجلدات ، وما إلى ذلك. يمكنك العثور على مزيد من التفاصيل بشأن هذه الإرشادات على مواقع الأسواق الإلكترونية .

في هذه المدونة ، سنجري برنامجًا تعليميًا لنعرض لك نظرة عامة أساسية حول كيفية إنشاء سمة WordPress الخاصة بك من خلال تغطية جميع الأساسيات والخطوات المرتبطة بالعملية.

قم بإنشاء قالب مخصص لـ WordPress

تم تصميم سمات WordPress باستخدام ملفات القوالب والبرامج النصية والأنماط والصور وما إلى ذلك. للمتابعة ، يجب أن يكون لديك معرفة عملية بـ PHP و HTML و CSS ، وهي مطلوبة لإنشاء سمة مخصصة. يمكن أن يكون فهم JavaScript أيضًا ميزة إضافية.

للبدء ، سنقوم أولاً بتسمية السمة "Updraft". قم بإنشاء مجلد يسمى "Updraft" داخل wp-content / theme . ضمن مجلد "Updraft" هذا ، ستكتب رمزًا مرتبطًا بالموضوع ، وتخزين الملفات ، والصور ، والخطوط ، وما إلى ذلك.

الملفات الرئيسية لموضوع WordPress المخصص هي:

• style.css
• index.php
• وظائف. php

سيكون style.css هو ملف ورقة الأنماط الرئيسي ويمكنك إضافة كل CSS في هذا الملف. تذكر أنه يجب عليك تضمين رأس معلومات حول الموضوع. يجب أن يبدو العنوان مشابهًا للتنسيق أدناه ويكون في الجزء العلوي من style.css .

 [الشفرة]
/ *
اسم الموضوع: Updraft
عنوان URI للموضوع: https://updraftplus.com
المؤلف: UpdraftPlus
عنوان URI للمؤلف: https://updraftplus.com
الوصف: السمة المخصصة المصممة لموقع الويب.
الإصدار: 1.0.0
الترخيص: رخصة جنو العمومية الإصدار 2 أو أحدث
URI للترخيص: http://www.gnu.org/licenses/gpl-2.0.html
مجال النص: updraft
* /
[/الشفرة]

بعد ذلك ، انتقل إلى المظهر >> المظاهر ، حيث سترى قالبك مدرجًا. قم بتنشيطه. عندما تتحقق من الواجهة الأمامية لموقعك ، ستظهر شاشة فارغة - لأننا لم نضف أي شيء إلى السمة حتى الآن ..

تذكر تخزين الصور والنصوص والأنماط الخاصة بك في دليل السمات الخاص بك. يشير دليل السمة إلى مجلد "wp-content / theme / Updraft". تأكد من إبقائها منظمة باستخدام بنية مجلد جيدة ، وإنشاء مجلدات محددة للصور والبرامج النصية والأنماط ؛ انسخ الملفات إلى الدليل المعني.

ملف الوظائف

يعد ملف functions.php هو الملف الذي يمكنك من خلاله إضافة رمز لأغراض مختلفة. يتم تحميل هذا الملف تلقائيًا أثناء تهيئة WordPress ، مع تنفيذ الكود المكتوب فيه تلقائيًا.

عادةً ما يتم تنفيذ العمليات التالية في ملف functions.php بهذا الترتيب:

• قم بإدراج أوراق أنماط السمات والنصوص (أضف ملفات JS و CSS إلى موقع الويب).
• تمكين الأشرطة الجانبية وقوائم التنقل والصور المصغرة وما إلى ذلك.
• تحديد الوظائف المستخدمة في جميع أنحاء التطبيق.
• إلخ.

يمكن للمستخدم إضافة أنماطه ونصوصه من ملف jobs.php على النحو التالي. يرجى الاطلاع على الرابط التالي لمزيد من الوثائق .

 [الشفرة]
الوظيفة include_js_css () {
wp_register_style ("bootstrap"، get_stylesheet_directory_uri ().
"/styles/bootstrap.min.css"، array ()، false، "all")؛
wp_enqueue_style ("التمهيد") ؛
wp_register_script ('bootstrap' ، get_stylesheet_directory_uri ().
'/scripts/bootstrap.min.js'، array ()، false، true)؛
wp_enqueue_script ('bootstrap') ،
}
add_action ('wp_enqueue_scripts'، 'include_js_css') ؛
[/الشفرة]

تعطي الوظيفة get_stylesheet_directory_uri () مسارًا نسبيًا لدليل السمة النشط. يمكن رؤية باقي الكود على أنه مسار الأصول.

وبالمثل ، لإضافة قوائم التنقل ، نشر الصور المصغرة:

 [الشفرة]
وظيفة updraft_theme_setup () {
add_theme_support ("ما بعد الصور المصغرة") ؛
register_nav_menus (
مجموعة مصفوفة(
"أساسي" => __ ("القائمة الأساسية") ،
'footer1 =' => __ ('Footer Menu') ،
'shop' => __ ('قائمة صفحة التسوق') ،
)
) ؛
}
add_action ('after_setup_theme'، 'updraft_theme_setup') ؛
[/الشفرة]

بعد ذلك ، انتقل إلى لوحة تحكم WordPress وأضف منشورًا أو صفحة. يجب أن تشاهد قسم "الصورة المميزة". بالإضافة إلى ذلك ، ضمن المظهر >> القوائم ، ستجد القائمة الأساسية وقائمة التذييل ضمن إدارة المواقع .

هذه ليست سوى عدد قليل من الميزات الأساسية التي يمكنك تغطيتها أثناء استخدام ملف "الوظيفة". هناك الكثير الذي يمكنك إضافته في هذا الملف إذا كنت ترغب في ذلك.

ملفات القوالب

عند إنشاء السمة الخاصة بك ، يمكن استخدام ملفات القوالب للتأثير على تخطيط وتصميم أجزاء مختلفة من موقع الويب الخاص بك. على سبيل المثال ، يمكنك استخدام قالب header.php لإنشاء رأس أو قالب comments.php لتضمين التعليقات على موقعك. ملفات القوالب لها امتداد .php . نظرًا لأنها ملفات PHP ، يتم إخراج جميع الصفحات بتنسيق HTML.

باستخدام القوالب ، يمكن للمطورين توزيع التعليمات البرمجية بين ملفات متعددة. المدرجة أدناه هي بعض الملفات المعنية.

• index.php : النموذج الرئيسي. يجب أن يكون هذا الملف مسؤولاً عن قائمة النشر. عندما تقوم بتعيين صفحة المنشورات من الإعدادات >> القراءات ، يتم تنفيذ هذا القالب.
• page.php : هذا القالب مسؤول عن عرض صفحاتك. يمكن تجاوز هذا الإعداد من خلال تعيين قالب صفحة مخصص لصفحات فردية.
• single.php : يستخدم عند الاستعلام عن منشور واحد.
• header.php : أضف جزء الرأس الخاص بك في هذا القالب.
• footer.php : أضف جزء التذييل الخاص بك في هذا القالب.
• sidebar.php : إضافة أدوات في هذا القالب.

احصل على قائمة بجميع ملفات القوالب المتوفرة هنا .

قوالب الصفحة المخصصة

بشكل افتراضي ، يتم عرض جميع صفحاتك من خلال نموذج page.php . ولكن من الناحية العملية ، يتعين عليك أحيانًا عرض تدفقات منفصلة على صفحات مختلفة. في هذا السيناريو ، يوصى باستخدام قوة قوالب الصفحات المخصصة.

على سبيل المثال ، إذا كانت لديك صفحة "Career" وتريد إضافة الرمز الخاص بك إلى هذه الصفحة ؛ لتحقيق ذلك ، ستحتاج إلى إنشاء ملف Career.php في دليل السمات ووضع التعليق أدناه في أعلى الملف.

 [الشفرة]
<؟ php
/ *
اسم النموذج: مهنة
* /
[/الشفرة]

بعد ذلك ، انتقل إلى قسم تحرير الصفحة وقم بتعيين نموذج "الوظيفة" هذا من أسفل مربع سمات الصفحة .

الآن عندما تزور صفحة Career - سيتم تنفيذ الكود من Career.php .

الملف الاساسي

سيكون لموقع الويب الخاص بك رأس مشترك في جميع الصفحات. يمكنك وضع هذا الرأس المشترك في header.php . سيكون رمز الرأس شيئًا مثل هذا:

 [الشفرة]
<! DOCTYPE html>
<html <؟ php language_attributes ()؛ ؟ >>
<head>
<meta charset = "<؟ php bloginfo ('charset')؛؟>">
<meta name = "viewport" content = "width = device-width، initial-scale = 1.0" />
<؟ php wp_head ()؛ ؟>
</head>
<body <؟ php body_class () ؛ ؟ >>
<؟ php wp_body_open () ؛ ؟>
<! - قائمتك ->
[/الشفرة]

في الكود أعلاه ، ستلاحظ أننا استخدمنا بعض الوظائف المتاحة في WordPress.

• wp_head () : تُدرج هذه الطريقة العناصر المهمة في المستند - على سبيل المثال ، البرامج النصية والأنماط والعلامات الوصفية.
• body_class () : سيضيف هذا فئات مختلفة إلى عنصر الجسم.
• wp_body_open () : يستخدم لإدخال الكود مباشرة بعد فتح علامة الجسم. مثال على ذلك سيكون - برنامج Google Analytics النصي.

يمكن إضافة القوائم ديناميكيًا من خلال وظيفة wp_nav_menu () . بافتراض أنك قمت أولاً بإنشاء قائمة ضمن المظهر >> القوائم وتعيين موقع "أساسي" لها. يولد الكود أدناه عناصر القائمة ديناميكيًا.

 [الشفرة]
<؟ php
wp_nav_menu (
مجموعة مصفوفة(
'theme_location' => 'أساسي' ،
'container_class' => 'menus' ،
)
) ؛
؟>
[/الشفرة]

بمجرد تعيين ملف الرأس ، استخدم وظيفة get_header () لتضمين هذا الملف في القوالب الأخرى.

ملف التذييل

على غرار ملف الرأس ، سيظهر الكود الشائع للتذييل داخل قالب footer.php .

 [الشفرة]
<! - عناصر التذييل ->
<؟ php wp_footer ()؛ ؟>
</body>
</html>
[/الشفرة]

هنا ، استخدم wp_footer () الذي يقوم بإدراج العناصر ، وخاصة البرامج النصية ، في هذا الموقع. سيؤدي استخدام get_footer () إلى تضمين محتويات هذا الملف في أماكن أخرى.

ملف الشريط الجانبي

الشريط الجانبي هو عمود رأسي يستخدم لعرض معلومات على موقعك لا تظهر ضمن المحتوى الرئيسي. قد تتضمن المقالات الشائعة ، لافتات الإعلانات ، نموذج إرسال الرسائل الإخبارية ، إلخ. تحتوي الأشرطة الجانبية على عناصر واجهة مستخدم يمكن للمسؤول تخصيصها. سيتضمن نموذج sidebar.php أدوات موقعك.

في هذا المثال ، سننشئ شريطًا جانبيًا أساسيًا عن طريق إضافة الكود أدناه إلى ملف function.php .

 [الشفرة]
وظيفة updraft_widgets_init () {
register_sidebar (
مجموعة مصفوفة(
'name' => esc_html __ (الشريط الجانبي للصفحة الرئيسية) ،
'id' => 'sidebar-1' ،
'description' => esc_html __ ('أضف أدوات هنا لتظهر في الشريط الجانبي.') ،
'before_widget' => '<section class = "widget">' ،
'after_widget' => '</section>'،
'before_title' => '<h2 class = "widget-title">'،
'after_title' => '</h2>'،
)
) ؛
}
add_action ('widgets_init'، 'updraft_widgets_init') ؛
[/الشفرة]

بعد ذلك ، انتقل إلى المظهر >> الحاجيات . هنا سوف تجد الشريط الجانبي أعلاه. في هذا المثال ، سنضيف بعض الأدوات إلى هذا الشريط الجانبي. لإضافة هذا الشريط الجانبي إلى الواجهة الأمامية ، أضف الكود التالي في sidebar.php.

 [الشفرة]
<div class = "sidebar">
<؟ php
إذا (is_active_sidebar ('sidebar-1')) {
dynamic_sidebar ('sidebar-1') ؛
}
؟>
</div>
[/الشفرة]

أخيرًا ، تذكر تسمية الطريقة " get_sidebar ()" بحيث يمكنك بسهولة تضمين الشريط الجانبي في أي مكان في أي صفحات أخرى عند الحاجة.

تقديم الصفحات والمشاركات

كما ذكرنا سابقًا ، يتم عرض جميع صفحات WordPress وتنفيذها باستخدام الكود الذي كتبته في ملف page.php ، باستثناء الصفحات التي تحتوي على قالب صفحة مخصص. الكود أدناه هو مثال سيعرض صفحة تعرض عنوان الصفحة والوصف والصورة المميزة.

 [الشفرة]
<؟ php
get_header () ،
؟>
<div class = "content-area">
<main class = "site-main">
<؟ php
بينما (have_posts ()):
المنشور()؛
؟>
<؟ php
إذا (has_post_thumbnail ()):
the_post_thumbnail () ،
إنهاء إذا؛
؟>
<header class = "entry-header">
<؟ php the_title ()؛ ؟>
</header>
<div class = "entry-content">
<؟ php the_content ()؛ ؟>
</div>
<؟ php
في غضون ذلك
؟>
</main>
</div>
<؟ php
get_footer () ،
[/الشفرة]

سيظهر رمز مشابه داخل ملف single.php لعرض معلومات المنشور. لتقديم قائمة المنشورات بشكل صحيح ( index.php الخاص بك ) ، بالإضافة إلى الطرق المذكورة أعلاه - قد ترغب أيضًا في استخدام ما يلي:

• the_catgeory (): يعرض قائمة الفئات لمنشور.
• the_permalink (): يعرض الرابط الثابت للمنشور الحالي.
• the_excerpt (): اعرض مقتطفات التدوينة.

I18n لموضوعات WordPress المخصصة

أثناء إنشاء قالب مخصص ، حاول أن تتذكر أنه يجب تطويره بطريقة تدعم التدويل. من خلال القيام بذلك ، فإنه يجعل من الممكن ترجمة المظهر الخاص بك بسهولة إلى لغات أخرى.

لإضافة دعم I18n ، تذكر استخدام مجال نصي يمكنك تحليل الملفات المصدر منه واستخراج السلاسل القابلة للترجمة منه. في هذا المثال ، نستخدم المجال النصي "Updraft" ، ولكن يمكنك اختيار أي معرف فريد. يمكننا تحديد مجال النص على النحو التالي.

 [الشفرة]
وظيفة i18n_setup () {
load_theme_textdomain ('updraft'، get_stylesheet_directory (). '/ languages') ؛
}
add_action ('after_setup_theme'، 'i18n_setup') ؛
[/الشفرة]

الآن عندما تستخدم سلاسل ثابتة في ملفات السمات الخاصة بك ، قم بلفها داخل وظائف __ () أو _e () .

 [الشفرة]
<h2> <؟ php _e ('First Name'، 'updraft)؛ ؟> </h2>
<؟ php echo __ ('User Email'، 'updraft')؛ ؟>
[/الشفرة]

هناك أدوات خاصة متاحة مثل POEDIT التي تساعد في إنشاء ملفات اللغة المترجمة. يرجى الرجوع إلى هذه المدونة لمزيد من المعلومات.

لقد غطت هذه المدونة أساسيات إنشاء قوالب مخصصة لـ WordPress. ومع ذلك ، فهو موضوع واسع يتطلب الكثير من الوقت والصبر. فيما يلي بعض الموارد المفيدة التي يجب أن تتعرف عليها والتي ستساعدك على البدء في إنشاء قوالب WordPress الخاصة بك ..

• حلقة WordPress
• علامات القالب
• صفحات الفئات
• Function_Reference
• العلامة الشرطية
• معايير ترميز ووردبريس

عند إنشاء قالب جديد لموقع WordPress الخاص بك ، تذكر أنك ستحتاج إلى نسخه احتياطيًا بعد كل تغيير أو المخاطرة بفقدان كل عملك. استخدم UpdraftPlus - البرنامج المساعد الرائد والأكثر موثوقية للنسخ الاحتياطي والاستعادة والاستنساخ في WordPress في العالم.

ظهر المنشور كيفية إنشاء سمة مخصصة لـ WordPress أولاً على UpdraftPlus. UpdraftPlus - البرنامج المساعد للنسخ الاحتياطي والاستعادة والترحيل لـ WordPress.