اذهب إلى المحتوى
حول شغفك لإبداع حقيقي مع دورة تطوير الألعاب. اشترك الآن ×

تطوير ووردبريس للمبتدئين: بناء القوالب Themes

Mohammad Hammal

بواسطة Mohammad Hammal

 مشاركة

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

اقتباس

ملاحظة: من أجل هذا الدرس، من المهم أن تكون على معرفة بـ Html و CSS لأنهما لغتان أساسيتان من أجل العمل مع ووردبريس.

البداية

إذا كنت جاهزًا و تملك نسخة ووردبريس تم تنصيبها على خادم محلي على حاسبك الشخصي، لنبدأ و نتعرف أين مكان القوالب في ووردبريس، توجد قوالب ووردبريس عادة في المسار wp-content/themes إذا ذهبت إلى هذا المسار داخل نسخة ووردبريس المثبتة على حاسبك فستجد عدة قوالب افتراضية من ووردبريس. لنقم بإنشاء قالب ووردبريس جديد. هناك بضع خطوات سهلة للقيام بذلك:
أنشئ مجلد جديد في المجلد themes وأعطِه اسمًا مميزًا يشبه التالي my-awesome-theme. والآن في هذا المجلد قم بإنشاء ملفين باسم style.css و index.php
الآن قم بفتح ملف style.css وانسخ التالي إليه: 

