تابعنا في الدرس السابق مخطط لعمل وتعرّفنا على ملفات القالب وتعلّمنا طريقة تضبيط ملفّات القالب، ما يجب عليك تفاديه، بعض النقاط التي وجب عليك البحث عنها، إضافةً إلى الخطوات الواجب إتّباعها لإنشاء قالب ووردبريس.
الجزء الثّاني: 2. تخصيص موقعك ووردبريس
يمكنك تصميم موقعك المثاليِّ بداية بإنشاء نموذج للتصميم عن طريق فوتوشوب ومن ثَمَّ تحويل هذا التصميم إلى ملفّات HTML و CSS. بعد ذلك سنقوم بتحويل هذه الملفّات إلى قالب ووردبريس شغّالٍ بالكامِل. تصميم المواقع بواسطة فوتوشوب ومِن ثمَّ تحويلها إلى قوالب ووردبريس هي إحدى أسهل طرقِ تطوير المواقع هذهِ الأيّام. في الحقيقة هذه أحسن طريقة لتوفير مواقع لعملائك في أقل وقت ممكن وبسهولةٍ بالغة.
في هذا الجزء من الدّرس سنقوم بالعملِ على الملفّات التاليّة:
- functions.php
- header.php
- footer.php
- searchform.php
- sidebar.php
- index.php
- single.php
- page.php
- page-about.php
- page-contact.php
- page-contact.php
- search.php
- content-search.php
- comments.php
- php.404
في الجزء الأوّل من هذا الدّرس تعلّمنا كيفيّة تحضير ملفّات HTML و CSS لتحويلها إلى قالب ووردبريس ثم بعد ذلك قمنا بتفعيل هذا القالب. في هذا الجزء ستتعلّم ماهي الأكواد التي يحتاجها قالب ووردبريس والتّي سيتوجّب عليك إضافتها كي تتمكّن من إنشاء قالب ووردبريس يعمل. بنهاية هذا الدّرس ستتحصّل على نفس القالب الذي أريناك صورةً عنه في بداية الجزء الأوّل.
الخطوة 1.2- تعريف الثّوابتِ وتسجيل دعمِ قائمةِ شريط التنقّل
القالب مُفعّلٌ مسبقا! الآن فلنقم بإضافة دعم قائمة التنقّل داخل ملفِّ functions.php. فلنبدأ بإنشاء ملفِّ functions.php في المجلّد الرئيسيِّ لقالبنا. بعد ذلك، فلنقم بتعريف ثوابت مسار مجلّدِ قالبنا. قُم بنسخ الكود أدناه داخل ملفِّ functions.php الذي أنشأناه قبل قليل.
اقتباسملاحظة: بما أنّ هذا ملفّ PHP فإنّ جميع أكواد الدوالّ التي سنضيفها يجب أن تكون ضِمنَ وسمي
< ?phpو?>
<?php /***********************************************************************************************/ /* Define Constants */ /***********************************************************************************************/ define('THEMEDIR', get_stylesheet_directory_uri()); define('IMG', THEMEDIR.'/images'); ?>
بعد ذلك سنحتاج لتسجيل دالّة تفعيل قائمة التنقّل لقالبنا (navbar). قم بنسخ الكود التّالي داخل ملفِّ functions.php.
<?php
add_action('init', 'register_my_menus');
function register_my_menus() {
register_nav_menus(array(
'main-menu' => 'Main Menu'
));
}
?>
تَمّ إضافة معلِّق add_action لتسجيل قائمة التنقّل. المُعامِل الأوّلُ يمثّل الوَسم (أين سنضيف هذا الفِعل) أمّا المُعامِل الثّاني فيمثِّل اسم الدالّة التي سنستدعيها للقيام بتسجيل القائمة.
لتعرف أكثر حول هذا الأمر، اطّلع على هذه الصفحة .
الخطوة 2.2- إنشاء ملفِّ header.php
الآن أنشئ ملفَّ header.php. قم بفتحِ ملفِّ index.html وقم بنسخ كلِّ شيء منه بدءًا من DOCTYPE إلى إغلاق وسم header في هذا الملفِّ ثمّ انسخ كلّ شيءٍ داخل ملفّ header.php الذّي أنشأناه داخل مجلّد قالبنا.
<!DOCTYPE html>
<!--[if IE 8]> <html lang=&"en&" class=&"ie8&"> <![endif]-->
<!--[if !IE]><!--> <html lang=&"en&"> <!--<![endif]-->
<head>
<meta charset=&"utf-8&">
<title>NEOBLOG</title>
<meta name=&"description&" content=&"A simple WordPress blog theme for 1stwebdesigner.com&">
<meta name=&"author&" content=&"Sam Norton&">
<!-- Mobile Specific Meta -->
<meta name=&"viewport&" content=&"width=device-width, initial-scale=1, maximum-scale=1&">
<!-- Stylesheets -->
<link rel=&"stylesheet&" href=&"css/reset.css&" />
<link rel=&"stylesheet&" href=&"css/bootstrap.css&" />
<link rel=&"stylesheet&" href=&"css/style.css&" />
<link href=&"http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css&" rel=&"stylesheet&">
<!--[if lt IE 9]>
<script src=&"http://html5shim.googlecode.com/svn/trunk/html5.js&"></script>
<![endif]-->
</head>
<body>
<!-- HEADER -->
<header class=&"main-header align-center &">
<a href=&"index.html&" class=&"logo&" ><img src=&"images/logo.png&" class=&"img-responsive&" alt=&"NEOBLOG blog theme&" /></a>
<nav class=&"main-nav&">
<ul class=&"inline&">
<li><a href=&"index.html&" class=&"active&">Home</a></li>
<li><a href=&"about.html&">About</a></li>
<li><a href=&"contact.html&">Contact</a></li>
</ul>
</nav>
</header>
بعض وُسومِ HTML سيتِّم تعويضها ببعض دوالّ ووردبريس مثل وسوم: اللّغة، ميتا “meta” وغيرها. أضف معلِّق wp_head قبل إغلاق وسمِ head. يُستخدم هذا المعلِّق لطبع بعضِ مرجعات الدّوال التي سنُضيفها لاحقا، او لجعله يقوم ببعض الأعمال في الخلفيّة. لمزيد من المعلوماتِ راجع دليل ووردبريس. من أجل قائمة التنقّل سنستخدم الدالّة التّي قمنا بإنشائها سابقًا wp_nav_menu لعرض قائمة التنقّل التي أنشأناها من خلال لوحة تحكّمِ المدير في ووردبريس. إعداد theme_location سيقوم بعرض القائمة المعيّنة للمكان المحدّد بالدالّة wp_nav_menu. في حالة لم يتمّ تعيين قائمة لذلك المكان، إعداد fallback_cb سيقوم بتحديد ما سيتّم عرضه. لمزيد من المعلومات حولَ دالّة wp_nav_menu راجع هذه الصّفحة. قم بنسخ الكود التّالي داخل ملفّ header.php لتعويض الكود الذي نسخته من قبل.
<!DOCTYPE html>
<!--[if IE 8]> <html lang=&"en&" class=&"ie8&"> <![endif]-->
<!--[if !IE]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<meta charset=&"<?php bloginfo('charset'); ?>&">
<title><?php wp_title('|', true, 'right');?><?php bloginfo('name');?></title>
<meta name=&"description&" content=&"<?php bloginfo('description'); ?>&">
<meta name=&"author&" content=&"Sam Norton&">
<!-- Mobile Specific Meta -->
<meta name=&"viewport&" content=&"width=device-width, initial-scale=1, maximum-scale=1&">
<!-- Stylesheets -->
<link rel=&"stylesheet&" href=&"<?php bloginfo('stylesheet_url'); ?>&" />
<link rel=&"stylesheet&" href=&"css/bootstrap.css&" />
<link rel=&"stylesheet&" href=&"css/style.css&" />
<link href=&"http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css&" rel=&"stylesheet&">
<!--[if lt IE 9]>
<script src=&"http://html5shim.googlecode.com/svn/trunk/html5.js&"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- HEADER -->
<header class=&"main-header align-center &">
<a href=&"<?php echo home_url(); ?>&" class=&"logo&" ><img src=&"<?php print IMG;?>/logo.png&" class=&"img-responsive&" alt=&"<?php bloginfo('name');?>&" /></a>
<nav class=&"main-nav&">
<?php wp_nav_menu(array( 'theme_location' => 'main-menu',
'container' => '',
'menu_class' => 'inline'
));
?>
</nav>
</header>
الخطوة 2.3- إنشاء ملفِّ footer.php
من أجل هذا الجزء سنقوم بإنشاء ملّف footer.php فارغٍ، ثمّ مجدّدًا نفتح ملفَّ index.html من مجلّد قالب HTML وCSS NeoBlog ثمّ نقوم بنسخ كلِّ شيءٍ انطلاقًا من ”sharing idea section” إلى آخر وسمٍ في هذا الملفِّ ثمّ قم بنسخها في ملفِّ footer.php الذي قمنا بإنشائه داخل مجلّد قالبنا ووردبريس. يجب أن يكون لديك نفس الكود أدناه.
<!-- SHARING IDEAS AREA -->
<section>
<div class=&"sharing-container section-content align-center&">
<h3>WANT TO SHARE YOUR THOUGHTS?</h3>
Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.
<h4><a href=&"contact.html&" >CLICK HERE TO LEARN MORE >>></a></h4>
</div>
</section>
<!-- FOOTER -->
<footer class=&"main-footer section-content align-center&" id=&"contact-info&">
copy; 2014 - <a href=&"https://1stwebdesigner.com/&" target=&"_blank&">NEOBLOG theme</a> by <a target=&"_blank&" href=&"https://twitter.com/NickDalusung&">Sam Norton</a>
</footer>
</body>
</html>
مثلما فعلنا في السّابقِ مع ملفِّ header.php سنقوم مجدّدًا بتعويض بعض وسوم HTML بدوالِّ ووردبريس مثل رابطٍ للصفحة الرئيسية، السّنة الحاليّة ومعلومات المدوّنة.
ألقِ نظرةً على الكود أدناه:
<!-- SHARING IDEAS AREA -->
<section>
<div class=&"sharing-container section-content align-center&">
<h3>WANT TO SHARE YOUR THOUGHTS?</h3>
Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.
<h4><a href=&"<?php home_url(); ?>&" >CLICK HERE TO LEARN MORE >>></a></h4>
</div>
</section>
<!-- FOOTER -->
<footer class=&"main-footer section-content align-center&" id=&"contact-info&">
copy; <?php echo date('Y'); ?> - <a href=&"<?php home_url(); ?>&"><?php echo bloginfo('name'); ?></a> by <a target=&"_blank&" href=&"https://twitter.com/NickDalusung&">Sam Norton</a>
</footer>
<?php wp_footer(); ?>
</body>
</html>
الخطوة 2.4- العمل مع ملفِّ searchform.php
التّالي على القائمة سيكون وضع الترميز (باستخدام دوالّ ووردبريس)، الذي سيقوم بإظهار صندوق البحث في القائمة الجانبيّة. قم بإنشاء ملفِّ searchform.php ثمّ انسخ الكود التّالي بداخله.
اقتباسملاحظة: معظم الكلاسات التي تراها هنا مصدرها صندوق البحث في ملفِّ
index.html.
<div class=&"controller&">
<form role=&"search&" method=&"get&" class=&"search-form&" action=&"<?php echo home_url(); ?>&">
<input type='textbox' name=&"s&" class=&"form-control&" id=&"search-box&" value=&"<?php the_search_query(); ?>&" placeholder=&"Search..&"/>
<input class=&"btn btn-primary no-border&" type=&"submit&" class=&"search-submit&" value=&"Search&" />
</form>
</div>
لاحِظ أنّنا استخدمنا دالّة the_search_query كقيمة لصندوق البحث، وهذا لإظهار الكلمات التي نبحث عنها داخل صندوق البحث في حالة قِيامنا بعمليِّة بحثٍ ما.
الخطوة 2.5- العمل مع ملفِّ sidebar.php
قبل البدءِ بإنشاء ملفِّ sidebar.php علينا أوّلًا تسجيل القائمة الجانبيّة في ملفِّ functions.php. قُم بفتح ملفِّ functions.php وأضِف له الكود التّالي
<?php
register_sidebar( array(
'id' => 'main-sidebar',
'name' => __( 'Main Sidebar', $text_domain ),
'description' => __( 'This the main sidebar.', $text_domain ),
) );
?>
الكود أعلاه سيقوم بإنشاء تعريفٍ للقائمة الجانبيّة ويقوم بإرجاع المُعرِّف. بعد هذا فلنقم باستدعاء هذه القائمة. بدايةً سنُنشِئ ملفَّ sidebar.php في مجلّد قالبنا الرئيسيِّ ثمّ بعد ذلك أنسخ هذا الكود بداخله.
<?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?>
<?php dynamic_sidebar( 'main-sidebar' ); ?>
<?php endif; ?>
هذا الكود يحتوي على دالّةٍ تقوم باستدعاء الوِدجت ذات المعرّفِ main-sidebar وتقوم بطبعها في القائمة الجانبيّة ولكن قبل ذلك ستتحقّق أنّ الوِدجت مُفعّلة من لوحة التحكّم.
ترجمة -وبتصرّف- للمقال How to Convert a Static HTML Template into a Responsive WordPress Theme
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.