في هاته المقالة البسيطة ستكتشفُ معي كيف تعمَل قوالب الووردبريس و طريقة التعديل على ملفات القوالب كاملة.

كما تعلم قارئي العزيز فالووردبرس يعُتَبَرُ من أقوى أنظمة إدارة المحتوى في العالم نظراً لكفاءته و سهولة استعماله، و هذا راجعٌ للتطوير المستمر الذي تعمل شركة Automattic على عمله في كل إصدار من إصدارات الووردبرس.

بالإضافة لهذا فالووردبرس لم يعُد فقط منصة للتدوين بل أصبح منصة يُمكن الإعتماد عليها في كل أنواع مشاريع الويب نظراً للإضافة التي تم إضافتها في الإصدار 3.0 و التي تُمكّن المطورين من إضافة أنواع أخرى من المحتوى بدل الصفحات و المقالات، كالدروس و الدورات في مجتمع تقانة =)

من نقاط القوة أيضاً نجد أن الووردبرس يقدّم مرونة جد متقدمة فيما يخص تطوير القوالب عكس باقي أنظمة إدارة المحتوى (جوملا، …)

فبإمكانك بعد تطوير القالب الخاص بك العمل به في الإصدارات القادمة للوردبرس دون أن تتأثر كفاءة الموقع، و بالطبع سيتوجب عليك تطوير الكود و الدوال في موقع لتتوافق مع تطورات الويب في العالم =)

هدفي من هذا المقال أن تتعرّف على أساسيات قوالب الووردبرس و كيفية عمل قالب خاص بك من الصفر ;) طبعاً سنبدأ بالأساسيات مروراً بالفروع إلى أن نصل للهدف و فلسلفة التصميم الخاصة بالقوالب هيّا بنا !

 0. مكونات قالب الووردبرس

كما تعلم فالقوالب الخاصة بالووردبرس تتميّز ببساطة القراءة و التعديل عليها أيضاً، و المميّز في هاته القوالب أن لها لغة سهلة الفهم سنتعرّف عليها الآن.

أسماء الملفات

يتوفر كل قالب ووردبرس على ملفات برمجية PHP و أخرى متعلقة بالتصميم CSS و خصوصاً ملف style.css الذي يحمل تعريف القالب و مصممه و العديد من المعلومات المتعلقة بالقالب الأب و الذي سنتطرّق له لاحقاً.

أما عن الملفات البرمجية نجد في الصدارة الملفات التالية :

[table width =”100%” style =”table-bordered” responsive =”false”]
[table_head]
[th_column]إسم الملف[/th_column]

[th_column]التعريف[/th_column]

[/table_head]
[table_body]
[table_row]
[row_column]

index.php

[/row_column]
[row_column]

المحتوى الخاص بالصفحة الرئيسية للموقع و الذي يُمكن تعديله بملف أو صفحة أخرى.

[/row_column]
[/table_row]
[table_row]
[row_column]

functions.php

[/row_column]
[row_column]

يحتوي على الدوال المتعلقة بالقالب كدوال عرض التعليقات و دوال تتعلق بخاصيات الموقع و العديد من الدوال الأخرى إضافية.

[/row_column]
[/table_row]

[table_row]

[row_column]

header.php

[/row_column]
[row_column]

يحتوي على الجزء العلوي (الرأس) من الموقع و الذي عادة ما نجد فيه الشعار و القائمة الرئيسية التي تظهر أعلى الموقع.

[/row_column]
[/table_row]

[table_row]

[row_column]

sidebar.php

[/row_column]
[row_column]

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

[/row_column]

[/table_row]

[table_row]

[row_column]

footer

[/row_column]
[row_column]

يتوفر على المحتوى الذي يظهر أسفل كل صفحات الموقع.

[/row_column]

[/table_row]

[table_row]

[row_column]

page.php

[/row_column]
[row_column]

يحتوى على واجهة كل صفحات الموقع أو المدونة.

[/row_column]
[/table_row]

[table_row]

[row_column]

single.php

[/row_column]
[row_column]

الجزء المتعلّق بمقالة على موقعك.

[/row_column]
[/table_row]

[table_row]

[row_column]

archive.php

[/row_column]
[row_column]

محتوى أرشيف الموقع (كل مقالات الموقع) و التصنيفات.

[/row_column]
[/table_row]

[/table_body]
[/table]

 

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

من الأمور الأكثر تعقيداً بالنسبة للمستخدمين الجُدُد للووردبرس هو فهم طريقة عمل ملفات القوالب و محتواها، سنتطرّق في العناوين القادمة عن التفاصيل التي تخص كل ملف على حدة، ستتمكن من جهة معرفة طريقة عمل القوالب، أو تأسيس قالب خاص بك بالإعتماد على بعض الدوال التي يُمكنك إيجادها في المخطوطة الرسمية للووردبرس (codex.wordpress.org).

