كيفية تصميم وتطوير قالب ووردبريس

هناك العديد من المتطلبات لإنشاءك هذا الموقع أو تصميم وتطوير قالب ووردبريس وهي أن تكون على معرفة بالغات التالية

HTML و CSS وJavaScript وPHP و Database

تحتاج أيضا إلى بعض البرامج المهمة مثل المضيف المحلي وهو يعمل كانه موقع مستضيف ولكن بدون الحاجة إلى إنترنت أو خادم سيرفر كما تحتاج إلى محرر للاكواد

برنامج المضيف المحلي مثل XAMPP او WAMP وإذا كنت تستخدم احد أنظمة لينكس فيكون LAMP

برنامج المحرر مثل سبليم 3 او فيجوال كود

والآن اتبع الخطوات التالية التي ستكون غير مفهومه لك في البداية ولكن ستتضح فيما بعد بخصوص تصميم وتطوير قالب ووردبريس

أولا قم بعمل المجلدات والملفات التالية كما بالشكل

هذه عبارة عن المجلد الرئيسي للمشروع ويندرج اسفل منه مجلدات الصور والسي اس اس والجافاسكريبت وملفات العمل الرئيسي وهي

style.css

index.php

header.php

footer.php

sidebar.php

functions.php

single.php

page.php

comments.php

search.php

rtl.php

author.php

404.php

طبعا هناك ملفات اكثر من تلك ولكن هذه هي اهم الملفات التي ستجعل موقعك يظهر بصورة جيدة

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

style.css

لاحظ لا تنسى كتابتهم كتعليقات بين

/* */

الان تستطيع كتابة اكوادك في الملف الرئيسي وهو index.php

هذا الملف الذي ستكتب فيه القالب ككل وستقوم بتقطيع محتوياته وتضعها في ملفات أخرى سنعرفها فيما بعد سبب عملية التقطيع هو تسهيل كتابة الاكواد

الآن قم بكتابة الاكواد التالية كما بالاشكال لاحظ اني اسمية الملف باسم أخر لأنني قمت بالتقطيع بالفعل

اهم ما يجب أن تفهمه من تلك الاكواد التالي

wp_head

wp_footer

