تصميم قالب ووردبريس باستخدام مُمتاز

في هذه المقالة الطويلة نسبيا والبسيطة في نفس الوقت، نتحدث عن استخدام اطار العمل ممتاز Momtaz Framework في تطوير قالب خاص بنا، الهدف من هذه المقالة هو ايضاح بسيط لطريقة استخدام الاطار لذلك لن نتعمق كثيرا فيه وانما سنتعرف على بعض الاساسيات.

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

أود التنويه ايضا أن هذه المقالة لها علاقة بالمقالة التي تعرفنا فيها على القوالب الفرعية Child Themes لذلك من الأفضل أن تطلع عليها إذا لم تطلع عليها من قبل.

الشكل النهائي لقالبنا

تحميل الاطار وبدء الاستخدام

خطوتنا الأولى بالطبع ستكون تحميل الإطار من موقع GitHub.
بعد عملية التحميل وفك الضغط ستجد مجلد الاطار باسم momtaz بجانبه مجلد آخر باسم sample – وهو قالب فرعي مبني على الاطار لاستخدامه في بناء قوالبنا الجديدة – ، نقوم بوضع المجلدين داخل مجلد themes في ووردبريس.

اسم القالب الجديد والبادئة

قالبنا الجديد الذي نعمل عليه سنسميه “My Theme”، بالتالي سنقوم بتغيير اسم المجلد المسمى sample إلى my-theme.
نفتح المجلد my-theme ونقوم بالتعديل على ملف stylesheet.css لتغيير اسم القالب من Momtaz Sample إلى My Theme، كذلك نقوم بتغيير بقية المعلومات الخاصة بالقالب الجديد:
[code language=”php”]/*
* Theme Name: My Theme
* Author: Aboelabbas
* Author URI: http://wphawy.com
* Description: A simple child theme for personal blogs based on Momtaz framework.
* Text Domain: mytheme
* Version: 0.1
* Template: momtaz
* Template Version: 1.2
*
* License: GNU General Public License v2.0
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Copyright (c) 2013 – 2014 Nashwan Doaqan. All rights reserved.
*/[/code]

الآن، نقوم بفتح ملف functions.php، والذي سنجده يتكون من دالة واحدة وظيفتها تحديد بادئة القالب “Theme Prefix”، والدالة تم تنفيذها على before_momtaz_setup hook، هذا الهوك يقع قبل استدعاء جميع مكونات الاطار.

نقوم بتغيير قيمة THEME_PREFIX من sample إلى mytheme:

[code language=”php”]function sample_before_momtaz_setup() {

// Define the theme prefix.
define( ‘THEME_PREFIX’, ‘mytheme’ );

}[/code]

الآن نقوم بتفعيل القالب من لوحة التحكم، طبعا ستذهب مباشرة لمعاينة الموقع لتجد ان القالب لا يحمل اي تنسيق، وهذا طبيعي لان ملف style.css مازال فارغاً حتى الآن.

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

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

حمل الصور من هنا
بعد فك الضغط هم بوضع مجلد images داخل مجلد القالب.

تفعيل القوائم الأساسية للقالب

يدعم ممتاز ثلاثة قوائم مخصصة “primary, secondary, subsidiary”، مفعل منهم افتراضياً القائمة primary فقط، وهي القائمة الموجودة اسفل الهيدر مباشرة.

في قالبنا سنستخدم قائمة أخرى في الفوتر لذلك نحتاج الى تفعيل القائمة secondary أيضا، يتم ذلك في ممتاز عن طريق الدالة add_theme_suppot والخاصية هنا هي ‘momtaz-core-menus’.

سنكتب الدالة بهذه الطريقة:
[code language=”php”]add_theme_support( ‘momtaz-core-menus’, array( ‘primary’, ‘secondary’ ) ); [/code]

نضع هذه الدالة بداخل دالة أخرى يتم تنفيذها على الهوك before_momtaz_setup، لذلك سنضعها مع الدالة المستخدمة في تعيين بادئة القالب.

إذا سنعدل في ملف functions.php ليصبح هكذا:

[code language=”php”]<?php

add_action( ‘before_momtaz_setup’, ‘sample_before_momtaz_setup’, 11 );

/**
* Load all the necessary code before Momtaz setup.
*
* @since Momtaz Sample 0.1
* @return void
*/
function sample_before_momtaz_setup() {

// Define the theme prefix.
define( ‘THEME_PREFIX’, ‘mytheme’ );

// Add support for core menus
add_theme_support( ‘momtaz-core-menus’, array( ‘primary’, ‘secondary’ ) );

}[/code]

وضع القائمة secondary في مكانها بالفوتر