1. ملف تعريف القالب Style.css

كما تعلم فكُل قالب لديه إسم و يتوفّر أيضاً على معلومات مثل إسم المصمم، صورة للمعاينة، رابط الموقع الخاص به و أيضاً معلومات عن صلاحية الإستخدام.

السؤال الذي سيطرحُهُ الجميع، أين تُوجَدُ هاته المعلومات ؟

هاته المعلومات تكون على شكل تعليق في بداية ملف style.css و هذا مثال لبداية هذا الملف مع شرح مبسط لكل سطر :

/*
Theme Name: Taqana V3.3.1
Theme URI: http://taqana.net
Description: Taqana.net theme
Author: Soufiane Sabiri
Author URI: http://soufianesabiri.com
Version: 3.3.1
*/

أما بالنسبة لـ Theme Name فهذا السطر يحدد إسم القالب، و نجد في Theme URI رابط تحميل القالب أو موقع القالب الرسمي بينما في Description يمكن وضع تعريف بسيط للقالب، أما بالنسبة لصاحب القالب فبإمكانه وضع إسم و رابط موقعه في Author و Author URI على التوالي و أخيراً نجد الإصدار في Version :)

طبعاً يوجد أوامر أخرى يمكن إضافتها لكن لن نتكلّم عنها في هاته المقالة و سنترُكُها للمقالات القادمة إن شاء الله !

2. ملف الدوال functions.php

أما عن ملف الدوال فهو يحتوي على دوال عدة و دائماً ما نجده يبدأ بـ <?php و ينتهي بـ ?> نظراً لكونه ملف بي إتش بي.

هذا مثال لدالة ضرورية في كل ملفات functions.php

<?php

$themename = "Taqana";
$adminmenuname = "Taqana Options";
define('SHORTNAME','taqana');

$include_dir = 'includes';
$themeoptions_dir = $include_dir.'/theme-options';

// Functions
require_once($include_dir.'/fn-general.php');
require_once($themeoptions_dir.'/setup.php');

?>

سنشرح هاته الأمور بعد نشر دورة البرمجة الخاصة بالبي إتش بي PHP كي يسهُل الفهم إن شاء الله ;)

3. ملفات الصفحات و طريقة عملها

بشكل أو بآخر، ملفات الصفحات هو الملف المركزي الذي يعتمد عليه موقع ووردبرس في حين لم تتوفر باقي الملفات، و الملف الأصلي الخاص بكل الصفحات يكون تحت إسم page.php و إن كان الأمر يتعلّق بصفحة معيّنة (إما باستخدام ترميز الرابط “slug” أو رقم الصفحة “id”) فيمكننا إنشاء ملفات بهذا الإسم page-taqana.php لصفحة رابطها على هذا الشكل taqana.net/taqana.

هذا سيُمكننا من التعديل على صفحات معيّنة بدل التعديل على كل الصفحات.

داخل ملف الصفحات نجد أكواد PHP و أيضاً أسطُر متعلقة بعرض الصفحة HTML و من بين الأكواد نجد التالي :

<?php

get_header();

the_title();

the_content();

php get_sidebar();

php get_footer();

?>

طبعاً قُمتُ في المثال أعلاه بوضع الدوال الرئيسية فقط، و دور كل دالة يتلخص فيما يلي.

رأس الصفحة header.php

عند كتابة الدالة get_header(); فأنت بذلك تأمُر الووردبرس بالبحث عن ملف header.php و وضعه في الصفحة، و بطبيعة الحال يجب عليك وضعه في أعلى كل ملفات القالب لأن ملف الـ header.php يحتوي على كل المعلومات المتعلقة بعنوان الصفحة و ملفات الـ CSS و JavaScript.

بإمكانك وضع رأس صفحة مغاير للصفحات الأخرى، و ذلك بإنشاء ملف تحت هذا الشكل header-taqana.php و في هاته الحالة يجب عليك إستخدام الدالة التالية لاستدعاء الملف :

get_header('taqana');

بدل :

get_header();

و أما فيما يخص ملف الـ header.php فهو يحتوي عموماً على الأسطر التالية (بإمكانك استخدامها كبداية) :

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> Flux RSS" href="<?php bloginfo('rss2_url'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<?php wp_head(); ?>
</head>

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

الدالة wp_head() ضرورية لأنها تقوم بإضافة كل السكربتات المتعلقة بالقالب و الإضافات بشكل تلقائي و لا يجب أبداً حذفها.

طبعاً سيتوجب عليك غلق كل من الوسوم <body> و <html>، لكن أين ؟ إليك الإجابة…

نهاية الصفحة footer.php

إخترتُ أن أتكلّم عن نهاية الصفحة أولاً لأنها لا تختلف كثيراً عن رأس الصفحة.

هذا الملف يحتوي على أكواد تتعلق بعرض محتوى في أسفل كل صفحات الموقع و هي عموماً نجد بها التالي :

<?php

wp_footer();

?>

</body>

</html>

طبعاً لم أقُم بوضع أكواد HTML لأنه من السهل إعدادها، و سنتطرق لطريقة تصميم قالب ربما في إحدى الدورات على مجتمع تقانة إن شاء الله =)