if ( have_posts() ) {

while ( have_posts() ) {

the_post();

}

the_title

the_content

the_permalink

وستفهم ما أهمية تلك ألدوال الخاصة بوودبريس فيما يلي ولكن ابدأ معي إنشاء ملف ال index.php من البداية كالتالي

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

هذا هو بداية اي ملف اتش تي ام ال عادي

ضع الدالتين

wp_head

wp_footer

كالتالي

<!DOCTYPE html>

<html>

<head>

<?php wp_head(); ?>

</head>

<body>

<?php wp_footer(); ?>

</body>

</html>

ومن موقع الدالتين ربما تستنتج فوائدهما ، فنحن نعرف ان ملفات الارتباط بال سي اس اس والجافاسكريبت يوضعان في بداية ونهاية أي ملف فلهذا قامت ووردبريس بوضع تلك الدالتين الأساسيتين لجلب اي ملفات ارتباط مساعده وربطها عن طريقهما فعلى سبيل المثال لو قام احد المطورين بعمل إضافة او برنامج مساعد لوردبريس وأراد إضافة ملفات جديدة لملفك الأساسي اندكس أو غيره من الملفات فيقوم بعمل دوال أخرى في ملف آخر غالبا هو ملف functions.php وهذا ما تقوم به انت ايضا فمثلا لو اردنا ربط ملف السي اس اس style.css كان يستخدم قديما الأسلوب التالي

<!DOCTYPE html>

<html>

<head>

<?php wp_head(); ?>

</head>

<body>

<?php wp_footer(); ?>

</body>

</html>

لاحظ ان الدالة get_template_directory_uri هي دالة تستخدم لجلب مسار الملف على السيرفر

الأسلوب المستخدم حديثا يختلف حيث اننا نقوم باستدعاء الملف بواسطة

wp_head

عن طريق كتابة بعض الاكواد في ملف أخر يسمى ملف functions.php

سأقوم بشرح الطريقة ولكن بعد ان ننتهي من ملفنا الرئيسي فتذر معي أن هذه هي النقطة 1 للرجوع إليها لاحقا

الآن نعود لكتابة باقي الملف index.php

اكتب التالي في ملفك

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

<?php wp_footer(); ?>

</body>

</html>

نلاحظ وجود دوال جديده وهي

language_attributes

وفائدتها وضع اللغة التي سيعمل بها موقعك

bloginfo( ‘charset’ )

وفائدة هذه الدالة متعددة احدها أن يعرف مجموعة الحروف والرموز الموضوعة في ملفك فعلى سبيل المثال هناك رموز باللغة الصينية وهي رموز تتعدى الآلاف ويجب لكي تفهم أن يكون هناك قواعد لفهمها ولا يستطيع المتصفح والحاسب فهم تلك الرموز الا إذا بينت له أنها رموز صينية تتبع قواعد معينه مثل UTF-8

وهذا ما يقوم وودبريس تمريره من خلال دالتنا المذكورة

body_class()

هذه الدالة تضع كلاسات خاصه بوردبيس داخل صفحتك وهي تفيد في استخدام نظام موحد لجميع المطورين لكي يستفيدوا به في عمل تصميم الصفحات

ملاحظه غاية في الأهمية يمكنك بحث عن اي دالة قمنا بكتابتها في موقع وردبريس للمطورين من الرابط التالي ووردبريس مطوريين

اما الميتا الباقية فهي تفيدك في عمل التصميم على الهاتف المحمول

الآن نعود لنكمل باقي الملف

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

</header>

<?php

if ( have_posts() ) {

while ( have_posts() ) {

the_post();

<?php the_title(); ?>

</a>

</h3>

</div>

<?php the_content() ; ?>

</div>

<?php

}

</div>

<?php wp_footer(); ?>

</body>

</html>

انظر جيدا لما يلي فربما تفهم معنى ما تقوم به بدون الحاجة إلى شرح

if ( have_posts() ) {

while ( have_posts() ) {

the_post();

وتعني لو لديك مقالات موجوده يمكنك عمل لوب لهذه المقالات واحضرها ، تكتب الجمل السابقة مع وضع بعض ألدوال المهمة فيها مثل

the_title

the_content

ومن اسميهما سيظهر أن احدهما يحضر العنوان واحدهما يحضر المحتوى للمقالة

الأن يجب عليك كتابة كل السابق في الملفين

single.php

page.php

مع بعض التغيرات البسيطة فهل يعقل ان نكتب الملفات كلها مكرره وبها جزء بسيط هو الذي سيتم تغيره

بالطبع لا لهذا قامت ووردبريس بعمل تقطيع للملفات في ملفات مساعده يمكننا استدعائها كلما احتجنا لذلك وسنقوم بالتقطيع الآن قبل عمل ملفين

page.php

single.php

التقطيع سيتم في ملفي

header.php

footer.php

كالتالي

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

</header>

وهذا الجزء يوضع في ملف

header.php

وسيتم استدائه فيما بعد بواسطة الدالة

<?php get_header( ); ?>

والجزء التالي سيوضع في ملف

footer.php

<?php wp_footer(); ?>

</body>

</html>

وسيتم استدعائه بواسطة الدالة

<?php get_footer( ); ?>

الآن بعد أن قطعت الملفات يمكنك كتابة الاستدعاءات في ملف الأساس

index.php

واستدعائهم ايضا في ملفي

single.php

page.php

كالتالي

<?php get_header( ); ?>

<?php

if ( have_posts() ) {

while ( have_posts() ) {

the_post();

<?php the_title(); ?>

</a>

</h3>

<?php the_excerpt(); ?>

</div>

<?php

}

</main>

</div>

<?php get_footer( ); ?>

لاحظ وجود بعض التغيرات فقد وضعنا الدالة

<?php the_excerpt(); ?>

بدالا من الدالة

<?php the_content() ; ?>

وفائدة الدالة الجديده كالقديمة ولكنها تعطيك كمية محدودة من الكلمات في المقال وسنفهم لاحقا

الان ضع نفس الاكواد في الملفين

single.php

page.php

ولكن مع اعادة الدالة

<?php the_content() ; ?>

ربما تريد الآن أن تعف ما هي فوائد الملفات الجديدة

الملف الأول

single.php

هو المسؤول عن أغطاءك كل مقال منفردا وعلى حده بدلا من وضع كل المقالات في صفحة واحدة كما كان يحدث في ملف

index.php

اما ملف

page.php

فهو مسؤول عن الصفحات فنحن نعرف ان الموقع يتكون من صفحات مثل من نحن والدعم والرئيسية واتصل بنا والأخبار مثلا والمنتجات مثلا وغيرها من الصفحات هذه الصفحات يتم عملها بواسطة ملف

page.php

الان يوجد لدينا بعض الملفات التي لم نذكر عنها شيء مثل

sidebar.php

comments.php

search.php

404.php

functions.php

الملف

sidebar.php

هو لعمل قوائم جانبيه أو شريط جانبي في اليمين أو اليسار

الملف

comments.php

لعمل مربعات حوار للزوار ليقوموا بعمل تعليقاتهم على المقال او المنتج او غيره

الملف

search.php

للبحث في الموقع

الملف

404.php

للإشارة إلى أي صفحة غير موجوده في الموقع

الملف

functions.php

ملف خاص يعتبر من اهم الملفات على الإطلاق في ووردبريس حيث يتم كتابة اكواد التعامل مع خواص وودبريس

والآن لنعود إلى النقطة 1 في الأعلى والتي قلنا أننا سنعود إليها لاحقا وكانت عن كتابة كود للتعامل مع ملفات الارتباط مثل ملف

style.css

وكيفية جلبه ووضعه في الرأس العلوية لملفاتنا

قم بكتابة الاكواد التالية في ملف functions.php

function register_style_fox()

{

$version = wp_get_theme()->get(‘Version’);

wp_enqueue_style( ‘bootstrap’, get_template_directory_uri() . “/css/bootstarp.min.css” , array(),$version,’all’ );

wp_enqueue_style( ‘style-fox’, get_template_directory_uri() . “/style.css” , array(),$version,’all’ );// or get_stylesheet_uri()

}

add_action( ‘wp_enqueue_scripts’, ‘register_style_fox’ );

هذه الاكواد لإحضار ملفي

style.css

bootstrap.min.php

ووضعهما من خلال الدالة

wp_head

في راس الملف

وفيها نقوم بعمل دالة خاصة تسمى

register_style_fox

ويمكنك ان تضع اي اسم لها يدل على ما تفعله ، في داخل هذه الدالة يتم استخدام دالة معوفة في

ووردبريس وهي

wp_enqueue_style

وهي طريقه امنه لاستدعاء الملفات المرادة وبها عدة معاملات مثل اسم تضعه مخصوص للاستدعاء به والمسار لهذا الملف وإصدار هذا الملف والمديا كيوري وهي المسؤولة عن التعامل مع الهواتف المحمولة والتابلت وغيرها

الآن وبعد كتابة اكواد الدالة يجب ربطها مع ووردبريس وهذا يتم من خلال الدالة المشهورة

add_action

ومن اسمها تدل على فعل شيء وهو ربط الدالة العلوية مع ووردبيس

الآن ربما نريد أن نقوم بعمل قائمة بالصفحات لموقعنا فكيف يتم ذلك ، قم بجلب الدالة الخاصة بعمل القوائم ووضعها في ملف header.php

الدالة هي

<?php wp_nav_menu( ‘theme_location’,’header_fox’ ); ?>

فيكون ملف هيدر كالتالي

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

<?php wp_nav_menu( ‘theme_location’,’header_fox’ ); ?>

</div>

</header>

ولكي تعمل هذه الدالة يجب ان يتم بطها مع الووردبيس عن طريق دالة أخرى توضع في ملف functions.php كالتالي

// register navigation menu

function register_nav_menu_fox(){

register_nav_menu( ‘header_fox’ , ‘Header Menu’ );

}

add_action( ‘init’,’register_nav_menu_fox’);

هذه الدالة هي المسؤولة عن إظهار كلمة قائمة في لوحة التحكم الرئيسية لوودبريس اسفل القائمة مظهر appearance

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

.menu-top {background-color: #000;color:#fff; position: relative;}

.menu-top li {list-style: none; padding: 1%;}

.menu-top li a {text-decoration: none;color: #fff; white-space: nowrap;}

.menu-top .menu-item {

display: inline-block;

}

.menu-top .sub-menu{display: none;position: absolute;}

.menu-top .menu-item:hover .sub-menu{

display: block;

position: absolute;

background-color: #000;

top:50px;

}

الاكواد بسيطه وسهله وهي تدل على على عمل خلفية للقائمة باللون الأسود ولون الخط الأمامي باللون الأبيض على أن يكون موقع القائمة نسبي ريلتيف وهذا يفيدنا في القوائم الفرعية حتى يصبح مرجعيتها هو الكلاس الرئيسي المسمى menu-top

الآن ضع لليست نظام عدم وجود نقاط جانبيه مع أزاحه داخلية 1 بالمئة ، ثم ضع للوصالات التشعبية داخل الليسته او القائمة نظام عدم وجود ديكور بمعنى لا يوجد خطوط سفلية وحول لونه إلى الأبيض وضع نظام لا مسافات الذي يساعدك عند كتابة اكثر من كلمة منفصلة مثل من نحن ، لكي تجعل القائمة الرئيسية في خط افقي يستخدم display: inline-block;

الآن قم بعمل تشكيل للقوائم الفرعية في البداية بعدم الظهور الا إذا قمنا بالمرور عليها بالماوس الفاره وعند ظهورها تظهر اسفل بعضها البعض مع ظهور خلفيتها باللون الأسود ومحازاتها لأعلي بمقدار 50 بكسل

هناك بعض الدوال المهمة التي يمكن وضعها في ملف ال header.php وهي كالتالي

<?php get_search_form(); ?>

<?php if ( get_header_image() ) { ?>

احدهما لوضع مربع البحث والاخر لوضع صوره علوية في بداية صفحة الموقع

ايضا اذا اردت عمل لوجو فيمكنك استخدام التالي

<?php

if (function_exists(‘the_custom_logo’)) {

the_custom_logo( );

}

كما يوجد دالتين لا غنى عنهما في ووردبريس توضعان بصفه مستمره وهما تكتبان كالتالي

</div>

</div>

اذا يكون لدينا ملف الهيدر كالتالي

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

<?php wp_nav_menu( ‘theme_location’,’header_fox’ ); ?>

</div>

<?php get_search_form(); ?>

<?php if ( get_header_image() ) { ?>

<img src=”<?php header_image(); ?>” width=”<?php echo absint( get_custom_header()->width ); ?>” height=”<?php echo absint( get_custom_header()->height ); ?>” alt=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>”>

</a>

</div>

<?php } ?>

<?php

if (function_exists(‘the_custom_logo’)) {

the_custom_logo( );

}

</div>

</div>

</div>

</header>

مع الخطوات والدوال السابقة يجب ربطها بالووردبريس عن طريق الملف functions.php كالتالي

// add title and logo to the head

function theme_support_title_fox()

{

add_theme_support( ‘title-tag’ );

add_theme_support( ‘custom-logo’ );

}

add_action(‘after_setup_theme’,’theme_support_title_fox’ );

لربط اللوجو

// custom header image

function themename_custom_header_setup() {

$args = array(

‘flex-width’ => true,

‘width’ => 1270,

‘flex-height’ => true,

‘height’ => 600,

‘default-image’ => get_template_directory_uri() . ‘/images/default-image.jpg’,

);

add_theme_support( ‘custom-header’, $args );

}

add_action( ‘after_setup_theme’, ‘themename_custom_header_setup’ );

لعمل ربط ووضع صوره علوية في صفحة الموقع

الان مازال لدينا ملفات بسيطه مثل ملف البحث وملف الخطا للصفحات

search.php

404.php

وهما يوضعان باكواد بسيطه وسهله الفهم فالملف الاول تقليد لملف الاندكس والملف الثاني لا مشكله في اكوده وهما كالتالي ملف search.php

<?php get_header( ); ?>

<?php

if ( have_posts() ) {

// Start the Loop.

while ( have_posts() ) {

the_post();

<?php

if (has_post_thumbnail()) {

the_post_thumbnail();

}

<?php the_title(); ?>

</a>

</h3>

<p>

Author: <?php the_author_link(); ?>

date: <?php the_date(); ?>

<?php the_category(); ?>

<?php the_tags() ?>

</p>

<?php the_excerpt(); ?>

</div>

<?php

}

} else {

}

</main>

<?php get_footer( ); ?>

وملف 404.php

<?php get_header( ); ?>

<h1> <a href=”index.php”>this is wronge page or not existed 404</a></h1>

</div>

<?php get_footer( ); ?>

أما ملف التعليقات فسأعطيك اكواده واترك لك مهمة البحث عن معناها وفوائدها

<?php

/**

* The template for displaying comments

* The area of the page that contains both current comments

* and the comment form.

* @package WordPress

* @subpackage 3Davinci-one

* @since 3Davinci-one 1.0

* If the current post is protected by a password and

* the visitor has not yet entered the password we will

* return early without loading the comments.

if ( post_password_required() ) {

return;

}

<?php if (have_comments()) {

<?php

echo ‘<ul class=”comment-list”>’;

wp_list_comments();

echo “</ul>”;

next_comments_link();

previous_comments_link();

}

else {echo “<h2> There are No Comment So Far ? </h2>”;}

$fields = array(

‘author’ =>

‘<p class=”comment-form-author”><label for=”author”>’ . ‘Name : ‘ . ‘</label>’ .

( $req ? ‘<span class=”required”>*</span>’ : ” ) .

‘<input id=”author” name=”author” type=”text” value=”‘ . esc_attr( $commenter[‘comment_author’] ) .

‘” size=”30″‘ . $aria_req . ‘ /></p>’,

’email’ =>

‘<p class=”comment-form-email”><label for=”email”>’ . ‘Email : ‘ . ‘</label>’ .

( $req ? ‘<span class=”required”>*</span>’ : ” ) .

‘<input id=”email” name=”email” type=”text” value=”‘ . esc_attr( $commenter[‘comment_author_email’] ) .

‘” size=”30″‘ . $aria_req . ‘ /></p>’,

‘url’ =>

‘<p class=”comment-form-url”><label for=”url”>’ . ‘Website : ‘ . ‘</label>’ .

‘<input id=”url” name=”url” type=”text” value=”‘ . esc_attr( $commenter[‘comment_author_url’] ) .

‘” size=”30″ /></p>’,

);

$args = array(

‘id_form’ => ‘commentform’,

‘class_form’ => ‘comment-form’,

‘id_submit’ => ‘submit’,

‘class_submit’ => ‘submit’,

‘name_submit’ => ‘submit’,

‘title_reply’ => ‘Leave a Reply’,

‘title_reply_to’ => ‘Leave a Reply to %s’,

‘cancel_reply_link’ => ‘Cancel Reply’,

‘label_submit’ => ‘Post Comment’,

‘format’ => ‘xhtml’,

‘comment_field’ => ‘<p class=”comment-form-comment”><label for=”comment”>’ . ‘Comment’ .

‘</label><textarea id=”comment” name=”comment” cols=”45″ rows=”8″ aria-required=”true”>’ .

‘</textarea></p>’,

‘must_log_in’ => ‘<p class=”must-log-in”>’ .

sprintf(

‘You must be <a href=”%s”>logged in</a> to post a comment.’,

wp_login_url( apply_filters( ‘the_permalink’, get_permalink() ) )

) . ‘</p>’,

‘logged_in_as’ => ‘<p class=”logged-in-as”>’ .

sprintf(‘Logged in as <a href=”%1$s”>%2$s</a>. <a href=”%3$s” title=”Log out of this account”>Log out?</a>’,

admin_url( ‘profile.php’ ),

$user_identity,

wp_logout_url( apply_filters( ‘the_permalink’, get_permalink( ) ) )

) . ‘</p>’,

‘comment_notes_before’ => ‘<p class=”comment-notes”>’ .

‘Your email address will not be published.’ . ( $req ? $required_text : ” ) .

‘</p>’,

‘comment_notes_after’ => ‘<p class=”form-allowed-tags”>’ .

sprintf(‘You may use these <abbr title=”HyperText Markup Language”>HTML</abbr> tags and attributes: %s’,

‘ <code>’ . allowed_tags() . ‘</code>’

) . ‘</p>’,

‘fields’ => apply_filters( ‘comment_form_default_fields’, $fields ),

);

// comment_form( $args, $post_id );

comment_form( $args );