/*
Theme Name: My Awesome Theme
Theme URI: https://myawesometheme.awesome
Author: Daniel Pataki
Author URI: https://danielpataki.com
Description: The theme for my awesome site
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

هذه التفاصيل ستظهر بشكل أوتوماتيكي في قسم تفاصيل القالب في شاشة Appearance->Themes في لوحة تحكم ووردبريس. إذا قمت بزيارة قسم Appearance->Themes سوف ترى قالبك بين القوالب المعروضة وأيضًا يمكنك تفعيله. لكن هذا القالب لا يملك أي تعليمات برمجية لذلك سترى شاشة بيضاء عند تفعيله وسنضيف التعليمات البرمجية قريبًا.

img-1.png

كيف تعمل ملفات قوالب ووردبريس

تعمل قوالب ووردبريس باستخدام صفحات ووردبريس الافتراضية. لأنها بذلك تقلل عدد الملفات التي نحتاجها لكل موقع مقارنة مع html التي تتطلب بناء صفحة مكررة كثيرة. لكن منذ ظهور php ومعالجتها للملفات على الخادم(server) يمكننا أن نوفر مساحة كبيرة في الملفات فمن الممكن أن يكون ملف واحد مسؤول عن عرض المقال المنشور أو عرض الصفحة ويمكن ل php أن تعرف ماذا نريد وبناء على ذلك تستبدل المعلومات في هذا الملف. ها هو مثال لنرى كيف يعمل ذلك: 

<!DOCTYPE html>
<html>
<head>
  <title>A single post template</title>
</head>
<body>

  <div id="site-header">
    <h1>Welcome to my site</h1>
    <nav>
      <ul>
        <li><a href=''>Home</a></li>  
        <li><a href=''>About</a></li>  
        <li><a href=''>Contact</a></li>  
      </ul>  
    </nav>
  </div>

  <div id="article">
    <h2 class="article-title"><?php the_title() ?></h2>
    <div class="article-content"><?php the_content() ?></div>
    <div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?></div>
  </div>

  <div id="site-footer">
    <nav>
      <ul>
        <li><a href=''>Home</a></li>  
        <li><a href=''>About</a></li>  
        <li><a href=''>Contact</a></li>  
      </ul>  
    </nav>
    <div id="copyright">&copy; Daniel Pataki</div>
  </div>

</body>
</html>

لاحظ أنك لا ترى محتوى ثابت مكتوب في هذه الملف، بدلًا من أن ترى عنوان المقال سترى دالة ()the_title و هي مسؤولة عن إخراج نص العنوان. هذه الدالة تحدد أي مقال تم طلبه حاليًا من خلال رابط الصفحة وتجلب المعلومات المناسبة من قاعدة البيانات لعرضها. وبذلك قمنا بعمل ملف لأي مقال في الموقع، وتأخذ ووردبريس هذه المرحلة إلى مستوى آخر وتقوم بفصل رأس وتذييل الموقع ووضعها في ملفات منفصلة واستدعائها عندما نريدها وليست نسخ رأس وتذييل الموقع كل مرة نحتاجهم فيها: 

<?php get_header() ?>

<div id="article">
  <h2 class="article-title"><?php the_title() ?></h2>
  <div class="article-content"><?php the_content() ?></div>
  <div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?></div>
</div>

<?php get_sidebar() ?>

<?php get_footer() ?>

كيف تعمل قوالب ووردبريس

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

  • الصفحات الأرشيفية مثل (التصنيفات، الوسوم، أرشيفات الوسوم، الناشرين في الموقع)
  • الصفحات الواحدة (المقال الواحد، الصفحة الواحدة، نوع المقال)
  • الصفحة الرئيسية وصفحة كل المقالات
  • صفحة الخطأ
  • صفحة نتائج البحث

تسمى هرمية لأن ووردبريس تبحث عن مجموعة من الملفات وتعرض الذي له هرمية أعلى. لنأخذ مثلًا صفحة المؤلف أولاً ووردبريس تبحث عن صفحة باسم هذه المؤلف إذا وجدتها سوف تقوم باستخدامها، لكن إن لم تجدها سوف تقوم بالبحث عن ملف برقم المستخدم وإذا لم تجدها ستتابع البحث عن ملف باسم author.php وإن لم تجده ايضًا ستبحث عن achive.php وإذا فشلت كل المحاولات السابقة سوف تعرض سوف تستخدم ملف index.php والذي هو حتمًا موجود لأنه مطلوب لإنشاء القالب. لاحظ أن ووردبريس تبدأ مع الملفات الخاصة ثم تقوم بالتعميم. وهذا أفضل لأنه يمكنك إنشاء ملف واحد من أجل أن يقوم باستخدامه لعرض المستخدم وهو author.php ولكن ربما تريد عمل ملف خاص لأحد المستخدمين وبذلك يمكنك استخدام اسم المستخدم مثال author-danielpataki.php.

لنقم ببناء قالب

عند بناء قالب جديد، فمن الأفضل بناء الأساسيات التي سأحتاجها في كل الصفحات. مثل أقسام رأس الموقع(header) وتذييل الموقع(footer).
يجب أن يكون ما زال لديك ملفي index.php و style.css اللذان قمنا بإنشائهما، لذا لتبدأ.

بناء الأساسيات

عادة أقوم بعمل صورة للقالب كي يتم عرضه في لوحة تحكم ووردبريس في تفاصيل القالب. هذ ليس مطلوبًا بشدة عند بناء قالب لكنه يعطيني انطلاقة جيدة وإلهام لما سيكون عليه القالب إذا كان لديك صورة للتصميم فمن الأفضل أن تضعها، أو يمكنك الاستعانة بموقع Unsplash. عندما تحصل على صورة تعجبك، قم بقصها لتصبح بعرض 880px وبطول 660px، قم بتسميتها screenshot.png وضعها في مجلد القالب إذا أردت صورة بسرعة فيمكنك الاستعانة بهذه الصورة التي قم بعملها وتنزيلها من هنا.

img-2.png

الخطوة القادمة هي كتابة تعليمات html الأساسية التي ستظهر في كل الصفحات مثل عنصر . لنبدأ بإنشاء ملف header.php داخل هذا الملف سنقوم بلصق تعليمات html كالتالي: 

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

الآن سنقوم بإنشاء ملف footer.php الذي سيحتوي وسوم الإغلاق للوسوم المفتوحة في ملف header.php :
<?php wp_footer() ?>
</body>
</html>

يجب أن أشير إلى دالتين هامتين و هما ()wp_head و ()wp_footer . عندما تقوم بإنشاء أي قالب يجب وضع ()wp_head مباشرة قبل إغلاق وسم <head> و دالة ()wp_footer مباشرة قبل إغلاق وسم <body> لأن هذا يساعد ووردبريس و الإضافات التي تنصبها على موقعك بوضع روابط ملفاتهم الخاصة هنا. الآن لنعد إلى ملف index.php إذا قمت بزيارة موقعك فستجد صفحة فارغة. هذا لأن ملف index.php فارغ ولم تقم باستعمال ملفات header.php و footer.php بعد.
قم بإضافة التعليمات التالية إلى ملف index.php: 

<?php get_header() ?>

My Awesome Theme

<?php get_footer() ?>

إذا زرت الصفحة مجددًا فيجب أن ترى عبارة "My Awesome Theme" وإذا اطلعت على الشيفرة المصدرية للصفحة فستجد الكثير من الأشياء هناك وليس عليك القلق بشأنها في الوقت الحالي. والآن من المؤكد بأنك ترغب بإضافة تنسيقات بما أن ملف style.css لا يتم استدعائه بشكل تلقائي، وربما تفكر بإضافة ملف style.css كما كنت تفعل عندما تصميم مواقع html ولكن في ورردبريس لا يجب عليك فعل ذلك أبدًا دع هذا الأمر لووردبريس. أنشئ ملف functions.php وأضف التعليمات التالية: 

<?php
add_action( 'wp_enqueue_scripts', 'mat_assets' );
function mat_assets() {
    wp_enqueue_style( 'my-awesome-theme', get_stylesheet_uri() );
}

التعليمات في ملف functions.php تخبر ووردبريس عن ملفات css الخاصة بك و بعدها تقوم ووردبريس باستدعاء ملفات في مكان وضعك لدالة ()wp_head و هذه هي وظيفة دالة ()wp_head أن تستدعي ملفاتك و بعض ملفات ووردبريس في رأس الموقع. الآن يمكنك تجربة وضع بعض التعليمات في ملف style.css ورؤية النتيجة مثل: 

body {background:red}

img-3.jpg

قبل المتابعة لنضف بعض التعليمات البسيطة إلى ملفاتنا لتصبح أفضل وأجمل:
في ملف header.php: 

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<div id="site-header">
    <h1><?php bloginfo('title') ?></h1>
</div>

<div id='site-content'>

في ملف footer.php: 

</div> <!-- site content -->

<div id='site-footer'>
<p>&copy; My Awesome Theme</p>
</div>

<?php wp_footer() ?>
</body>
</html>

في ملف style.css: 

/*
Theme Name: My Awesome Theme
Theme URI: https://myawesometheme.awesome
Author: Daniel Pataki
Author URI: https://danielpataki.com
Description: The theme for my awesome site
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


html {
    height: 100%;
    background:#444;
    font-family: "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5em;
}

#site-header {
    text-align: center;
}

#site-header h1 {
    font-size:32px;
    color: #ffffff;
    font-weight: 300;
    letter-spacing: 1px;
}


#site-content {
    max-width:625px;
    background: #fff;
    margin: 0 auto;
    padding: 22px;
    border-radius:5px;
}


#site-footer {
    color: #fff;
    text-align:center;
    font-size:12px;
    text-transform: uppercase;
}

الآن كل صفحة ستقوم بزيارتها في موقع ستبدو نفسها لأننا فقط نملك index.php والذي سترجع إليه ووردبريس عند عدم وجود أي صفحات.

فهم حلقة ووردبريس

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

<?php if( have_posts() ) : ?>
    <?php while( have_posts() ) : the_post() ?>
        <h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
        <div class="content">
            <?php the_content() ?>
        </div>
    <?php endwhile ?>
<?php else : ?>
    <p>Oh No, there are no posts!</p>
<?php endif ?>

عندما تنسخ هذه التعليمات وتزور صفحتك الرئيسية ستكتشف قوة ووردبريس وسحر قوالبها، سوف ترى قائمة مقالاتك التي قمت بإضافتها في لوحة تحكم ووردبريس. إذا قمت بالضغط على عنوان المقال سوف تذهب إلى صفحة تعرض لك هذا المقال بالرغم من أنك لم تقم بعمل صفحة للمقال الواحد. لنحلل التعليمات البرمجية ونرى كيف تعمل. كل هذا يبدأ مع عبارة if التي تتحقق من قيمة دالة have_posts(). هذه الدالة ستعيد قيمة true إذا كان هناك مقالات وقيمة false إذا لم يكن هناك مقالات لعرضها. كما ترى من عبارة else إذا لم يكن هناك مقالات فإننا نعرض رسالة للمستخدم بأنه ليس هناك مقالات. إذا كان هناك مقالات فإننا ننشئ حلقة while والتي لن تتوقف عن تنفيذ التعليمات التي بداخلها ما دامت دالة ()have_posts ترجع قيمة true. الدالة الأولى التي نستخدمها هي دالة ()the_post والتي تقوم بإعداد بعض البيانات لنا وتكمل الحلقة بعد ذلك، إذا كنا قد وصلنا للمقال الأخير هذا يعني أن دالة have_posts() ستعيد لنا false في المرة القادمة وبذلك تتوقف الحلقة و يتم تنفيذ التعليمات البرمجية التالية إذا كان هناك تعليمات باقية. عند عرض المقال، قمت بإضافة العنوان والمحتوى الكامل للمقال. لقد قمت باستخدام دالة ()the_permalink للحصول على رابط المقال، دالة ()the_title لعرض العنوان ودالة ()the_content لعرض محتوى المقال كاملًا. هذه الدوال تستخدم داخل حلقات ووردبريس وسوف تحدد المقال المطلوب كما هو متوقع. هكذا يبدو موقعي الآن:

img-4.jpg

من الآن وصاعدًا عرض المقال بطرق مختلفة هي مسألة معرفة الدوال التي تستخدمها ووردبريس وإضافة بعض تعليمات CSS لجعل قالبك رائع، إليك بعض الدوال المفيدة التي تساعدك في عرض التصنيفات، الوسوم، تاريخ المقالات وأكثر من ذلك.

القوالب وعبارة if

ماذا تفعل إذا أردت عرض مقتطف من المقالات في الصفحة الرئيسية وكامل المقال في حال عرض المقال الواحد؟ في هذه الحالة لديك خيارين استخدام الدوال الشرطية التي توفرها ووردبريس أو عمل ملف قالب جديد. الدوال الشرطية التي توفرها ووردبريس تستخدم للتحقق من أشياء عديدة، على سبيل المثال إذا أردت معرفة إذا كنت تعرض مقال واحد أو عدة مقالات، إليك اللائحة الكاملة لهذه الدوال على موقع ووردبريس بمساعدة دالة ()is_singular يمكننا فعل التالي: 

<?php get_header() ?>

<?php if( have_posts() ) : ?>
    <?php while( have_posts() ) : the_post() ?>
        <h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
        <div class="content">
            <?php if( is_singular() ) : ?>
                <?php the_content() ?>
            <?php else : ?>
                <?php the_excerpt() ?>
            <?php endif ?>
        </div>
    <?php endwhile ?>
<?php else : ?>
    <p>Oh No, there are no posts!</p>
<?php endif ?>

<?php get_footer() ?>

الحل الآخر هو استخدام ملفين منفصلين index.php لعرض مقتطفات من المقالات وملف single.php لعرض المقال كاملًا. من المؤكد أنك تسأل أي طريقة هي الأفضل؟ ليس هناك إجابة واضحة لهذا السؤال لأنه يعتمد بالدرجة الأولى على ما تريد إنجازه. في الواقع، عرض جميع المقالات وعرض المقالة الواحدة مختلف بما يكفي لعمل ملفين منفصلين، ولكن هناك بعض القوالب التي تطبق الطريقتين. وبعض القوالب تذهب أبعد من ذلك وتقوم بإنشاء ملف خاص بالحلقة فقط. لأن هذا سيجعل التعليمات نفسها تستخدم من قبل جميع الصفحات بدلًا من نسخ الحلقة في كل مكان نريد تواجد الحلقة فيه. لنلقي نظرة على ملف index.php المعدل: 

<?php get_header() ?>

<?php 
    if( have_posts() ) {
        while( have_posts() ) { 
            the_post();
            get_template_part( 'template-parts/content', '' );
        }
    }
    else {
        get_template_part( 'template-parts/content', 'none' );

    }
?>

<?php get_footer() ?>

قمت بوضع كل محتوى المقال في ملف مختلف. دالة ()get_template_part تجلب المحتوى من ملف وتجمع الوسيط الثاني مع الأول بإضافة “-” للمسار. في حالة الاستدعاء الثاني داخل عبارة else الدالة ستحاول استدعاء ملف template-parts/content-none.php، في الاستدعاء الأول لهذه الدالة تركت الوسيط الثاني فارغًا وهذا سيستدعي template-parts/content.php. في ملف single.php، سأضيف نفس التعليمات ولكن سأضيف كلمة single للوسيط الثاني من دالة ()get_template_part .
أخيرًا لنقم بعمل مجلد template-parts وبداخله 3 ملفات: content.php و content-single.php وcontent.php وأقوم بنسخ تعليمات الحلقة المناسبة لكل ملف على سبيل المثال ملف content.php سيبدو كالتالي: 

<h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
<div class="content">
    <?php the_excerpt() ?>
</div>

غطينا في هذا الدرس ما يكفي لعمل قالب بسيط، وهذا سيمكّنك من عرض مقالاتك بالطريقة التي تعجبك بتنسيقاتك الخاصة.

ترجمة -وبتصرّف- للمقال WordPress Development for Beginners: Building Themes لصاحبه Daniel Pataki

  • أعجبني 1
 مشاركة
اذهب الى مقالات البرمجة

تفاعل الأعضاء

أفضل التعليقات



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×

×
×
  • أضف...