الدالة wp_footer(); ضرورية و لا يجب حذفها لأنها تقوم هي أيضاً بإضافة كل الملفات المتعلقة بالقالب و الإضافات.

القوائم الجانبية sidebar.php

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

بنفس الطريقة المُستخدمة لاستدعاء كل من رأس و نهاية الصفحة، يتم إستدعاء الملف sidebar.php و ذلك باستخدام الأمر التالي :

<?php

get_sidebar();

?>

يمكن استخدام ملف قوائم جانبية خاص بصفحة معيّنة بإنشاء ملف تحت إسم sidebar-taqana.php و بالتالي يجب استخدام هذا الأمر عوض الأمر الإفتراضي :

<?php

get_sidebar('taqana');

?>

لكن كيف نقوم بإضافة القوائم الجانبية داخل هذا الملف ؟ إليك الحل =)

ضع هذا الكود داخل الملف sidebar.php لاستدعاء القوالب، بالطبع يجب عليك إضافة كود HTML.

<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('taqana') ) : endif;
?>

و لتسجيل القائمة الجانبية في القالب يتوجب عليك إستخدام هاته الدالة (إضافتها داخل ملف functions.php =)

<?php

if ( function_exists('register_sidebar') )
{
register_sidebar(array(
'name' => 'taqana',
'before_widget' => '<div id="%1$s" class="widget %2$s taqana-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));

}

?>

لنمر الآن للملفات المتعلقة بالمقالات و باقي صفحات الموقع.

4. ملف المقالات single.php

طبعاً بامكانك التعديل على شكل عرض المقالات أو إضافة بعض التعديلات على المحتوى المعروض أعلى و أسفل المقالة، و ذلك عن طريق تعديل ملف single.php.

كما تعلمون فكل مقالة تحتوي على : عنوان، تصنيفات، محتوى، كلمات دلالية و صورة بارزة.

و بالطبع يُمكنك إضافة معلومات أخرى تتعلق بالـ meta_data و التي سنخصص لها مقالة لوحدها إن شاء الله.

إليكُم الدوال التي تقوم بعرض محتوى المقالة و التي يمكنكُم استخدامها في تصميم القالب الخاص بكُم مع إضافة وسوم الـ HTML بطبيعة الحال :

<?php

get_header();

?>
<img class="img-responsive" src="
<?php if ( has_post_thumbnail() ) { $thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium'); echo $thumb[0];} ?>
" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />
<?php

the_title();

the_author();

the_category(' ، ');

comments_number('لا تعليق', '1 تعليق', '% تعليقات');

the_content();

comments_template();

get_sidebar();

get_footer();

?>

أما بالنسبة لصورة المقالة فقد إستخدمنا دالة wp_get_attachment_image_src، و لعرض إسم الكاتب إستخدمنا دالة the_author() ثم بعرض التصنيفات مع عدد التعليقات إستخدمنا على التوالي الدوال the_category(); و comments_number.

دالة the_content() تُمكّن من عرض محتوى المقالة و comments_template() تمكّن من عرض التعليقات على المقالة لكن هاته الدالة الأخيرة تم إنشاؤها داخل ملف functions.php و التي سنتطرّق لها في الدورة الخاصة بتصميم القوالب إن شاء الله.

و بطبيعة الحال و كما هو الحال بالنسبة لكل الصفحات نجد get_sidebar() و get_footer() لعرض القوائم الجانبية و نهاية الصفحة.

 

5. ملف الأرشيف archive.php

يُمكنُكُم هذا الملف من عرض آخر المقالات في تصنيف معيّن أو كل التصنيفات، و هو يُمكنُ إنشاؤه انطلاقاً من الملف page.php مع إضافة دالة wp_query التي تمكن من عرض مطوّل لمحتوى الموقع، و هذا مثال لمحتوى هذا الملف :

 

<?php
get_header();

$paged = $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array( 'posts_per_page' => 9, 'paged' => $paged );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>

<!-- محتوى المقالة -->

<?php
endwhile;

if(function_exists('wp_pagenavi')) { wp_pagenavi( array( 'query' => $loop ) ); }
wp_reset_postdata();

get_sidebar();
get_footer();
?>

ستلاحظ أن هناك دالة غريبة تحت إسم wp_pagenavi()، هاته الدالة خاصة بالإضافة WP PageNavi و التي تمكّن من إضافة أزرار للتصفح بدل الإعتماد على الأزرار القديمة للووردبرس، بإمكانك تحميل الإضافة من هنا.

تم أيضاً استخدام متغيّر paged و الذي يمكّن من الحصول على رقم الصفحة الحالية لتعمل الإضافة بكل كفاءة و إتقان =)

بإمكانك وضع مكان <!– محتوى المقالة –> الدوال التي تمكّن من عرض معلومات المقالة كالتي توجد في single.php، غير أنه سيلزمك وضع دالة لعرض اختصار المقالة بدل استخدام the_content.

<?php

the_excerpt();

?>

رائع، لقد تمكّنت من التعرُّف على أساسيات عمل قوالب الووردبرس، و من الآن لن تجد صعوبة في قراءة محتوى أي قالب و سيُصبح من السهل عليك التعامُل معها و لما لا التعديل عليها إن كان القالب يوفّر هذه الصلاحية =)

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

هل لديك أسئلة ؟ أنا هنا لمساعدتك ;)