قمنا في الخطوة السابقة بزيادة دعم القالب لقائمة جديدة والآن، علينا ان نقوم بوضع القائمة الجديدة secondary في مكانها داخل القالب لذا سنقوم بالتالي:
– اولا نقوم بانشاء ملف جديد نسميه “menu-secondary.php” بداخل مجلد القالب ونضع به الكود التالي:
[code language=”php”]<?php if ( has_nav_menu( ‘secondary’ ) ) { ?>
<nav id="secondary-menu" class="menu-container" role="navigation">
<?php wp_nav_menu( array( ‘theme_location’ => ‘secondary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>
</nav> <!– #secondary-menu –>
<?php } ?>[/code]

– ثانيا نقوم بفتح ملف functions.php ونضع به الكود التالي:
[code language=”php”] add_action( ‘mytheme_footer’, ‘mytheme_add_footer_menu’ );

/**
* Load the secondary menu into theme footer.
*/
function mytheme_add_footer_menu() {

momtaz_template_part( ‘menu’, ‘secondary’ );

}[/code]

في الكود السابق، قمنا بعمل دالة باسم mytheme_add_footer_menu، بداخلها قمنا باستخدام دالة momtaz_template_part، وهذه الدالة وظيفتها تضمين ملفات القالب بداخل ملفات اخرى، البارمتر الاول لهذه الدالة يوضع به بادئة الملف المراد تضمينه والبادئة تعني الجزء الاول من اسم الملف قبل علامة “-“؛ أما البارمتر الثاني فيحمل الجزء الثاني من اسم الملف.

بعد ذلك قمنا بتنفيذ الدالة في الهوك المسمى mytheme_footer، وهو احد hooks المستخدمة بداخل ملفات الاطار والتي تسمى Format hooks وتبدأ دائما ببادئة القالب وبما اننا جعلنا بادئة القالب هي mytheme لذلك فكل الـ Format hooks ستبدأ بـ “mytheme_”.

وضع نموذج البحث في الهيدر

كما وضعنا القائمة في خطوتنا السابقة في الفوتر سنضع نموذج البحث في الهيدر لكن في هذه المرة سنستخدم الـ Format hook المسمى بـ mytheme_after_primary_menu ومكانه بعد القائمة الرئيسية مباشرة.

[code language=”php”]add_action( ‘mytheme_after_primary_menu’, ‘mytheme_header_search’ );

/**
* Load the search form directly after primary menu.
*/
function mytheme_header_search() {

get_search_form();

}[/code]

تفعيل أرقام الصفحات Loop pagination

يأتي مع ممتاز ما يسمى بـ modules وهي اضافات متقدمة للقالب، مفعل منها تلقائياً get-the-image وهو الخاص بمصغرات التدوينات، أما موديول ارقام الصفحات Loop pagination غير مفعل تلقائيا ويجب تفعيله في قالبنا، لذا سنضع هذا الكود في ملف functions.php:

[code language=”php”]add_action( ‘after_momtaz_setup’, ‘mytheme_after_momtaz_setup’, 11 );

/**
* Load loop pagination module.
*/
function mytheme_after_momtaz_setup() {

Momtaz_Modules::load_module( ‘loop-pagination’ );

}[/code] يقوم هذا الموديول باستبدال التنقل الافتراضي بين صفحات المدونة “اقدم، احدث” إلى صفحات مرقمة.

تفعيل استخدام LESS للبدء في تنسيق القالب

من مميزات ممتاز انه يدعم استخدام لغة LESS كلغة تنسيق تسهل عليك عملية كتابة أكواد التنسيق بشكل كبير، ربما لم تجربها من قبل وهذه فرصة لتجربها مع ممتاز :).

لتفعيل استخدام LESS سيكون علينا تفعيل وضع Script Debug في ووردبريس، افتح ملف wp-config.php وضع به السطر التالي:

[code language=”php”]define( ‘SCRIPT_DEBUG’, true );[/code]

استخدام LESS

في هذه الجزئية سنتحدث قليلا عن لغة LESS حتى يمكننا استخدامها في تنسيق قالبنا.

المتغيرات في LESS

يمكن في LESS تعيين متغير يحمل قيمة معينة ونستخدمها في تعيين الالوان بالتالي يمكن بسهولة استخدام هذا اللون داخل الاكواد عن طريق اسم هذا المتغير، وكذلك يمكن بسهولة تغيير هذا اللون بتغيير قيمة هذا المتغير دون الحاجة الى البحث داخل كافة الاكواد واستبدال هذا اللون بغيره.

مثال:
لغة LESS:
[code language=”css”]@black: #333;
a {
color: @black;
}[/code]

الناتج في CSS:
[code language=”css”]a {
color: #333;
}[/code]

Mixins

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

مثال:

لغة LESS:
[code language=”css”].box-border {
border: 1px solid #eee;
}

.box {
color: red;
.box-border;
padding:5px;
}[/code]

الناتج في CSS:
[code language=”css”].box-border {
border: 1px solid #eee;
}

.box {
color: red;
border: 1px solid #eee;
padding:5px;
}[/code]

Nested rules

خاصية رائعة اخرى من خواص هذه اللغة وتسمى Nesting لا اعلم الترجمة المناسبة لها ولكن يمكن تسميتها التفريع مثلا، ستفهم هذه الخاصية مباشرة عن طريق المثال التالي اذا كنت معتادا على الـ CSS.

إذا أردت ان أكتب هذا الكود على سبيل المثال:

[code language=”css”] #header-container {
position: relative;
}
#header-container.search-form-container {
position: absolute;
}
[/code]