لا تتردد في طرح الأسئلة !

سفيان – مجتمع تقانة





مقالات ذات صلة :


Profile photo of سفيان صبيري
29376

عن

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





التعليقات :

# محمد الغنامي قبل 3 سنوات
Profile photo of محمد الغنامي

شكرا لك اخي سفسان على هذا الدرس الاكثر من رائع :D

# سفيان صبيري قبل 3 سنوات
Profile photo of سفيان صبيري

مرحباً أخي محمد، سعيدٌ جدّاً أن هذا المقال أعجَبَك =)
لا تنس مشاركته مع أصدقائك ليستفيدوا هم أيضاً ;)

# facebook100002271208918 قبل 3 سنوات
Profile photo of facebook100002271208918

شكرا لك أخي سفيان والله ماقصرت مقالة أفادتني كتيرااا شكراا لك مرة تانية

# سفيان صبيري قبل 3 سنوات
Profile photo of سفيان صبيري

بارك الله فيك أخي عثمان، أي سؤال أنا هنا ;)

# قريب ياسين قبل 3 سنوات
Profile photo of قريب ياسين

إتقان – بساطة – إبداع ^_^

# سفيان صبيري قبل 3 سنوات
Profile photo of سفيان صبيري

هذا ما نسعى إليه بعون الله و فضله =)

# سفيان ايت سعد قبل 3 سنوات
Profile photo of سفيان ايت سعد
# Zack GetSukie قبل 3 سنوات
Profile photo of Zack GetSukie

ممتاز ممتاز
حقا يعجز لساني عن التعبير !

# سفيان صبيري قبل 3 سنوات
Profile photo of سفيان صبيري

سعيدٌ جداً أن هذا المقال البسيط أعجبك، مرحباً بكل تساؤلاتك ;)

# ياسين باداس قبل 3 سنوات
Profile photo of ياسين باداس

شكرا أخي سفيان شرح ممتاز و دقيق ;)

# aimen tiba قبل 3 سنوات
Profile photo of aimen tiba

اعجبني التدوين

# adnan kassaoui قبل سنتين
Profile photo of adnan kassaoui

هذا الدرس رائع و شرح ممتاز =)

# Azzmy Mustafa قبل سنتين
Profile photo of Azzmy Mustafa

عندي سؤال، هل توجد مواقع لتعليم لغة ‏php‏ للمبتدئين أي من الصفر؟؟

# facebook100001053972126 قبل سنتين
Profile photo of facebook100001053972126

شكرا لك اخي ! ;)

# yassin3 قبل سنتين
Profile photo of yassin3

شكرا يا أخي سفيان شرح أكترا من رائع

# abalhaithm قبل سنتين
Profile photo of abalhaithm

لا يسعني إلا أن أقول جزاك الله خير الجزاء أخ سفيان

# almotawir قبل سنتين
# mohamed قبل سنة واحدة

SHOKRAN
YA RET DAWARAT WORDPRESS E7TRAFYA

# محمد أحمد قبل سنة واحدة

السلام عليكم اخي
جزاك الله خير على التوضيح هذا .

# اسامة قبل سنة واحدة

مقال مفيد وجميل

# أمير قبل 11 شهر

شكرا لك أخي موضوع رائع لكن لدي استفسار حول قالب الوورد بريس. قمت بإنشاء موقع لأول مرة على وورد بريس وأريد التعديل في القالب لكن حين أدخل إلى “قوالب” لا أجد مكان html فقط أجد تخصيص أو اختيار قوالب أخرى. كيف يمكنني الولوج إلى تعديل القالب.

كتابة تعليق :

xD oO ^_^ =] =) ;-( ;) :| :woot: :whistle: :sleep: :sick: :police: :p :o :ninja: :mm: :love: :lol: :kiss: :hmm: :evil: :bandit: :angel: :alien: :D :) :( 8)