في لغة LESS ساكتبه هكذا:
[code language=”css”] #header-container {
position: relative;
.search-form-container {
position: absolute;
}
}
[/code]

هناك المزيد

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

تنسيق القالب الخاص بنا

بعد أن عرفنا كيفية تفعيل استخدام لغة LESS في ممتاز وعرفنا نبذة بسيطة عن طريقة كتابة اللغة يأتي دور التنسيق الفعلي لقالبنا، لذلك علينا الآن ان نقوم بفتح ملف style.less الموجود داخل مجلد قالبنا ونضع به الكود التالي:
[code language=”css”] /**
* Development LESS stylesheet.
*
* Use this file for development purposes by adding this to your ‘wp-config.php’ file:
* define( ‘SCRIPT_DEBUG’, true );
*
* @since Momtaz Sample 0.1
*/

// Import the Momtaz Framework style.
@import "../momtaz/style.less";

/*

Any CSS code written below will override any existing
declarations from the theme itself.

*/

/* Global Colors Variables
———————————-*/
@dark: #333;
@medium: #e3e3e3;
@light: #fff;

/* Global Elements
———————————-*/
body {
background: @dark url(images/bg.png);
}

a:link, a:visited {
color: @dark;
}

a:hover {
text-decoration: none;
color: lighten( @dark, 10% );
}

#wrapper {
background-color: @light;
.box-shadow( 0px 0px 5px #000 );
}

/* Header
————————————*/
#header-container {
position: relative;

.search-form-container {
position:absolute;
right:0;
bottom:0;
}

}

#header {
background: @dark url(images/headerbg.png);
height: 100px;
}

#branding {
margin: 0;
display:block;
padding-top:20px;
color: darken(@medium, 10%);
a:link,a:visited {
color: darken(@medium, 10%);
.transition;
}
a:hover {
color: @medium;
}
}

/* Primary Menu
————————————*/
#primary-menu {
.gradient( lighten( @medium, 7% ), @medium, @light );
.dropdown > li {
background: none transparent;
border-right: 1px solid darken( @medium, 10%);

&:hover, &.current-menu-item, &.current-menu-parent {
.gradient( @light, @light, @medium );

}

a {
border-right: 1px solid @light;
}
}
}

/* Side bar
————————————*/
.widget-area {
.widget-container {
background: lighten( @medium, 7% );
border:1px solid @medium;
padding:5px;
.rounded(7px);

.widget-title {
border-bottom: 1px solid @medium;
padding:7px 0;
font-size: medium;
}

ul{
list-style:none;
padding:0;
margin:0;
}
}
}

/* Loop
————————————*/
.loop-entry {

background-color: lighten( @medium, 8.3% );
border: 4px dashed @medium;
margin-bottom: 10px;
padding: 10px 5px;

.entry-title {
font-size: 24px;
}
}

/* Footer
————————————*/
#footer {
padding: 10px 0;
background: lighten(@medium, 7%);
border-top: 1px solid darken( @medium, 10% );
float:left;
width:100%;
}

/* Secondary Menu
————————————*/
#secondary-menu {
.nav-menu {
margin:0;
padding:0;
li {
float: left;

a {
display: inline-block;
padding:5px;
}
}
}
}
[/code]

نلاحظ في الكود السابق ما يلي:
– استخدمنا بعض الـ mixins مثل .gradient() و .box-shadow() وهي موجودة ضمن مجموعة اخرى من الـ mixins تجدها في اطار ممتاز داخل مجلد styles الموجود بداخل مجلد content باسم mixins.less

الآن، لنجعل قالبنا يدعم اتجاه اللغة العربية “من اليمين لليسار”، نقوم بانشاء ملف ar.less داخل مجلد القالب ونضع به الكود التالي:
[code language=”css”] //Import Momtaz ar.less
@import ‘../momtaz/ar.less’;

/* Global Colors Variables
———————————-*/
@dark: #333;
@medium: #e3e3e3;
@light: #fff;

#site-description{
font-family: Tahoma;
}
#header {
background:url(images/headerbg-rtl.png);
}

#primary-menu {
.dropdown > li {

border-left: 1px solid darken( @medium, 10%);
border-right:0;

a {
border-left: 1px solid @light;
border-right:0;
}
}
}

#header-container .search-form-container {
left:0;
right:auto;
}

#footer {
float:right;
}

#secondary-menu {
.nav-menu {
li {
float: right;
}
}
}
[/code]

تحويل لغة LESS إلى CSS

استخدام لغة LESS في عملية التنسيق هدفه هو التسهيل والسرعة لذلك بعد الانتهاء علينا ان نقوم بتحويل اللغة الى CSS وتعطيل وضع التطوير؛ لنقوم بهذه العملية سنستخدم احد الـ LESS Compilers مثل WinLess.

تحميل القالب

الآن وبعد ان انتهينا من عمل القالب جاء دور تحميله كاملا لاستخدامه، اضغط هنا لتحميل القالب.