<?xml version="1.0"?>
<rss version="2.0"><channel><title>&#x627;&#x644;&#x628;&#x631;&#x645;&#x62C;&#x629;: &#x628;&#x631;&#x645;&#x62C;&#x629; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633;</title><link>https://academy.hsoub.com/programming/php/wordpress/page/3/?d=2</link><description>&#x627;&#x644;&#x628;&#x631;&#x645;&#x62C;&#x629;: &#x628;&#x631;&#x645;&#x62C;&#x629; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633;</description><language>ar</language><item><title>&#x62A;&#x637;&#x648;&#x64A;&#x631; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633; &#x644;&#x644;&#x645;&#x628;&#x62A;&#x62F;&#x626;&#x64A;&#x646;: &#x628;&#x646;&#x627;&#x621; &#x627;&#x644;&#x642;&#x648;&#x627;&#x644;&#x628; Themes</title><link>https://academy.hsoub.com/programming/php/wordpress/%D8%AA%D8%B7%D9%88%D9%8A%D8%B1-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86-%D8%A8%D9%86%D8%A7%D8%A1-%D8%A7%D9%84%D9%82%D9%88%D8%A7%D9%84%D8%A8-themes-r593/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2018_01/07-2.png.1cd4c0be284341f9d1ef8e76d584a762.png" /></p>

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

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<div class="ipsQuote_contents ipsClearfix">
		<p>
			<strong>ملاحظة:</strong> من أجل هذا الدرس، من المهم أن تكون على معرفة بـ Html و CSS لأنهما لغتان أساسيتان من أجل العمل مع ووردبريس.
		</p>
	</div>
</blockquote>

<h2>
	البداية
</h2>

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

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_1367_7" style="">
<span class="com">/*
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.
*/</span></pre>

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

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileid="26425" href="https://academy.hsoub.com/uploads/monthly_2018_01/img-1.png.5e98a7e5e18760bbcceeb16f5eb18406.png" rel=""><img alt="img-1.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26425" data-unique="osvyu2t2w" src="https://academy.hsoub.com/uploads/monthly_2018_01/img-1.thumb.png.ac4f35be8dce2defc586d618b389db44.png"></a>
</p>

<h2 id="كيف-تعمل-ملفات-قوالب-ووردبريس">
	كيف تعمل ملفات قوالب ووردبريس
</h2>

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

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_1367_7" style="">
<code class="hljs xml"><span class="hljs-doctype"><span class="dec">&lt;!DOCTYPE html&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">html</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">head</span></span><span class="tag">&gt;</span></span><span class="pln">
  </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">title</span></span><span class="tag">&gt;</span></span><span class="pln">A single post template</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">title</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">head</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">body</span></span><span class="tag">&gt;</span></span><span class="pln">

  </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">id</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"site-header"</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h1</span></span><span class="tag">&gt;</span></span><span class="pln">Welcome to my site</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h1</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">nav</span></span><span class="tag">&gt;</span></span><span class="pln">
      </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">ul</span></span><span class="tag">&gt;</span></span><span class="pln">
        </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">''</span></span><span class="tag">&gt;</span></span><span class="pln">Home</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="pln">  
        </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">''</span></span><span class="tag">&gt;</span></span><span class="pln">About</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="pln">  
        </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">''</span></span><span class="tag">&gt;</span></span><span class="pln">Contact</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="pln">  
      </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">ul</span></span><span class="tag">&gt;</span></span><span class="pln">  
    </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">nav</span></span><span class="tag">&gt;</span></span><span class="pln">
  </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">

  </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">id</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"article"</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h2</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"article-title"</span></span><span class="tag">&gt;</span></span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_title</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h2</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"article-content"</span></span><span class="tag">&gt;</span></span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_content</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"article-meta"</span></span><span class="tag">&gt;</span></span><span class="pln">Published on </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_time</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Y-m-d"</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln"> by </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_author</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">
  </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">

  </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">id</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"site-footer"</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">nav</span></span><span class="tag">&gt;</span></span><span class="pln">
      </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">ul</span></span><span class="tag">&gt;</span></span><span class="pln">
        </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">''</span></span><span class="tag">&gt;</span></span><span class="pln">Home</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="pln">  
        </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">''</span></span><span class="tag">&gt;</span></span><span class="pln">About</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="pln">  
        </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">''</span></span><span class="tag">&gt;</span></span><span class="pln">Contact</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="pln">  
      </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">ul</span></span><span class="tag">&gt;</span></span><span class="pln">  
    </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">nav</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">id</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"copyright"</span></span><span class="tag">&gt;</span></span><span class="pln">&amp;copy; Daniel Pataki</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">
  </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">body</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">html</span></span><span class="tag">&gt;</span></span></code></pre>

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

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_1367_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> get_header</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">id</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"article"</span></span><span class="tag">&gt;</span></span><span class="pln">
  </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h2</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"article-title"</span></span><span class="tag">&gt;</span></span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_title</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h2</span></span><span class="tag">&gt;</span></span><span class="pln">
  </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"article-content"</span></span><span class="tag">&gt;</span></span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_content</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">
  </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"article-meta"</span></span><span class="tag">&gt;</span></span><span class="pln">Published on </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_time</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Y-m-d"</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln"> by </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_author</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> get_sidebar</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> get_footer</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

<h2 id="كيف-تعمل-قوالب-ووردبريس">
	كيف تعمل قوالب ووردبريس
</h2>

<p>
	سوف نستعمل مجموعة من ملفات قالب ووردبريس في قالبنا الذي نقوم بصنعه، ما نحتاج لمعرفته هو أسماء الملفات التي تلزمنا لعمل الصفحات الأساسية للموقع وأسماء هذه الملفات محددة في وردبريس من <a href="https://developer.wordpress.org/themes/basics/template-hierarchy/" rel="external nofollow">التسلسل الهرمي</a> لملفات قوالب ووردبريس. لنلقي نظرة على أنواع الصفحات التي نحتاجها:
</p>

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

<h2 id="لنقم-ببناء-قالب">
	لنقم ببناء قالب
</h2>

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

<h3 id="بناء-الأساسيات">
	بناء الأساسيات
</h3>

<p>
	عادة أقوم بعمل صورة للقالب كي يتم عرضه في لوحة تحكم ووردبريس في تفاصيل القالب. هذ ليس مطلوبًا بشدة عند بناء قالب لكنه يعطيني انطلاقة جيدة وإلهام لما سيكون عليه القالب إذا كان لديك صورة للتصميم فمن الأفضل أن تضعها، أو يمكنك الاستعانة بموقع <a href="https://unsplash.com/" rel="external nofollow">Unsplash</a>. عندما تحصل على صورة تعجبك، قم بقصها لتصبح بعرض 880px وبطول 660px، قم بتسميتها <code>screenshot.png</code> وضعها في مجلد القالب إذا أردت صورة بسرعة فيمكنك الاستعانة بهذه الصورة التي قم بعملها وتنزيلها من <a href="https://premium.wpmudev.org/blog/wp-content/uploads/2015/12/screenshot.png" rel="external nofollow">هنا</a>.
</p>

<p style="text-align: center;">
	<img alt="img-2.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26424" data-unique="lt0w421hi" src="https://academy.hsoub.com/uploads/monthly_2018_01/img-2.png.b3539cc558d08f8140344fab4c20e7c4.png"></p>

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

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_1367_7" style="">
<code class="hljs xml"><span class="hljs-doctype"><span class="dec">&lt;!DOCTYPE html&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">html</span></span><span class="pln"> </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> language_attributes</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">class</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">"no-js"</span></span><span class="pln">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">head</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">meta</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">charset</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">"</span><span class="pun">&lt;?</span><span class="pln">php bloginfo</span><span class="pun">(</span><span class="pln"> </span><span class="str">'charset'</span><span class="pln"> </span><span class="pun">);</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">"</span></span><span class="pln">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">meta</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">name</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"viewport"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">content</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"width=device-width, initial-scale=1"</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">link</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">rel</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"profile"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"http://gmpg.org/xfn/11"</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> wp_head</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">head</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">body</span></span><span class="pln"> </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> body_class</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">&gt;</span></span><span class="pln">

الآن سنقوم بإنشاء ملف footer.php الذي سيحتوي وسوم الإغلاق للوسوم المفتوحة في ملف header.php :
</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> wp_footer</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">body</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">html</span></span><span class="tag">&gt;</span></span></code></pre>

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

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_1367_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> get_header</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

My Awesome Theme

</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> get_footer</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

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

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_1367_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln">
add_action</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'wp_enqueue_scripts'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'mat_assets'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">mat_assets</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    wp_enqueue_style</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'my-awesome-theme'</span></span><span class="pun">,</span><span class="pln"> get_stylesheet_uri</span><span class="pun">()</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span></span></code></pre>

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

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5258_7" style="">
<span class="pln">body </span><span class="pun">{</span><span class="pln">background</span><span class="pun">:</span><span class="pln">red</span><span class="pun">}</span><span class="pln">
</span></pre>

<p style="text-align: center;">
	<img alt="img-3.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="26423" data-unique="sxuldj02f" src="https://academy.hsoub.com/uploads/monthly_2018_01/img-3.jpg.b1c43d3b349204388feeafd4b67bac94.jpg"></p>

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

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_1367_7" style="">
<code class="hljs xml"><span class="hljs-doctype"><span class="dec">&lt;!DOCTYPE html&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">html</span></span><span class="pln"> </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> language_attributes</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">class</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">"no-js"</span></span><span class="pln">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">head</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">meta</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">charset</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">"</span><span class="pun">&lt;?</span><span class="pln">php bloginfo</span><span class="pun">(</span><span class="pln"> </span><span class="str">'charset'</span><span class="pln"> </span><span class="pun">);</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">"</span></span><span class="pln">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">meta</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">name</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"viewport"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">content</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"width=device-width, initial-scale=1"</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">link</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">rel</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"profile"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"http://gmpg.org/xfn/11"</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> wp_head</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">head</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">body</span></span><span class="pln"> </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> body_class</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">&gt;</span></span><span class="pln">

</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">id</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"site-header"</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h1</span></span><span class="tag">&gt;</span></span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> bloginfo</span><span class="pun">(</span><span class="hljs-string"><span class="str">'title'</span></span><span class="pun">)</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h1</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">id</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">'site-content'</span></span><span class="tag">&gt;</span></span></code></pre>

<p>
	في ملف <code>footer.php</code>:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_1367_7" style="">
<code class="hljs xml"><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln"> </span><span class="hljs-comment"><span class="com">&lt;!-- site content --&gt;</span></span><span class="pln">

</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">id</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">'site-footer'</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">p</span></span><span class="tag">&gt;</span></span><span class="pln">&amp;copy; My Awesome Theme</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">p</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> wp_footer</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">body</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">html</span></span><span class="tag">&gt;</span></span></code></pre>

<p>
	في ملف <code>style.css</code>:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_1367_7" style="">
<code class="hljs css"><span class="hljs-comment"><span class="com">/*
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.
*/</span></span><span class="pln">


</span><span class="hljs-tag"><span class="pln">html</span></span><span class="pln"> </span><span class="hljs-rules"><span class="pun">{</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">height</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-number"><span class="lit">100</span></span><span class="pun">%</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">background</span></span><span class="pun">:</span><span class="hljs-value"><span class="hljs-hexcolor"><span class="pun">#</span><span class="lit">444</span></span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">font</span><span class="pun">-</span><span class="pln">family</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-string"><span class="str">"Helvetica Neue"</span></span><span class="pun">,</span><span class="pln"> </span><span class="typ">Arial</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">line</span><span class="pun">-</span><span class="pln">height</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-number"><span class="lit">1.5</span></span><span class="lit">em</span></span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-rule"><span class="pun">}</span></span></span><span class="pln">

</span><span class="hljs-id"><span class="com">#site-header</span></span><span class="com"> </span><span class="hljs-rules"><span class="com">{</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> center</span></span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-rule"><span class="pun">}</span></span></span><span class="pln">

</span><span class="hljs-id"><span class="com">#site-header</span></span><span class="com"> </span><span class="hljs-tag"><span class="com">h1</span></span><span class="com"> </span><span class="hljs-rules"><span class="com">{</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">font</span><span class="pun">-</span><span class="pln">size</span></span><span class="pun">:</span><span class="hljs-value"><span class="hljs-number"><span class="lit">32</span></span><span class="lit">px</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">color</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-hexcolor"><span class="com">#ffffff</span></span></span></span><span class="com">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">font</span><span class="pun">-</span><span class="pln">weight</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-number"><span class="lit">300</span></span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">letter</span><span class="pun">-</span><span class="pln">spacing</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-number"><span class="lit">1</span></span><span class="lit">px</span></span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-rule"><span class="pun">}</span></span></span><span class="pln">


</span><span class="hljs-id"><span class="com">#site-content</span></span><span class="com"> </span><span class="hljs-rules"><span class="com">{</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">max</span><span class="pun">-</span><span class="pln">width</span></span><span class="pun">:</span><span class="hljs-value"><span class="hljs-number"><span class="lit">625</span></span><span class="lit">px</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">background</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-hexcolor"><span class="com">#fff</span></span></span></span><span class="com">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">margin</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-number"><span class="lit">0</span></span><span class="pln"> </span><span class="kwd">auto</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">padding</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-number"><span class="lit">22</span></span><span class="lit">px</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span></span><span class="pun">:</span><span class="hljs-value"><span class="hljs-number"><span class="lit">5</span></span><span class="lit">px</span></span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-rule"><span class="pun">}</span></span></span><span class="pln">


</span><span class="hljs-id"><span class="com">#site-footer</span></span><span class="com"> </span><span class="hljs-rules"><span class="com">{</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">color</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-hexcolor"><span class="com">#fff</span></span></span></span><span class="com">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln">center</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">font</span><span class="pun">-</span><span class="pln">size</span></span><span class="pun">:</span><span class="hljs-value"><span class="hljs-number"><span class="lit">12</span></span><span class="lit">px</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">text</span><span class="pun">-</span><span class="pln">transform</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> uppercase</span></span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-rule"><span class="pun">}</span></span></span></code></pre>

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

<h3 id="فهم-حلقة-ووردبريس">
	فهم حلقة ووردبريس
</h3>

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

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_1367_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pun">(</span><span class="pln"> have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
    </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">while</span></span><span class="pun">(</span><span class="pln"> have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> the_post</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
        </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h2</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">href</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">'</span><span class="pun">&lt;?</span><span class="pln">php the_permalink</span><span class="pun">()</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">'</span></span><span class="pln">&gt;</span></span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_title</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h2</span></span><span class="tag">&gt;</span></span><span class="pln">
        </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"content"</span></span><span class="tag">&gt;</span></span><span class="pln">
            </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_content</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
        </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">endwhile</span></span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">else</span></span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">p</span></span><span class="tag">&gt;</span></span><span class="pln">Oh No, there are no posts!</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">p</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">endif</span></span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

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

<p style="text-align: center;">
	<img alt="img-4.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="26422" data-unique="1p2ruixjh" src="https://academy.hsoub.com/uploads/monthly_2018_01/img-4.jpg.fe2f1cd8951a2d130853ccf652f282b3.jpg"></p>

<p>
	من الآن وصاعدًا عرض المقال بطرق مختلفة هي مسألة معرفة الدوال التي تستخدمها ووردبريس وإضافة بعض تعليمات CSS لجعل قالبك رائع، إليك بعض <a href="https://codex.wordpress.org/Template_Tags" rel="external nofollow">الدوال المفيدة</a> التي تساعدك في عرض التصنيفات، الوسوم، تاريخ المقالات وأكثر من ذلك.
</p>

<h3 id="القوالب-وعبارة-if">
	القوالب وعبارة if
</h3>

<p>
	ماذا تفعل إذا أردت عرض مقتطف من المقالات في الصفحة الرئيسية وكامل المقال في حال عرض المقال الواحد؟ في هذه الحالة لديك خيارين استخدام الدوال الشرطية التي توفرها ووردبريس أو عمل ملف قالب جديد. الدوال الشرطية التي توفرها ووردبريس تستخدم للتحقق من أشياء عديدة، على سبيل المثال إذا أردت معرفة إذا كنت تعرض مقال واحد أو عدة مقالات، إليك اللائحة الكاملة لهذه الدوال على <a href="https://codex.wordpress.org/Conditional_Tags" rel="external nofollow">موقع ووردبريس</a> بمساعدة دالة ()<code>is_singular</code> يمكننا فعل التالي:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_1367_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> get_header</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pun">(</span><span class="pln"> have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
    </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">while</span></span><span class="pun">(</span><span class="pln"> have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> the_post</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
        </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h2</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">href</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">'</span><span class="pun">&lt;?</span><span class="pln">php the_permalink</span><span class="pun">()</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">'</span></span><span class="pln">&gt;</span></span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_title</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h2</span></span><span class="tag">&gt;</span></span><span class="pln">
        </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"content"</span></span><span class="tag">&gt;</span></span><span class="pln">
            </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pun">(</span><span class="pln"> is_singular</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
                </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_content</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
            </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">else</span></span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
                </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_excerpt</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
            </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">endif</span></span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
        </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">endwhile</span></span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">else</span></span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">p</span></span><span class="tag">&gt;</span></span><span class="pln">Oh No, there are no posts!</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">p</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">endif</span></span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> get_footer</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

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

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_1367_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> get_header</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> 
    </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pun">(</span><span class="pln"> have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="hljs-keyword"><span class="kwd">while</span></span><span class="pun">(</span><span class="pln"> have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> 
            the_post</span><span class="pun">();</span><span class="pln">
            get_template_part</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'template-parts/content'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">''</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">else</span></span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        get_template_part</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'template-parts/content'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'none'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">

    </span><span class="pun">}</span><span class="pln">
</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> get_footer</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

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

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_1367_7" style="">
<code class="hljs xml"><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h2</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">href</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">'</span><span class="pun">&lt;?</span><span class="pln">php the_permalink</span><span class="pun">()</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">'</span></span><span class="pln">&gt;</span></span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_title</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h2</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"content"</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_excerpt</span><span class="pun">()</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span></code></pre>

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

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://premium.wpmudev.org/blog/theme-development/" rel="external nofollow">WordPress Development for Beginners: Building Themes</a> لصاحبه Daniel Pataki
</p>
]]></description><guid isPermaLink="false">593</guid><pubDate>Sun, 07 Jan 2018 14:08:00 +0000</pubDate></item><item><title>&#x643;&#x64A;&#x641; &#x62A;&#x62D;&#x648;&#x651;&#x650;&#x644; &#x642;&#x627;&#x644;&#x628; HTML &#x633;&#x627;&#x643;&#x650;&#x646; &#x625;&#x644;&#x649; &#x642;&#x627;&#x644;&#x628; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633; &#x645;&#x62A;&#x62C;&#x627;&#x648;&#x628;: &#x62A;&#x62E;&#x635;&#x64A;&#x635; &#x627;&#x644;&#x645;&#x648;&#x642;&#x639;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D9%83%D9%8A%D9%81-%D8%AA%D8%AD%D9%88%D9%91%D9%90%D9%84-%D9%82%D8%A7%D9%84%D8%A8-html-%D8%B3%D8%A7%D9%83%D9%90%D9%86-%D8%A5%D9%84%D9%89-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8-%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5-%D8%A7%D9%84%D9%85%D9%88%D9%82%D8%B9-r592/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2018_01/05-2.png.7b8be35dbc3e3b4397a6b4c76a76e672.png" /></p>

<p>
	تابعنا في <a href="https://academy.hsoub.com/programming/php/wordpress/%D9%83%D9%8A%D9%81-%D8%AA%D8%AD%D9%88%D9%91%D9%90%D9%84-%D9%82%D8%A7%D9%84%D8%A8-html-%D8%B3%D8%A7%D9%83%D9%90%D9%86-%D8%A5%D9%84%D9%89-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8-%D8%A7%D9%84%D8%AA%D8%AD%D8%B6%D9%8A%D8%B1-%D9%84%D9%84%D8%AA%D8%AD%D9%88%D9%8A%D9%84%D8%8C-%D9%86%D8%B3%D8%AE-%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA-%D9%88%D8%AA%D9%81%D8%B9%D9%8A%D9%84-%D8%A7%D9%84%D9%82%D8%A7%D9%84%D8%A8-r581/" rel="">الدرس السابق</a> مخطط لعمل وتعرّفنا على ملفات القالب وتعلّمنا طريقة تضبيط ملفّات القالب، ما يجب عليك تفاديه، بعض النقاط التي وجب عليك البحث عنها، إضافةً إلى الخطوات الواجب إتّباعها لإنشاء قالب ووردبريس.
</p>

<h2 id="الجزء-الثاني-2-تخصيص-موقعك-ووردبريس">
	الجزء الثّاني: 2. تخصيص موقعك ووردبريس
</h2>

<p>
	يمكنك تصميم موقعك المثاليِّ بداية بإنشاء نموذج للتصميم عن طريق فوتوشوب ومن ثَمَّ تحويل هذا التصميم إلى ملفّات HTML و CSS. بعد ذلك سنقوم بتحويل هذه الملفّات إلى قالب ووردبريس شغّالٍ بالكامِل. تصميم المواقع بواسطة فوتوشوب ومِن ثمَّ تحويلها إلى قوالب ووردبريس هي إحدى أسهل طرقِ تطوير المواقع هذهِ الأيّام. في الحقيقة هذه أحسن طريقة لتوفير مواقع لعملائك في أقل وقت ممكن وبسهولةٍ بالغة.<br>
	في هذا الجزء من الدّرس سنقوم بالعملِ على الملفّات التاليّة:
</p>

<ul>
<li>
		functions.php
	</li>
	<li>
		header.php
	</li>
	<li>
		footer.php
	</li>
	<li>
		searchform.php
	</li>
	<li>
		sidebar.php
	</li>
	<li>
		index.php
	</li>
	<li>
		single.php
	</li>
	<li>
		page.php
	</li>
	<li>
		page-about.php
	</li>
	<li>
		page-contact.php
	</li>
	<li>
		page-contact.php
	</li>
	<li>
		search.php
	</li>
	<li>
		content-search.php
	</li>
	<li>
		comments.php
	</li>
	<li>
		php.404
	</li>
</ul>
<p>
	في <a href="https://academy.hsoub.com/programming/php/wordpress/%D9%83%D9%8A%D9%81-%D8%AA%D8%AD%D9%88%D9%91%D9%90%D9%84-%D9%82%D8%A7%D9%84%D8%A8-html-%D8%B3%D8%A7%D9%83%D9%90%D9%86-%D8%A5%D9%84%D9%89-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8-%D8%A7%D9%84%D8%AA%D8%AD%D8%B6%D9%8A%D8%B1-%D9%84%D9%84%D8%AA%D8%AD%D9%88%D9%8A%D9%84%D8%8C-%D9%86%D8%B3%D8%AE-%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA-%D9%88%D8%AA%D9%81%D8%B9%D9%8A%D9%84-%D8%A7%D9%84%D9%82%D8%A7%D9%84%D8%A8-r581/" rel="">الجزء الأوّل</a> من هذا الدّرس تعلّمنا كيفيّة تحضير ملفّات HTML و CSS لتحويلها إلى قالب ووردبريس ثم بعد ذلك قمنا بتفعيل هذا القالب. في هذا الجزء ستتعلّم ماهي الأكواد التي يحتاجها قالب ووردبريس والتّي سيتوجّب عليك إضافتها كي تتمكّن من إنشاء قالب ووردبريس يعمل. بنهاية هذا الدّرس ستتحصّل على نفس القالب الذي أريناك صورةً عنه في بداية الجزء الأوّل.
</p>

<h3 id="الخطوة-12-تعريف-الثوابت-وتسجيل-دعم-قائمة-شريط-التنقل">
	الخطوة 1.2- تعريف الثّوابتِ وتسجيل دعمِ قائمةِ شريط التنقّل
</h3>

<p>
	القالب مُفعّلٌ مسبقا! الآن فلنقم بإضافة دعم قائمة التنقّل داخل ملفِّ <code>functions.php</code>. فلنبدأ بإنشاء ملفِّ <code>functions.php</code> في المجلّد الرئيسيِّ لقالبنا. بعد ذلك، فلنقم بتعريف ثوابت مسار مجلّدِ قالبنا. قُم بنسخ الكود أدناه داخل ملفِّ <code>functions.php</code> الذي أنشأناه قبل قليل.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<div class="ipsQuote_contents ipsClearfix">
		<p>
			<strong>ملاحظة</strong>: بما أنّ هذا ملفّ PHP فإنّ جميع أكواد الدوالّ التي سنضيفها يجب أن تكون ضِمنَ وسمي <code>&lt; ?php</code> و <code>?&gt;</code>
		</p>
	</div>
</blockquote>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_3506_7" style="">
<span class="pun">&lt;?</span><span class="pln">php 
</span><span class="com">/***********************************************************************************************/</span><span class="pln">
</span><span class="com">/* Define Constants */</span><span class="pln">
</span><span class="com">/***********************************************************************************************/</span><span class="pln">
define</span><span class="pun">(</span><span class="str">'THEMEDIR'</span><span class="pun">,</span><span class="pln"> get_stylesheet_directory_uri</span><span class="pun">());</span><span class="pln">
define</span><span class="pun">(</span><span class="str">'IMG'</span><span class="pun">,</span><span class="pln"> THEMEDIR</span><span class="pun">.</span><span class="str">'/images'</span><span class="pun">);</span><span class="pln">

</span><span class="pun">?&gt;</span></pre>

<p>
	بعد ذلك سنحتاج لتسجيل دالّة تفعيل قائمة التنقّل لقالبنا (navbar). قم بنسخ الكود التّالي داخل ملفِّ <code>functions.php</code>.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_3506_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> 
add_action</span><span class="pun">(</span><span class="hljs-string"><span class="str">'init'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'register_my_menus'</span></span><span class="pun">);</span><span class="pln">
 </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">register_my_menus</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
   register_nav_menus</span><span class="pun">(</span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
       </span><span class="hljs-string"><span class="str">'main-menu'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'Main Menu'</span></span><span class="pln">
      </span><span class="pun">));</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

<p>
	تَمّ إضافة معلِّق <code>add_action</code> لتسجيل قائمة التنقّل. المُعامِل الأوّلُ يمثّل الوَسم (أين سنضيف هذا الفِعل) أمّا المُعامِل الثّاني فيمثِّل اسم الدالّة التي سنستدعيها للقيام بتسجيل القائمة.<br>
	لتعرف أكثر حول هذا الأمر، اطّلع على هذه <a href="https://developer.wordpress.org/reference/functions/add_action/" rel="external nofollow">الصفحة</a> .
</p>

<h3 id="الخطوة-22-إنشاء-ملف-headerphp">
	الخطوة 2.2- إنشاء ملفِّ header.php
</h3>

<p>
	الآن أنشئ ملفَّ <code>header.php</code>. قم بفتحِ ملفِّ <code>index.html</code> وقم بنسخ كلِّ شيء منه بدءًا من <code>DOCTYPE</code> إلى إغلاق وسم <code>header</code> في هذا الملفِّ ثمّ انسخ كلّ شيءٍ داخل ملفّ <code>header.php</code> الذّي أنشأناه داخل مجلّد قالبنا.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_3506_7" style="">
<code class="hljs xml"><span class="hljs-doctype"><span class="dec">&lt;!DOCTYPE html&gt;</span></span><span class="pln">
</span><span class="hljs-comment"><span class="com">&lt;!--[if IE 8]&gt; &lt;html lang=&amp;"en&amp;" class=&amp;"ie8&amp;"&gt; &lt;![endif]--&gt;</span></span><span class="pln">
</span><span class="hljs-comment"><span class="com">&lt;!--[if !IE]&gt;&lt;!--&gt;</span></span><span class="pln"> </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">html</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">lang</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"en&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln"> </span><span class="hljs-comment"><span class="com">&lt;!--&lt;![endif]--&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">head</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">meta</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">charset</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"utf-8&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">title</span></span><span class="tag">&gt;</span></span><span class="pln">NEOBLOG</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">title</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">meta</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">name</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"description&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">content</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"A</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">simple</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">WordPress</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">blog</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">theme</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">for</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">1stwebdesigner.com</span></span><span class="atv">&amp;"</span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">meta</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">name</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"author&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">content</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"Sam</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">Norton</span></span><span class="atv">&amp;"</span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-comment"><span class="com">&lt;!-- Mobile Specific Meta --&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">meta</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">name</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"viewport&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">content</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"width=device-width,</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">initial-scale</span></span><span class="atv">=</span><span class="hljs-value"><span class="atv">1,</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">maximum-scale</span></span><span class="atv">=</span><span class="hljs-value"><span class="atv">1&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-comment"><span class="com">&lt;!-- Stylesheets --&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">link</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">rel</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"stylesheet&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"css</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">reset.css</span></span><span class="atv">&amp;"</span><span class="pln"> </span><span class="tag">/&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">link</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">rel</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"stylesheet&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"css</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">bootstrap.css</span></span><span class="atv">&amp;"</span><span class="pln"> </span><span class="tag">/&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">link</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">rel</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"stylesheet&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"css</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">style.css</span></span><span class="atv">&amp;"</span><span class="pln"> </span><span class="tag">/&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">link</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"http:</span></span><span class="atv">//</span><span class="hljs-attribute"><span class="atv">maxcdn.bootstrapcdn.com</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">font-awesome</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">4.1.0</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">css</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">font-awesome.min.css</span></span><span class="atv">&amp;"</span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">rel</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"stylesheet&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-comment"><span class="com">&lt;!--[if lt IE 9]&gt;
&lt;script src=&amp;"http://html5shim.googlecode.com/svn/trunk/html5.js&amp;"&gt;&lt;/script&gt;
&lt;![endif]--&gt;</span></span><span class="pln">

</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">head</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">body</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-comment"><span class="com">&lt;!-- HEADER --&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">header</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"main-header</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">align-center</span></span><span class="atv"> &amp;"</span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"index.html&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"logo&amp;"</span></span><span class="pln"> </span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">img</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">src</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"images</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">logo.png</span></span><span class="atv">&amp;"</span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"img-responsive&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">alt</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"NEOBLOG</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">blog</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">theme</span></span><span class="atv">&amp;"</span><span class="pln"> </span><span class="tag">/&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">nav</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"main-nav&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">ul</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"inline&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"index.html&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"active&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">Home</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"about.html&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">About</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"contact.html&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">Contact</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">li</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">ul</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">nav</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">header</span></span><span class="tag">&gt;</span></span></code></pre>

<p>
	بعض وُسومِ HTML سيتِّم تعويضها ببعض دوالّ ووردبريس مثل وسوم: اللّغة، ميتا “<code>meta</code>” وغيرها. أضف معلِّق <code>wp_head</code> قبل إغلاق وسمِ <code>head</code>. يُستخدم هذا المعلِّق لطبع بعضِ مرجعات الدّوال التي سنُضيفها لاحقا، او لجعله يقوم ببعض الأعمال في الخلفيّة. لمزيد من المعلوماتِ راجع <a href="https://codex.wordpress.org/" rel="external nofollow">دليل ووردبريس</a>. من أجل قائمة التنقّل سنستخدم الدالّة التّي قمنا بإنشائها سابقًا <code>wp_nav_menu</code> لعرض قائمة التنقّل التي أنشأناها من خلال لوحة تحكّمِ المدير في ووردبريس. إعداد <code>theme_location</code> سيقوم بعرض القائمة المعيّنة للمكان المحدّد بالدالّة <code>wp_nav_menu</code>. في حالة لم يتمّ تعيين قائمة لذلك المكان، إعداد <code>fallback_cb</code> سيقوم بتحديد ما سيتّم عرضه. لمزيد من المعلومات حولَ دالّة <code>wp_nav_menu</code> راجع هذه الصّفحة. قم بنسخ الكود التّالي داخل ملفّ <code>header.php</code> لتعويض الكود الذي نسخته من قبل.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_3506_7" style="">
<code class="hljs xml"><span class="hljs-doctype"><span class="dec">&lt;!DOCTYPE html&gt;</span></span><span class="pln">
</span><span class="hljs-comment"><span class="com">&lt;!--[if IE 8]&gt; &lt;html lang=&amp;"en&amp;" class=&amp;"ie8&amp;"&gt; &lt;![endif]--&gt;</span></span><span class="pln">
</span><span class="hljs-comment"><span class="com">&lt;!--[if !IE]&gt;&lt;!--&gt;</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">html</span></span><span class="pln"> </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> language_attributes</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">&gt;</span></span><span class="pln"> </span><span class="hljs-comment"><span class="com">&lt;!--&lt;![endif]--&gt;</span></span><span class="pln">

</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">head</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">meta</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">charset</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">&amp;"</span><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">bloginfo</span></span><span class="pun">(</span><span class="str">'</span><span class="hljs-attribute"><span class="str">charset</span></span><span class="str">'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">?&gt;</span></span><span class="pln">&amp;"&gt;
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">title</span></span><span class="tag">&gt;</span></span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> wp_title</span><span class="pun">(</span><span class="hljs-string"><span class="str">'|'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">true</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'right'</span></span><span class="pun">);</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> bloginfo</span><span class="pun">(</span><span class="hljs-string"><span class="str">'name'</span></span><span class="pun">);</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">title</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">meta</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">name</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">&amp;"description&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">content</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">&amp;"</span><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">bloginfo</span></span><span class="pun">(</span><span class="str">'</span><span class="hljs-attribute"><span class="str">description</span></span><span class="str">'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">?&gt;</span></span><span class="pln">&amp;"&gt;
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">meta</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">name</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"author&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">content</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"Sam</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">Norton</span></span><span class="atv">&amp;"</span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-comment"><span class="com">&lt;!-- Mobile Specific Meta --&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">meta</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">name</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"viewport&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">content</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"width=device-width,</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">initial-scale</span></span><span class="atv">=</span><span class="hljs-value"><span class="atv">1,</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">maximum-scale</span></span><span class="atv">=</span><span class="hljs-value"><span class="atv">1&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-comment"><span class="com">&lt;!-- Stylesheets --&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">link</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">rel</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">&amp;"stylesheet&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">href</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">&amp;"</span><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">bloginfo</span></span><span class="pun">(</span><span class="str">'</span><span class="hljs-attribute"><span class="str">stylesheet_url</span></span><span class="str">'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">?&gt;</span></span><span class="pln">&amp;" /&gt;
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">link</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">rel</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"stylesheet&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"css</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">bootstrap.css</span></span><span class="atv">&amp;"</span><span class="pln"> </span><span class="tag">/&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">link</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">rel</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"stylesheet&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"css</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">style.css</span></span><span class="atv">&amp;"</span><span class="pln"> </span><span class="tag">/&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">link</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"http:</span></span><span class="atv">//</span><span class="hljs-attribute"><span class="atv">maxcdn.bootstrapcdn.com</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">font-awesome</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">4.1.0</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">css</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">font-awesome.min.css</span></span><span class="atv">&amp;"</span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">rel</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"stylesheet&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-comment"><span class="com">&lt;!--[if lt IE 9]&gt;
&lt;script src=&amp;"http://html5shim.googlecode.com/svn/trunk/html5.js&amp;"&gt;&lt;/script&gt;
&lt;![endif]--&gt;</span></span><span class="pln">

</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> wp_head</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">head</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">body</span></span><span class="pln"> </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> body_class</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">&gt;</span></span><span class="pln">

</span><span class="hljs-comment"><span class="com">&lt;!-- HEADER --&gt;</span></span><span class="pln">

</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">header</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"main-header</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">align-center</span></span><span class="atv"> &amp;"</span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">href</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">&amp;"</span><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">home_url</span></span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span></span><span class="pln">&amp;" class=&amp;"logo&amp;" &gt;</span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">img</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">src</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">&amp;"</span><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="kwd">print</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">IMG</span></span><span class="pun">;?&gt;</span></span><span class="pln">/logo.png&amp;"  class=&amp;"img-responsive&amp;" alt=&amp;"</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> bloginfo</span><span class="pun">(</span><span class="hljs-string"><span class="str">'name'</span></span><span class="pun">);</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">&amp;" /&gt;</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">nav</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"main-nav&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> wp_nav_menu</span><span class="pun">(</span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'theme_location'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'main-menu'</span></span><span class="pun">,</span><span class="pln">
      </span><span class="hljs-string"><span class="str">'container'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">''</span></span><span class="pun">,</span><span class="pln">
      </span><span class="hljs-string"><span class="str">'menu_class'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'inline'</span></span><span class="pln">
</span><span class="pun">));</span><span class="pln">
</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">nav</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">header</span></span><span class="tag">&gt;</span></span></code></pre>

<h3 id="الخطوة-23-إنشاء-ملف-footerphp">
	الخطوة 2.3- إنشاء ملفِّ footer.php
</h3>

<p>
	من أجل هذا الجزء سنقوم بإنشاء ملّف <code>footer.php</code> فارغٍ، ثمّ مجدّدًا نفتح ملفَّ <code>index.html</code> من مجلّد قالب HTML وCSS NeoBlog ثمّ نقوم بنسخ كلِّ شيءٍ انطلاقًا من ”sharing idea section” إلى آخر وسمٍ في هذا الملفِّ ثمّ قم بنسخها في ملفِّ <code>footer.php</code> الذي قمنا بإنشائه داخل مجلّد قالبنا ووردبريس. يجب أن يكون لديك نفس الكود أدناه.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_3506_7" style="">
<code class="hljs xml"><span class="hljs-comment"><span class="com">&lt;!-- SHARING IDEAS AREA --&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">section</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"sharing-container</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">section-content</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">align-center</span></span><span class="atv">&amp;"</span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h3</span></span><span class="tag">&gt;</span></span><span class="pln">WANT TO SHARE YOUR THOUGHTS?</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h3</span></span><span class="tag">&gt;</span></span><span class="pln">
Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h4</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"contact.html&amp;"</span></span><span class="pln"> </span><span class="tag">&gt;</span></span><span class="pln">CLICK HERE TO LEARN MORE &gt;&gt;&gt;</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h4</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">section</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-comment"><span class="com">&lt;!-- FOOTER --&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">footer</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"main-footer</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">section-content</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">align-center</span></span><span class="atv">&amp;"</span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">id</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"contact-info&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">
copy; 2014 - </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"https:</span></span><span class="atv">//</span><span class="hljs-attribute"><span class="atv">1stwebdesigner.com</span></span><span class="atv">/&amp;"</span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">target</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"_blank&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">NEOBLOG theme</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="pln"> by </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">target</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"_blank&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"https:</span></span><span class="atv">//</span><span class="hljs-attribute"><span class="atv">twitter.com</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">NickDalusung</span></span><span class="atv">&amp;"</span><span class="tag">&gt;</span></span><span class="pln">Sam Norton</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">footer</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">body</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">html</span></span><span class="tag">&gt;</span></span></code></pre>

<p>
	مثلما فعلنا في السّابقِ مع ملفِّ <code>header.php</code> سنقوم مجدّدًا بتعويض بعض وسوم HTML بدوالِّ ووردبريس مثل رابطٍ للصفحة الرئيسية، السّنة الحاليّة ومعلومات المدوّنة.<br>
	ألقِ نظرةً على الكود أدناه:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_3506_7" style="">
<code class="hljs xml"><span class="hljs-comment"><span class="com">&lt;!-- SHARING IDEAS AREA --&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">section</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"sharing-container</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">section-content</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">align-center</span></span><span class="atv">&amp;"</span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h3</span></span><span class="tag">&gt;</span></span><span class="pln">WANT TO SHARE YOUR THOUGHTS?</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h3</span></span><span class="tag">&gt;</span></span><span class="pln">
Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h4</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">href</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">&amp;"</span><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">home_url</span></span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span></span><span class="pln">&amp;" &gt;CLICK HERE TO LEARN MORE &gt;&gt;&gt;</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h4</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">section</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-comment"><span class="com">&lt;!-- FOOTER --&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">footer</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"main-footer</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">section-content</span></span><span class="atv"> </span><span class="hljs-attribute"><span class="atv">align-center</span></span><span class="atv">&amp;"</span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">id</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"contact-info&amp;"</span></span><span class="tag">&gt;</span></span><span class="pln">
copy; </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> date</span><span class="pun">(</span><span class="hljs-string"><span class="str">'Y'</span></span><span class="pun">);</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln"> - </span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">href</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">&amp;"</span><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">home_url</span></span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span></span><span class="pln">&amp;"&gt;</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> bloginfo</span><span class="pun">(</span><span class="hljs-string"><span class="str">'name'</span></span><span class="pun">);</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="pln"> by </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">target</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"_blank&amp;"</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">href</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">&amp;"https:</span></span><span class="atv">//</span><span class="hljs-attribute"><span class="atv">twitter.com</span></span><span class="atv">/</span><span class="hljs-attribute"><span class="atv">NickDalusung</span></span><span class="atv">&amp;"</span><span class="tag">&gt;</span></span><span class="pln">Sam Norton</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">footer</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> wp_footer</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">body</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">html</span></span><span class="tag">&gt;</span></span></code></pre>

<h3 id="الخطوة-24-العمل-مع-ملف-searchformphp">
	الخطوة 2.4- العمل مع ملفِّ searchform.php
</h3>

<p>
	التّالي على القائمة سيكون وضع الترميز (باستخدام دوالّ ووردبريس)، الذي سيقوم بإظهار صندوق البحث في القائمة الجانبيّة. قم بإنشاء ملفِّ <code>searchform.php</code> ثمّ انسخ الكود التّالي بداخله.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<div class="ipsQuote_contents ipsClearfix">
		<p>
			ملاحظة: معظم الكلاسات التي تراها هنا مصدرها صندوق البحث في ملفِّ <code>index.html</code>.
		</p>
	</div>
</blockquote>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_3506_7" style="">
<code class="hljs ocaml"><span class="tag">&lt;div</span><span class="pln"> </span><span class="hljs-keyword"><span class="atn">class</span></span><span class="pun">=</span><span class="atv">&amp;</span><span class="hljs-string"><span class="atv">"controller&amp;"</span></span><span class="tag">&gt;</span><span class="pln">
&lt;form role=&amp;</span><span class="hljs-string"><span class="pln">"search&amp;"</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">method</span></span><span class="pln">=&amp;</span><span class="hljs-string"><span class="pln">"get&amp;"</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">class</span></span><span class="pln">=&amp;</span><span class="hljs-string"><span class="pln">"search-form&amp;"</span></span><span class="pln"> action=&amp;</span><span class="hljs-string"><span class="pln">"</span><span class="pun">&lt;?</span><span class="pln">php echo home_url</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">&amp;"</span></span><span class="pln">&gt;
&lt;input </span><span class="hljs-class"><span class="hljs-keyword"><span class="pln">type</span></span><span class="pln">=</span></span><span class="hljs-string"><span class="pln">'textbox'</span></span><span class="pln"> name=&amp;</span><span class="hljs-string"><span class="pln">"s&amp;"</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">class</span></span><span class="pln">=&amp;</span><span class="hljs-string"><span class="pln">"form-control&amp;"</span></span><span class="pln"> id=&amp;</span><span class="hljs-string"><span class="pln">"search-box&amp;"</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">value</span></span><span class="pln">=&amp;</span><span class="hljs-string"><span class="pln">"</span><span class="pun">&lt;?</span><span class="pln">php the_search_query</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">&amp;"</span></span><span class="pln"> placeholder=&amp;</span><span class="hljs-string"><span class="pln">"Search..&amp;"</span></span><span class="pln">/&gt;
</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="hljs-keyword"><span class="atn">class</span></span><span class="pun">=</span><span class="atv">&amp;</span><span class="hljs-string"><span class="atv">"btn btn-primary no-border&amp;"</span></span><span class="pln"> </span><span class="hljs-class"><span class="hljs-keyword"><span class="atn">type</span></span><span class="pun">=</span></span><span class="atv">&amp;</span><span class="hljs-string"><span class="atv">"submit&amp;"</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="atn">class</span></span><span class="pun">=</span><span class="atv">&amp;</span><span class="hljs-string"><span class="atv">"search-submit&amp;"</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="atn">value</span></span><span class="pun">=</span><span class="atv">&amp;</span><span class="hljs-string"><span class="atv">"Search&amp;"</span></span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/form&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>

<p>
	لاحِظ أنّنا استخدمنا دالّة <code>the_search_query</code> كقيمة لصندوق البحث، وهذا لإظهار الكلمات التي نبحث عنها داخل صندوق البحث في حالة قِيامنا بعمليِّة بحثٍ ما.
</p>

<h3 id="الخطوة-25-العمل-مع-ملف-sidebarphp">
	الخطوة 2.5- العمل مع ملفِّ sidebar.php
</h3>

<p>
	قبل البدءِ بإنشاء ملفِّ <code>sidebar.php</code> علينا أوّلًا تسجيل القائمة الجانبيّة في ملفِّ <code>functions.php</code>. قُم بفتح ملفِّ <code>functions.php</code> وأضِف له الكود التّالي
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_3506_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> 
register_sidebar</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
    </span><span class="hljs-string"><span class="str">'id'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'main-sidebar'</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">'name'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> __</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'Main Sidebar'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$text_domain</span></span><span class="pln"> </span><span class="pun">),</span><span class="pln">
    </span><span class="hljs-string"><span class="str">'description'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> __</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'This the main sidebar.'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$text_domain</span></span><span class="pln"> </span><span class="pun">),</span><span class="pln">
</span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

<p>
	الكود أعلاه سيقوم بإنشاء تعريفٍ للقائمة الجانبيّة ويقوم بإرجاع المُعرِّف. بعد هذا فلنقم باستدعاء هذه القائمة. بدايةً سنُنشِئ ملفَّ <code>sidebar.php</code> في مجلّد قالبنا الرئيسيِّ ثمّ بعد ذلك أنسخ هذا الكود بداخله.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_3506_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> is_active_sidebar</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'main-sidebar'</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> dynamic_sidebar</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'main-sidebar'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">endif</span></span><span class="pun">;</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

<p>
	هذا الكود يحتوي على دالّةٍ تقوم باستدعاء الوِدجت ذات المعرّفِ <code>main-sidebar</code> وتقوم بطبعها في القائمة الجانبيّة ولكن قبل ذلك ستتحقّق أنّ الوِدجت مُفعّلة من لوحة التحكّم.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://1stwebdesigner.com/convert-html-template-wordpress/" rel="external nofollow">How to Convert a Static HTML Template into a Responsive WordPress Theme</a>
</p>
]]></description><guid isPermaLink="false">592</guid><pubDate>Fri, 05 Jan 2018 15:07:00 +0000</pubDate></item><item><title>&#x62A;&#x637;&#x648;&#x64A;&#x631; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633; &#x644;&#x644;&#x645;&#x628;&#x62A;&#x62F;&#x626;&#x64A;&#x646;: &#x62A;&#x639;&#x644;&#x645; &#x644;&#x63A;&#x629; PHP</title><link>https://academy.hsoub.com/programming/php/wordpress/%D8%AA%D8%B7%D9%88%D9%8A%D8%B1-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86-%D8%AA%D8%B9%D9%84%D9%85-%D9%84%D8%BA%D8%A9-php-r582/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2017_12/31-2.png.586eb6ac8d36209f89a2be02e88fd6ed.png" /></p>
<p>
	إذا أردت أن تصبح مطوّر ووردبريس فهذا يتطلب أيضًا تعلم لغة البرمجة الشهيرة PHP، والتي بنيت من خلالها منصة ووردبريس. طورت بشكل أساسي في عام 1994، PHP لغة برمجة قوية ومفتوحة المصدر لإنشاء مواقع ويب ديناميكية وتفاعلية. سوف تتعلم القواعد الأساسية للغة PHP وكيفية كتابتها، وكيفية عملها، والاطلاع على بعض الأمثلة.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<div class="ipsQuote_contents ipsClearfix" data-gramm="false">
		<p>
			<strong>ملاحظة:</strong> من المهم قبل البدء أن تكون ملمًا بلغتي Html و CSS لأنهما لغتان أساسيتان للتعامل مع ووردبريس.
		</p>
	</div>
</blockquote>

<h2 id="ما-هي-php">
	ما هي PHP؟
</h2>

<p>
	PHP هي لغة برمجة نصية من طرف الخادم (server). لفهم ما يعني هذا، لنقارنها مع Html. عندما تزور صفحة Html بسيطة، يقوم متصفحك بإرسال طلب للخادم الذي يحتوي هذه الصفحة التي تحاول الوصول إليها. الخادم يكتشف أي ملف تريد الوصول إليه ويقوم بإرساله لك. متصفحك يترجم شيفرة Html المرسلة ويعرضها لك. بالمقارنة، عندما تزور صفحة PHP هناك خطوة إضافية متصفحك يقوم بإرسال طلب والخادم يجد الملف الذي تريده. قبل إرساله لمتصفحك، الخادم يعالج الملف، منتجًا مخرجات Html نهائية (Html output) ثم يقوم بإرسال هذه المخرجات لمتصفحك الذي يقوم بعرضها كالمعتاد. لهذا السبب عندما تنظر إلى الشيفرة المصدرية لأي موقع لا ترى أبدًا أي شيفرات PHP، فقط Html، حتى لو كان الموقع مكتوبًا بلغة PHP.<br>
	إذا لماذا يحتاج الخادم إلى عملية المعالجة؟ ما المغزى من ذلك؟ لأنه يمكننا من عمل مواقع ديناميكية وكتابة شيفرات بفعالية كبيرة.<br>
	لنستعرض مثالين بسيطين. في Html كل شيء ثابت (static). يمكنك إنشاء صفحة تعرض كلمة “Good morning” أو “Good evening” لكنك لا تستطيع إظهار واحدة وإخفاء الأخرى اعتمادًا على التوقيت الحقيقي لليوم. في PHP تستطيع عمل ذلك لأن الخادم يمكنه معالجة التعليمات البرمجية آخذًا التوقيت الحقيقي لليوم بعين الاعتبار. والمنطق لهذا المثال يكون كالتالي:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><span class="kwd">if</span><span class="pln"> it </span><span class="kwd">is</span><span class="pln"> before </span><span class="lit">10am</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
	</span><span class="str">&lt;h1&gt;</span><span class="typ">Good</span><span class="pln"> </span><span class="typ">Morning</span><span class="pun">&lt;/</span><span class="pln">h1</span><span class="pun">&gt;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="kwd">if</span><span class="pln"> it </span><span class="kwd">is</span><span class="pln"> after </span><span class="lit">6pm</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
	</span><span class="str">&lt;h1&gt;</span><span class="typ">Good</span><span class="pln"> </span><span class="typ">Evening</span><span class="pun">&lt;/</span><span class="pln">h1</span><span class="pun">&gt;</span><span class="pln">	
</span><span class="pun">}</span><span class="pln">
otherwise </span><span class="pun">{</span><span class="pln">
	</span><span class="str">&lt;h1&gt;</span><span class="typ">Good</span><span class="pln"> </span><span class="typ">Day</span><span class="pun">&lt;/</span><span class="pln">h1</span><span class="pun">&gt;</span><span class="pln">
</span><span class="pun">}</span></pre>

<p>
	طبعًا هذه ليست التعليمات البرمجية الحقيقية، لكنها تتبع منطق PHP. الخادم سيحدد أي حالة هي الحالة المحققة للشرط وسيعرض واحدة فقط من العناوين. مثال آخر هو موقع تويتر أو أي موقع آخر الذي يقدم المحتوى المكتوب من قبل المستخدمين. إذا كان تويتر يستخدم Html فقط، أحد ما يجب عليه أن يقوم بوضع تغريدتك في ملف Html في كل مرة تقوم بتغريدة جديدة وهذا طبعًا ليس استغلالاً جيدًا للوقت. يوجد حوالي 1 مليار حساب على موقع تويتر لذلك الشركة ستحتاج إلى 1 مليار ملف Html، ملف لكل مستخدم. مع PHP، مشكلة إعادة توليد ما ينشره المستخدم يمكن أن يحل بعدة ملفات. سنعود إلى هذا المثال لاحقًا في هذه المقالة.
</p>

<h2 id="البداية">
	البداية
</h2>

<p>
	قبل أن نبدأ، أود التنبيه على أنه في المراحل الأولى من <a href="https://academy.hsoub.com/php/" rel="">تعلم PHP</a> ربما لن تكون على قادرًا على إنشاء موقع ويب. هذه ردة فعل طبيعية وهذا أيضًا ما شعرت به عند بداية تعلم PHP. الخطوات الأولى تجريدية قليلاً، لكن في نهاية هذا المقال سترى النور. من أجل اختبار وممارسة ما سوف تتعلم في هذه المقالة، سوف تحتاج إلى خادم أباتشي (Apache server). يمكن أن يكون هذا موقع اختبار عبر الإنترنت ولكن يمكن أيضًا أن يكون خادم محلي. أوصي بإنشاء خادم محلي (local server). وإليك كيفية القيام بذلك:<br>
	أولاً، عليك تحميل وتثبيت Virtualbox وVagrant. إنشاء مسار في أي مكان على كمبيوترك لتخزين ملفات المشروع. لدي مجلد “websites” في مسار المستخدم الخاص بي، قمت بإنشاء مسار “PHPtutorial”. وسوف أشير إلى هذا باسم “مجلد المشروع الرئيسي” طوال بقية هذا المقال.<br>
	بمجرد إنشاء المسار، افتح terminal على linux أو osx، أو cmd على windows، وانتقل إلى المجلد. إذا قمت بإنشاء بنية المجلد نفسه كما لدي، على linux أو osx يمكنك كتابة
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs bash"><span class="hljs-built_in"><span class="pln">cd</span></span><span class="pln"> </span><span class="pun">~</span><span class="str">/websites/</span><span class="typ">PHPtutorial</span></code></pre>

<p>
	على windows
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs ruby"><span class="pln">cd </span><span class="pun">%</span><span class="hljs-constant"><span class="pln">HOMEPATH</span></span><span class="hljs-string"><span class="pun">%</span><span class="str">/websites/</span></span><span class="hljs-constant"><span class="typ">PHPtutorial</span></span></code></pre>

<p>
	عندما تكون في المسار الصحيح، ألصق الأمر التالي:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs ruby"><span class="pln">curl </span><span class="pun">-</span><span class="hljs-constant"><span class="pln">L</span></span><span class="pln"> </span><span class="pun">-</span><span class="pln">o </span><span class="hljs-string"><span class="str">'install.sh'</span></span><span class="pln"> </span><span class="hljs-symbol"><span class="pln">http</span><span class="pun">:</span></span><span class="com">/</span><span class="hljs-regexp"><span class="com">/bit.ly/</span></span><span class="hljs-number"><span class="com">1</span></span><span class="com">hBfq57 &amp;&amp; curl -</span><span class="hljs-constant"><span class="com">L</span></span><span class="com"> -o </span><span class="hljs-string"><span class="com">'Vagrantfile'</span></span><span class="com"> </span><span class="hljs-symbol"><span class="com">http:</span></span><span class="com">/</span><span class="hljs-regexp"><span class="com">/bit.ly/</span></span><span class="hljs-number"><span class="com">1</span></span><span class="com">mE3Qt9 &amp;&amp; vagrant up</span></code></pre>

<p>
	وبمجرد تنفيذ الأمر، سوف تكون قادرًا على الوصول إلى الموقع الخاص بك على <a href="http://192.168.33.21" rel="external nofollow">http://192.168.33.21</a>. إذا قمت بإعادة تشغيل جهاز الكمبيوتر الخاص بك، سوف تحتاج أيضًا إلى إعادة تشغيل الخادم الخاص بك، والتي يمكنك القيام به عن طريق الانتقال إلى مجلد المشروع الرئيسي في سطر الأوامر وكتابة <code>vagrant up</code>. ملف المشروع الرئيسي هو الآن المجلد الجذر الخاص بك. قم بإنشاء ملف <code>index.html</code> هناك مع أي محتوى، وينبغي أن يتم عرضه بشكل صحيح عند زيارة موقع الويب الخاص بك على <a href="http://192.168.33.21" rel="external nofollow">http://192.168.33.21</a>.
</p>

<h2 id="الخطوات-الأولى">
	الخطوات الأولى
</h2>

<p>
	في البداية، لنلقِ نظرة على الوسوم(tags)، المتغيرات(variables)، القيم (values)، والإظهار (echoing). أنشئ ملف اسمه <code>index.php</code> في ملف المشروع الرئيسي واكتب”<strong>Hello HTML</strong>” بداخله. للتأكد بأنه يعمل قم بزيارة <a href="http://192.168.33.21" rel="external nofollow">http://192.168.33.21</a>، ويجب رؤية النص الذي قمت بكتابته على شاشة المتصفح. قاعدة مهمة جدًا وهي أن ما يكتب داخل وسوم php يعتبر شيفرة PHP، وأي شيء آخر يعتبر Html. لذلك ظهر نص <code>Hello HTML</code>. وسوم php تبدأ ب<code>&lt;?php</code> وتنتهي ب <code>?&gt;</code>. أي شيء بين هذين الوسمين يعتبر PHP.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs xml"><span class="typ">Hello</span><span class="pln"> HTML
</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">PHP</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"Hello PHP"</span></span><span class="pun">;</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

<p>
	التعليمات البرمجية السابقة أظهرت كيف يتم استخدام وسوم php وكيفية إظهار القيم على الشاشة. عندما تُظهر قيمة أنت تخبر PHP لعرض هذه القيمة على الشاشة. نتيجة تنفيذ التعليمات البرمجية السابقة سيكون ” Hello Html Hello PHP” . الجزء الأول يعتبر Html لأنه لم يكن داخل وسوم PHP بينما الجزء الثاني قد تم إظهاره بواسطة شيفرة PHP. لاحظ أنه يجب إحاطة النص بإشاراتي اقتباس. <strong>المتغيرات(variables) تسمح لك بتخزين القيم بدون عرضها</strong>. المتغيرات يتم استخدامها بكثرة لتخزين العديد من الأشياء. لنلقي نظرة على مثال بسيط:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">PHP</span></span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$name</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Daniel"</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$name</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

<p>
	في التعليمات البرمجية السابقة قمت بتخزين قيمة “Daniel” في متغير يدعى <code>name$</code>. بدلاً من إظهار “Daniel” بشكل مباشر، الآن أنا أظهر قيمة <code>name$</code> مهما كانت. من الوهلة الأولى تبدو لك كزيادة في التعليمات البرمجية بدون فائدة لكن إذا كنا نستعمل هذا المتغير في أكثر من مكان يمكننا تغيير كل شيء بتغيير قيمة هذا المتغير في مكان واحد، بدلاً من تغيير تلك القيم في كل مكان وُضِعت فيه. لاحظ أن الفصل بين أسطر الشيفرات يكون بوضع فاصلة منقوطة (;). إذا أنتجت شيفرتك خطأ فهناك احتمال أنك نسيت وضع فاصلة منقوطة في مكان ما، خطأ شائع ومحبط لكثير من المبرمجين في كل مكان. <strong>القيم(values)</strong> يمكن أن تكون عدة أنواع. لحد الآن تعرفنا على واحد من هذه الآنواع وهو النوع النصي. النص هو سلسلة من المحارف ويجب إحاطته بإشارتيَ اقتباس (“). نوع آخر وهو النوع الرقمي. الرقم هو أي عدد كامل ولا يجب وضعه ضمن اشارتي اقتباس وإلا سيعتبر نصًا. واحدة من أهم أنواع القيم <strong>المصفوفات(array)</strong>. المصفوفات تخزن عدة قيم، والتي من الممكن أن تكون قيمًا من أنواع مختلفة.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">PHP</span></span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$name</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">'Daniel'</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$age</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-number"><span class="lit">30</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$interests</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'guitar'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'singing'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'squash'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'running'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'board games'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

<p>
	كما ترى يمكن تعريف المصفوفة على الشكل التالي (array(value1 , value2 , value3. يجب كتابة القيم دائمًا في المصفوفة كما تكتب خارج المصفوفة. النص يجب أن يكون محاطًا بإشارتيَ اقتباس (“)، الرقم غير محاط بشيء وهكذا.
</p>

<h3 id="مثال-بسيط">
	مثال بسيط
</h3>

<p>
	إذا بماذا يمكن استخدام ما تعلمناه للآن، ما تعلمناه للآن لا يمكنه إنشاء موقع بعد ولكن حتمًا نحتاج لمثال عملي الآن. لنلقِ نظرة على شيفرة لتطبيق توقعات الطقس:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">PHP</span></span><span class="pln">

</span><span class="hljs-variable"><span class="pln">$unit</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">"C"</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$temp</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-number"><span class="lit">29</span></span><span class="pun">;</span><span class="pln">

</span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$unit</span></span><span class="pln"> </span><span class="pun">==</span><span class="pln"> </span><span class="hljs-string"><span class="str">'F'</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="hljs-variable"><span class="pln">$temp</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$temp</span></span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="hljs-number"><span class="lit">9</span></span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span><span class="hljs-number"><span class="lit">5</span></span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="hljs-number"><span class="lit">32</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="hljs-variable"><span class="pln">$forecast</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">"The weather today will be great, a Sunny "</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$temp</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$unit</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$forecast</span></span><span class="pun">;</span><span class="pln">

</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

<p>
	هناك بعض الأشياء الجديدة في هذه التعليمات البرمجية، لكن أعتقد أن المثال يشرح نفسه بوضوح. لنراجعه سطرًا بسطر. في البداية، نقوم بإنشاء متغيرين: أول متغير عبارة عن نص يحمل القيمة “C” للمئوية، والمتغير التالي هو عدد صحيح، 29، والذي يهدف إلى تخزين درجة الحرارة الفعلية. الأهداف هنا بسيطة: عرض النص الذي يخبرنا درجة الحرارة الحالية باستخدام القيمة من متغير درجة الحرارة لدينا في وحدة قياس حسب الاختيار، مئوية أو فهرنهايت. السطر التالي هو عبارة <code>if</code>، التي يتم تنفيذ ما بداخلها فقط إذا كانت القيمة داخل الأقواس صحيحة. الشرط هو: <code>$unit == 'F'</code> الذي يترجم منطقيًا كالتالي: إذا كانت قيمة واحدة القياس هي F و هي ليست كذلك و بالتالي سيتم تخطي كتلة هذا الشرط و ما بداخله بدون تنفيذ.<br>
	<strong>في السطر الأخير </strong>متغير <code>forecast$</code>  الذي يحوي عبارة “The weather today will be great, a Sunny “ . اعتمادًا على قيمة متغيري <code>unit$</code> و <code>temp$</code> ستكون النهاية مختلفة، النقاط بين النصوص والمتغيرات تجمع المتغيرات مع النصوص أو تدمجها. لذا ببساطة سيتم استبدال قيمة <code>temp$</code> بـ 29 و <code>unit$</code> بـ C والمخرجات النهائية ستكون:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs mathematica"><span class="typ">The</span><span class="pln"> weather today will be great</span><span class="pun">,</span><span class="pln"> a </span><span class="typ">Sunny</span><span class="pln"> </span><span class="hljs-number"><span class="lit">29</span></span><span class="hljs-keyword"><span class="lit">C</span></span></code></pre>

<p>
	الآن، ماذا يحدث إذا غيرنا قيمة <code>unit$</code> إلى F، في البداية سوف يتم تنفيذ التعليمات البرمجية داخل <code>if</code> لأن شرطها تحقق وأصبحت صحيحة، وهذا يعني أن كل شيء بين الأقواس المجعدة سيتم تنفيذه أيضًا. في المثال، اسندت قيمة جديدة لمتغير <code>temp$</code>. أخذت القيمة الأصلية، وتم ضربها في 9، وتقسيمها من على 5 وإضافة 32 وهذه هي المعادلة لتحويل مئوية إلى فهرنهايت.<br>
	يجب أن تكون القيمة الجديدة لـ <code>temp$</code> هي 84.2، والقيمة الجديدة <code>unit$</code> هي F الآن سيتم استبدال المتغيرات بقيمها في الجملة النهائية فتصبح:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs livecodeserver"><span class="typ">The</span><span class="pln"> weather today will be great</span><span class="pun">,</span><span class="pln"> </span><span class="hljs-operator"><span class="pln">a</span></span><span class="pln"> </span><span class="typ">Sunny</span><span class="pln"> </span><span class="hljs-number"><span class="lit">84.2</span></span><span class="lit">F</span></code></pre>

<p>
	هذا المثال لا يزال غير مجدٍ بعض الشيء بالنسبة لنا، لكنه يبدأ في إظهار قوة PHP. لاحظ كيف وصلنا إلى الناتج النهائي عن طريق استبدال المتغيرات ببساطة مع القيم. فهو يساعد على الوصول إلى عقلية “replacing placeholder” لأنه هو أساسًا ما تدور حوله لغة PHP. في مثال حقيقي، سنقوم باستخدام القيم الجوية الحالية وبدلًا من كتابة جملة The weather today will be great, a Sunny سوف نستخدم الظروف الفعلية. وقد نرغب أيضًا في التنبؤ غدًا أو في اليوم التالي، مما سيؤدي إلى استبدال “today” بنص آخر. وبالإضافة إلى ذلك، من الواضح أن درجة الحرارة الحالية من الصعب أن تكون مكتوبة يدويًا في الشيفرة البرمجية، فإنه سيكون من الضروري أن يتم استرجاعها من مكان ما. على الرغم من أن هذا يضيف بضع طبقات من التعقيد، لكن المبدأ سيكون نفسه وهو أن نجلب البيانات من مكان ما ونضعها في مخرجاتنا.
</p>

<h2 id="عبارة-if-والحلقات-الشرطية-loops">
	عبارة if والحلقات الشرطية loops
</h2>

<p>
	لقد رأينا بالفعل عبارة <code>if</code> في مثال حقيقي. تقوم عبارة <code>if</code> بالتأكد من الشرط داخل الاقواس. إذا كانت النتيجة صحيحة تتم معالجة التعليمات البرمجية داخل الأقواس المجعدة وإلا فأنه لن يتم تنفيذ التعليمات. عبارة <code>if</code> أيضًا ذات صلة مع <code>else if</code> و <code>else</code>. عبارة <code>else if</code> تكتب دائمًا بعد عبارة <code>if</code>. إذا كانت عبارة <code>if</code> غير محققة سيتم التأكد تاليًا إذا كانت عبارة <code>else if</code> محققة، و يمكن أن يكون لدينا عدد غير محدد من عبارات <code>else if</code> بناءً على نفس المنطق. و أخيرًا لدينا عبارة <code>else</code> التي سيتم تنفيذها عندما تكون جميع الشروط التي تسبقها غير محققة، و ليس من الضروري أن يسبق عبارة <code>else</code> عبارة <code>else if</code> يمكنك فقط استعمال عبارة <code>if</code> و <code>else</code> مع بعضهما.<br>
	لنلقِ نظرة على الأمثلة التالية للتوضيح:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs bash"><span class="com">// Simple </span><span class="hljs-keyword"><span class="com">if</span></span><span class="com"> Statement</span><span class="pln">
</span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$speed</span></span><span class="pln"> </span><span class="pun">&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">50</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="hljs-built_in"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"You are over the speed limit"</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">// If and </span><span class="hljs-keyword"><span class="com">else</span></span><span class="com"> statement</span><span class="pln">
</span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$age</span></span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">21</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="hljs-built_in"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"You may not buy alcohol"</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="hljs-keyword"><span class="kwd">else</span></span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="hljs-built_in"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"You may buy alcohol"</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">// If, </span><span class="hljs-keyword"><span class="com">else</span></span><span class="com"> </span><span class="hljs-keyword"><span class="com">if</span></span><span class="com"> and </span><span class="hljs-keyword"><span class="com">else</span></span><span class="com"> statement</span><span class="pln">
</span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$speed</span></span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">25</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="hljs-built_in"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"You are too slow"</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
elseif</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$speed</span></span><span class="pln"> </span><span class="pun">&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">120</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="hljs-built_in"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"You are too fast"</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="hljs-keyword"><span class="kwd">else</span></span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="hljs-built_in"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"Your speed is just right!"</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>

<p>
	شيء آخر هنا علينا أن نلاحظه وهو الأسطر التي تبدأ مع مائلة مزدوجة “//”. المائلة المزدوجة تسمح لك بإضافة تعليق سطر واحد في أي مكان في التعليمات البرمجية. يمكنك إضافة تعليقات متعددة الاسطر من خلال البدء مع / * writing whatever you’d like and ending it with * /.<br>
	<strong>الحلقات (loops)</strong> تأتي بالعديد من الأشكال والأحجام، أربعة على وجه الدقة. تسمح لك الحلقات بتشغيل نفس التعليمات البرمجية عدة مرات بناءً على استمرار الشرط الذي بدأت به الحلقة. قد تكره الحلقات الآن، لكنها سوف تصبح أقرب حلفائك عندما تصبح أكثر احترافية في كتابة التعليمات البرمجية. لنبدأ مع حلقة <code>foreach</code>. حلقة <code>foreach</code> تمر من كل عناصر المصفوفة وتنفذ تعليمات برمجية معينة. فيما يلي مثال سريع يظهر قائمة Html:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">PHP</span></span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$names</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Daniel Pataki"</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Raelene Morey"</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">"James Farmer"</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;ul&gt;"</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-keyword"><span class="kwd">foreach</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$names</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">as</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$name</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;li&gt;"</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$name</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/li&gt;"</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/ul&gt;"</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

<p>
	المفتاح هنا هو فهم العبارة داخل الأقواس، وهي <code>$names as $name</code>، الجزء الأول هو اسم المصفوفة التي ترغب في المرور من خلالها. والثاني هو اسم المتغير الذي يمكن الرجوع إليه من أجل الحصول على قيمة عنصر في هذه المصفوفة الذي تمر عليه حاليًا من خلال الحلقة ولك الحرية في تسمية هذا المتغير أي أنه ليس من الضروري أن تسميه <code>name$</code> هنا بل يمكن تسميته أي اسم تريده. في مثالنا، سيتم تنفيذ الحلقة ثلاث مرات. عندما تمر الحلقة بالمصفوفة للمرة الأولى ستكون قيمة المتغير <code>name$</code> هي “Daniel Pataki”، وفي المرة الثانية ستكون “Raelene Morey,” وفي المرة الثالثة ستكون “James Farmer.”<br>
	يعرض المثال التالي تفاصيل في قائمة، من مصفوفة مترابطة:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs handlebars"><span class="xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">PHP</span></span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$details</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">"name"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Daniel Pataki"</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Age"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"30"</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Twitter"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"http://twitter.com/danielpataki"</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;ul&gt;"</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-keyword"><span class="kwd">foreach</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$details</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">as</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$label</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$value</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;li&gt;&lt;strong&gt;"</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$label</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/strong&gt;: "</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$value</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/li&gt;"</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/ul&gt;"</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></span></code></pre>

<p>
	الأقواس تحتوي الآن على ثلاثة متغيرات: <code>$details as $label =&gt; $value</code> ، ستمر الحلقة الآن من المصفوفة <code>details$</code>. عند كل مرور للحلقة على المصفوفة سيتم مناداة المفتاح <code>label$</code> والقيمة المرتبطة بهذا المفتاح <code>value$</code> ، عند المرور الثاني ستكون قيمة <code>label$</code> هي Age و قيمة <code>value$</code> هي 30 و ستكون نتيجة تنفيذ التعلمية هي:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs cs"><span class="pun">•</span><span class="pln">   </span><span class="typ">Name</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Daniel</span><span class="pln"> </span><span class="typ">Pataki</span><span class="pln">
</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Age</span><span class="pun">:</span><span class="pln"> </span><span class="hljs-number"><span class="lit">30</span></span><span class="pln">
</span><span class="pun">•</span><span class="pln">   </span><span class="typ">Twitter</span><span class="pun">:</span><span class="pln"> http</span><span class="pun">:</span><span class="hljs-comment"><span class="com">//twitter.com/danielpataki</span></span>
</code></pre>

<h2 id="كيف-تعمل-قوائم-مقالات-ووردبريس">
	كيف تعمل قوائم مقالات ووردبريس:
</h2>

<p>
	لنلقِ نظرة الآن على مثال أكثر ارتباطًا بووردبريس: كيف تعمل قوائم مقالات ووردبريس. لا تحاكي التعليمات البرمجية أدناه ووردبريس بالضبط، ولكن جوهر العملية موجود. تخيل أن المنشورات أو المقالات جزء من مصفوفة ارتباطية كبيرة. التعليمات البرمجية الخاصة بصفحتك الرئيسية ببساطة تمر على المصفوفة وتضع البيانات المناسبة في المكان المناسب في بعض وسوم Html:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs php"><span class="hljs-variable"><span class="pln">$posts</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
  </span><span class="hljs-number"><span class="lit">0</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_title"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"My First Post"</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_excerpt"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"This is a short snippet of text from the first post"</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_date"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"2015 December 1"</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_author"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Daniel Pataki"</span></span><span class="pln">
  </span><span class="pun">),</span><span class="pln">
  </span><span class="hljs-number"><span class="lit">1</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_title"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Second Post"</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_excerpt"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Short exceprt for post number 2"</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_date"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"2015 December 4"</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_author"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Raelene Morey"</span></span><span class="pln">
  </span><span class="pun">)</span><span class="pln">
</span><span class="pun">);</span><span class="pln">

</span><span class="hljs-keyword"><span class="kwd">foreach</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$posts</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">as</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$post</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;div class='post'&gt;"</span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;h1&gt;"</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$post</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'post_title'</span></span><span class="pun">]</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/h1&gt;"</span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;p&gt;"</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$post</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'post_excerpt'</span></span><span class="pun">]</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/p&gt;"</span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;div class='post-meta'&gt;Published on "</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$post</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'post_date'</span></span><span class="pun">]</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">" by "</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$post</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'post_author'</span></span><span class="pun">]</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/div&gt;"</span></span><span class="pun">;</span><span class="pln">
  </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/div&gt;"</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>

<h2 id="الدوال-functions">
	الدوال (Functions)
</h2>

<p>
	بطريقة ما، الدوال تخدم نفس الغرض كما المتغيرات - وسيلة لاستبدال التعليمات البرمجية. يمكن أن تأخذ الدوال كتلة من التعليمات البرمجية وتخزّنها لوقت لاحق وتستخدمها عدة مرات.<br>
	دعونا ننظر إلى مثال بسيط جدًا باستخدام حلقة المقالات بالمثال السابق. حيث أنه من المحتمل أن يتم استخدام الجزء الذي نظهر فيه عناصر المنشورات في عدة صفحات من موقع الويب - كالصفحة الرئيسية، وصفحات الأرشيف، وصفحات المؤلفين، وما إلى ذلك. سنستخدم نفس التعليمات البرمجية مرارًا وتكرارًا. هذا هو بالضبط الوقت الذي نحتاج فيه إلى الدوال.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">PHP</span></span><span class="pln">

</span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">display_post</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$postdata</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
  </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;div class='post'&gt;"</span></span><span class="pun">;</span><span class="pln">
  </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;h1&gt;"</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$postdata</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'post_title'</span></span><span class="pun">]</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/h1&gt;"</span></span><span class="pun">;</span><span class="pln">
  </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;p&gt;"</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$postdata</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'post_excerpt'</span></span><span class="pun">]</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/p&gt;"</span></span><span class="pun">;</span><span class="pln">
  </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;div class='post-meta'&gt;Published on "</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$postdata</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'post_date'</span></span><span class="pun">]</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">" by "</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$postdata</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'post_author'</span></span><span class="pun">]</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/div&gt;"</span></span><span class="pun">;</span><span class="pln">
  </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/div&gt;"</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="hljs-variable"><span class="pln">$posts</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
  </span><span class="hljs-number"><span class="lit">0</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_title"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"My First Post"</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_excerpt"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"This is a short snippet of text from the first post"</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_date"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"2015 December 1"</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_author"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Daniel Pataki"</span></span><span class="pln">
  </span><span class="pun">),</span><span class="pln">
  </span><span class="hljs-number"><span class="lit">1</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_title"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Second Post"</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_excerpt"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Short exceprt for post number 2"</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_date"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"2015 December 4"</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">"post_author"</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">"Raelene Morey"</span></span><span class="pln">
  </span><span class="pun">)</span><span class="pln">
</span><span class="pun">);</span><span class="pln">

</span><span class="hljs-keyword"><span class="kwd">foreach</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$posts</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">as</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$post</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  display_post</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$post</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span></span></code></pre>

<p>
	التعليمة البرمجية أعلاه ليست أقصر، ولكن في أي وقت نريد عرض منشورات في المستقبل يمكننا فقط أن نكتب <code>display_post( $post );</code> مما يجعلها أكثر كفاءة في المستقبل.
</p>

<h3 id="كيف-يعمل-كل-هذا">
	كيف يعمل كل هذا؟
</h3>

<p>
	دعونا نفهم ذلك من خلال النظر إلى الدالة في الجزء العلوي من التعليمات البرمجية. قمت بتسمية هذه الدالة بـ <code>display_post();</code> و في القوسين نلاحظ أن هذه الدالة تتوقع وسيط واحد. و نحن نعلم أن هذا الوسيط يجب أن يحتوي معلومات المنشور لذا سيكون هذا الوسيط عبارة عن مصفوفة مترابطة تحتوي معلومات منشور واحد أسميته <code>postdata$</code>. ضمن الأقواس المجعدة ندرج كل التعليمات البرمجية التي نريد تنفيذها عند استدعاء الدالة. هذه هي نفس التعليمات البرمجية التي كانت لدينا من قبل، أنا فقط بحاجة إلى إعادة تسمية كافة المتغيرات إلى <code>postdata$</code>، اسم الوسيط الذي تتوقعه الدالة، والتي يمكننا استخدامها في أي مكان داخل الدالة. في الجزء السفلي من التعليمة البرمجية، يمكنك أن ترى أن عرض المقال الآن أصبح أكثر تنظيمًا للتعليمات البرمجية، لقد استخدمنا للتو <code>display_post($post)</code>. أنا متأكد أنك تشعر ببعض الضياع الآن حول التسمية، لماذا استخدمنا <code>post$</code> في مكان و <code>postdata$</code> في مكان آخر؟<br>
	<strong>لنراجع التعليمات البرمجية</strong><br>
	يتم تشغيل الدوال فقط عندما يتم استدعاؤها، لذا أكثر ما يهمنا في تعليماتنا البرمجية هو مصفوفة <code>$posts</code>، بعد ذلك نقوم بإنشاء الحلقة، كما فعلنا سابقًا. بداخل الحلقة المتغير الذي يحوي بيانات المقال الواحد <code>post$</code>، لحد الآن لم يتغير شيء من مثال الدالة. الآن، بدلًا من وجود كتلة من التعليمات البرمجية هناك نحن ببساطة سنقوم بإسناد هذه التعليمات البرمجية لدالة. نستدعي دالة <code>()display_post</code>، نعلم أننا نحتاج لتمرير بيانات لهذه الدالة و هذه البيانات هي بيانات مقال واحد. أي متغير يحوي هذه البيانات الآن؟ المتغير <code>post$</code> ، هذا يأتي من تعريف الحلقة. بعد ذلك، انتقل للأعلى إلى الدالة. سيتم الآن تنفيذها. في هذه الدالة تم تسمية الوسيط <code>postdata$</code> هذا يعني ببساطة أنه ضمن هذه الدالة سيتم الإشارة إلى البيانات التي يتم تمريرها إلى هذه الدالة كوسيط بـ.<code>postdata$</code>
</p>

<h2 id="إنشاء-مقتطفات">
	إنشاء مقتطفات
</h2>

<p>
	يمكن أن تحتوي الدوال على وسائط متعددة وقيم افتراضية لهذه الوسائط. دعونا ننشئ دالة يمكن أن تحول أي نص إلى مقتطف عن طريق قطعه إلى قطع نصية. نريد دالة لتكون مرنة قدر الإمكان، وقادرة على السيطرة على طول المقتطف، وإلحاق السلسلة إلى النهاية. سنجعل الوسيط الأول النص الذي نريد تقصيره، الوسيط الثاني سيكون لتحديد مقدار المحارف التي نريد اقتطاعها، والثالث النص المُلحق. دعونا نبدأ بإعطاء الدالة إطار للعمل ضمنه:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs php"><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">make_excerpt</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$text</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$length</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-number"><span class="lit">200</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$append</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">'...'</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">

</span><span class="pun">}</span></code></pre>

<p>
	لاحظ أنني أعطيت قيمًا افتراضية لهذه الوسائط. هذا يعني أنه يمكنك استدعاء الدالة دون تمرير الوسيطين الثاني والثالث. إذا قمت بذلك سوف تفترض الدالة أنك تريد إنشاء مقتطف طويل من 200 حرف وإلحاق ثلاث نقاط بعد ذلك. دعونا نكتب محتوى هذه الدالة:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs php"><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">get_excerpt</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$text</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$length</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-number"><span class="lit">200</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$append</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">'...'</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pun">(</span><span class="pln"> strlen</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$text</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$length</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$text</span></span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">else</span></span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$excerpt</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> substr</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$text</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-number"><span class="lit">0</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$length</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$excerpt</span></span><span class="pln"> </span><span class="pun">.=</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$append</span></span><span class="pun">;</span><span class="pln">
        </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$excerpt</span></span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code></pre>

<p>
	لقد أضفت الكثير من الأشياء الجديدة في هذه الدالة، لذلك دعونا نشرح كل إضافة جديدة بالتفصيل. يبدأ كل هذا بعبارة <code>if</code>، الذي تتحقق مما إذا كان النص المعطى أطول من طول معين. وذلك باستخدام دالة مبنية مسبقًا في لغة PHP تدعى <code>()substr</code>. تأخذ هذه الدالة سلسلة حرفية كوسيط وتعيد طولها. إذا كان طول <code>text$</code> أقل من <code>length$</code> يتم إرجاع النص ببساطة - سنتحدث عما يعني الإرجاع خلال لحظات. وإلا، فإننا ننشئ مقتطفًا باستخدام الدالة <code>()substr</code>. هذه الدالة تقطع سلسلة حرفية وتتطلب ثلاثة وسائط: النص الذي سنقتطع منه، ومن أين تبدأ بالاقتطاع، وطول النص الذي نرد اقتطاعه. نريد أن نبدأ من بداية النص وقطع أحرف <code>length$</code>، وهذا هو السبب لإضافتي رقم 0 كي يقتطع من بداية السلسلة الحرفية. وأخيرًا، نضيف النص الملحق إلى النهاية. لقد استخدمت <code>.=</code> للقيام بذلك. هذه هي نفس كتابة
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs bash"><span class="hljs-variable"><span class="pln">$excerpt</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$excerpt</span></span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$append</span></span><span class="pln"> </span></code></pre>

<p>
	في السطر الأخير، قمت بإعادة متغير <code>excerpt$</code>. ما هو الإرجاع؟ حتى الآن كنا في معظم الأحيان نظهر المخرجات، ولكن في كثير من الحالات نحن لا نريد عرض نتيجة حساباتنا. الدالة <code>()strlen</code> هي مثال جيد على ذلك. أنت لا تريد فعلاً عرض طول متغير <code>text$</code> أنت ترغب فقط في استخدامه في التعليمات البرمجية لتحقيق شيء ما. <code>()strlen</code>ترجع هذه القيمة، مما يسمح لك باستخدامها في مكان آخر. عند إرجاع قيمة باستخدام دالة، يمكنك إما استخدامها مباشرة مثل دالة <code>()strlen</code>، أو تعيينها لمتغير
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_247_8" style=""><code class="hljs handlebars"><span class="xml"><span class="php"><span class="hljs-function"><span class="hljs-params"><span class="hljs-variable"><span class="pln">$short_text</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> get_excerpt</span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$content</span></span><span class="pln"> </span><span class="pun">)</span></span></span></span></span></span></code></pre>

<p>
	يمكنك بعد ذلك إظهار <code>short_text$</code> في وقت لاحق عند الحاجة.
</p>

<h2 id="لمزيد-من-القراءة-والدراسة">
	لمزيد من القراءة والدراسة
</h2>

<p>
	PHP هي الأساس لجميع قوالب و إضافات WordPress لذلك سوف تحتاج إلى الاعتماد بشكل كبير جدًا على هذه اللغة. عند العمل في بيئة ووردبريس، ستستخدم دوال PHP (مثل <code>strlen</code> و <code>substr</code>)، ولكن هناك أيضًا مئات من الدوال التي تم إنشاؤها خصيصًا لووردبريس من قبل فريق التطوير الأساسي لمساعدتك. ستكتشف بعض هذه الوظائف في الدروس القادمة من <a href="https://academy.hsoub.com/tags/%D8%AA%D8%B7%D9%88%D9%8A%D8%B1%20%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86/" rel="">هذه السلسلة</a>.<br>
	لقد غطينا الأساسيات التي تحتاج إلى معرفتها للبدء بتطوير ووردبريس، ولكن الحقيقة هي أننا فقط خدشنا السطح! من المهم أن تقرأ وتستكشف كل المواضيع المتعلقة بووردبرس وPHP لمزيد من العمق والممارسة.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://premium.wpmudev.org/blog/wordpress-development-beginners-php/" rel="external nofollow">WordPress Development for Beginners: Learning PHP</a> لصاحبه Daniel Pataki
</p>
]]></description><guid isPermaLink="false">582</guid><pubDate>Sun, 31 Dec 2017 15:01:00 +0000</pubDate></item><item><title>&#x643;&#x64A;&#x641; &#x62A;&#x62D;&#x648;&#x651;&#x650;&#x644; &#x642;&#x627;&#x644;&#x628; HTML &#x633;&#x627;&#x643;&#x650;&#x646; &#x625;&#x644;&#x649; &#x642;&#x627;&#x644;&#x628; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633; &#x645;&#x62A;&#x62C;&#x627;&#x648;&#x628;: &#x627;&#x644;&#x62A;&#x62D;&#x636;&#x64A;&#x631; &#x644;&#x644;&#x62A;&#x62D;&#x648;&#x64A;&#x644;&#x60C; &#x646;&#x633;&#x62E; &#x627;&#x644;&#x645;&#x644;&#x641;&#x627;&#x62A; &#x648;&#x62A;&#x641;&#x639;&#x64A;&#x644; &#x627;&#x644;&#x642;&#x627;&#x644;&#x628;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D9%83%D9%8A%D9%81-%D8%AA%D8%AD%D9%88%D9%91%D9%90%D9%84-%D9%82%D8%A7%D9%84%D8%A8-html-%D8%B3%D8%A7%D9%83%D9%90%D9%86-%D8%A5%D9%84%D9%89-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8-%D8%A7%D9%84%D8%AA%D8%AD%D8%B6%D9%8A%D8%B1-%D9%84%D9%84%D8%AA%D8%AD%D9%88%D9%8A%D9%84%D8%8C-%D9%86%D8%B3%D8%AE-%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA-%D9%88%D8%AA%D9%81%D8%B9%D9%8A%D9%84-%D8%A7%D9%84%D9%82%D8%A7%D9%84%D8%A8-r581/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2017_12/29-2.png.b754596223a26b86f18c306b2cbe6ad7.png" /></p>

<p>
	في الوقتِ الذي تكبر فيه إدارة الأعمال على الإنترنت بشكلٍ كبير، يتزايد عددُ العملاء الرّاغبين في دفع مبالغ كبيرة من المالِ للأشخاص الذين يمتلكون مهارةَ بناءِ المواقع. ربّما تكون قد تعلَّمت طريقة بناء موقعٍ بواسطة HTML و CSS، و لكن للأسف ذلك النّوع من المواقعِ لا يلّبي احتياجاتِ كُبرياتِ الشَّركات، بل لا تُلبِّي حتّى احتياجات مدوّنة في أيامنا هذه.<br>
	هذا هو أهمُّ سببٍ يجعل من الضروريِّ لك أن تتعلَّم طريقة تحويل قالب html و css ساكِن إلى قالب ووردبريس متفاعِل.
</p>

<h3 id="الموارد-التي-ستحتاجها-لإكمال-هذا-الدرس">
	الموارد التِّي ستحتاجها لإكمال هذا الدّرسِ:
</h3>

<ul>
<li>
		قالب <a href="https://1stwebdesigner.com/wp-content/uploads/2014/07/neoblog_HTML_updated.zip" rel="external nofollow">NeoBlog</a> مصنوع من html و css.
	</li>
	<li>
		معرفة أساسيّة بأكواد ووردبريس.
	</li>
	<li>
		معرِفةٌ متوسِّطة بلغةِ PHP ومكتبة jQuery.
	</li>
</ul>
<h3 id="ما-سنقوم-بإنجازه">
	ما سنقوم بإنجازه:
</h3>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileid="26108" href="https://academy.hsoub.com/uploads/monthly_2017_12/Final_theme3.jpg.009b8c7f5de3f30992454c1efff33e5f.jpg" rel=""><img alt="Final_theme3.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="26108" data-unique="gu40c1jbm" src="https://academy.hsoub.com/uploads/monthly_2017_12/Final_theme3.thumb.jpg.b8de813c070d20d6fe0a88b0531f743e.jpg"></a>
</p>

<p>
	قالب ووردبريس هو وسيلتُك لتغيير الشَّكل الخارجيِّ لموقعك. القالب يُمكن أن يقوم بتغيير كبيرٍ للشَّكلِ العامِّ لموقعك، حيثُ أنّه يوفِّر لك واجهة رسومِيَّةً عن طريق ملفّاتهِ.<br>
	عِند إنشاء قالب ووردبريس عليك الانتباه للنقاطِ التاليّة:
</p>

<ul>
<li>
		انتبه لاسمِ ملفّات القالب التي أنشأتها، في الوضع الافتراضي ووردبريس يتعّرف على أسماء ملّفات القالب الافتراضيّة مثلَ single.php و page.php لذا أنصحك بأن تتحقّق من اسم القالب الافتراضيِّ لووردبريس قبل أن تبدأ بتسميةِ ملفاتك الخاصّة.
	</li>
	<li>
		اطّلع على <a href="https://codex.wordpress.org/" rel="external nofollow">دليل ووردبريس</a> من أجل بعض الدوالِّ، الوسوم أو بعضِ أكواد PHP لاستخدامها في ملفَّات قالبك، هذا الأمر سيبقيك على الطّريق الصحيح للوصولِ إلى الوظائف التي تريد من قالبك تنفيذها.
	</li>
	<li>
		في بعضِ الأحيان قد تحتاج بعضَ ملفّاتِ الـ jQuery لتحسينِ الشَّكل الخارجيِّ لقالبك أو لإضافة بعضِ الوظائف. ووردبريس لن يقوم بتوفير كلِّ شيءٍ لك.
	</li>
	<li>
		تأكّد من كتابة برمجيّةٍ بِهيكلة جيِّدة، خاليّةٍ من أخطاء PHP و HTML مصادقٍ عليه.
	</li>
	<li>
		استخدم CSS نقيّا مصادقًا عليه.
	</li>
	<li>
		اتبع <a href="https://codex.wordpress.org/Site_Design_and_Layout" rel="external nofollow">دليل التصميم</a> لتصميم الموقع ونُسوقِه.
	</li>
	<li>
		اعمل نُسخًا احتياطيّةً لملفّاتك. أنت لن تخسر شيئًا عند القِّيام بذلك. لذا وجب عليك دائمًا أخذ معايير وقائيّة عن طريق عمل نُسخٍ احتياطيّة لملفّات قالبك، الإضافات التي تستخدمها إضافة الى بعض الملفّات الأخرى التي تستخدمها في تطوير قالبك.
	</li>
</ul>
<h3 id="لم-يتوجب-عليك-أخذ-ملاحظات-حول-php">
	لِمَ يتوجّبُ عليك أخذ ملاحظات حولَ PHP:
</h3>

<p>
	PHP هي لغة برمجة لإنشاء مواقع ديناميكيّة متفاعلة. هي مستخدمة على نطاقٍ واسعٍ بسبب كونها لغة مفتوحةَ المصدر وهي مناسبة لك كونك تستطيع تضمينها داخل وُسوم HTML.<br>
	تّمت كتابة ووردبريس باستخدام لغة PHP ومثلَها يُعتبر سكريبت ووردبريس مفتوحَ المصدر مصادقٌ عليه من طرفِ مبادرةِ المصدرِ المفتوح.<br>
	بعض أجزاء برمجيّة ووردبريس المكتوبة بلغة PHP متعارضة في نسقها لذا وجب أن تكونَ لديك معرفة بأساسيّات لغة PHP.<br>
	على كلِّ حالٍ لست مضطرًّا لأن تكون مطوِّر مواقع PHP لكي تتمكّن من إنشاءِ قالب ووردبريس، كلُّ ما ستحتاجه هو امتلاك قاعدة قويِّةٍ في لغات HTML، CSS، و JavaScript مع خلفيّة عن أساسيّات PHP.
</p>

<h3 id="مخطط-العمل">
	مخطّط العمل:
</h3>

<p>
	أوّلا، سنقوم بالتعرّف على الملفّات التي سنحتاجها لبناء قالب ووردبريس مُتكامل. الخطوة التاليّة ستكون البدء بكتابة الأكواد داخل كلِّ ملفٍّ من ملفّات القالب.<br>
	طيلة الطريق، ستكون هناك دوالّ قد لا تبدو واضحةً بالنّسبة لك. في هذه الحالةِ <a href="https://codex.wordpress.org/" rel="external nofollow">دليل ووردبريس</a> سيُصبح أحسن صديقٍ لك.<br>
	بعد الانتهاء من إنشاء القالب سنقوم بإضافة المحتوى إليهِ للتأكّد مِن أنَّ البرمجيّة تعمل بالشكل المطلوب على موقعك.
</p>

<h3 id="فلنبدأ">
	فلنبدأ
</h3>

<p>
	للبدءِ بتحويل قالب NeoBlog لقالبِ ووردبريس فلنقم أوّلًا بإنشاء مجلّدٍ في المسار <code>content/themes</code>. ستجده بداخل المجلّد الذي نصَّبت به ووردبريس.<br>
	خذ في الحُسبان أنَّ اسم المجلَّد يجب أن يكون نفس اسم القالب الذي تريد إنشاءه. في هذا الدّرس قمت بتسمية قالبي NeoBlog.
</p>

<p style="text-align: center;">
	<img alt="file-folder.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26106" data-unique="ox18yjsdi" src="https://academy.hsoub.com/uploads/monthly_2017_12/file-folder.png.d887b711e17dd5ccf068cb6e1f531b53.png"></p>

<h2 id="الجزء-الأول-1-ملفات-القالب">
	الجزء الأوّل: 1. ملفّات القالب
</h2>

<p>
	بالمقارنة مع قالب HTML و CSS ساكن، قالبُ ووردبريس يحتوي على العديد من الملفّات.<br>
	هذه الملفّات هي مَن تحتوي على الأكوادِ التِّي تجعلُ قالب ووردبريس يعمل. للقيامِ بذلك قم بإنشاء الملفّات التاليّة داخل مجلّدِ قالب NeoBlog:
</p>

<ul>
<li>
		مجلّد CSS: هذا المجلّد سيحتوي على جميع ملفّات التنسيقات، قم بنسخهِ من مجلّد قالب HTML وCSS NeoBlog.
	</li>
	<li>
		مجلّد الخطوط: هذا المجلّد سيحتوي على جميع الخطوط الخارجيّة المستخدمة في التصميم. قم بنسخه أيضًا من مجلّد قالب HTML وCSS NeoBlog.
	</li>
	<li>
		مجلّد الصُّور: هذا المجلّد سيحتوي على جميع الصّور المستخدمةِ في التّصميم مثل الشعار وغيره. قم بنسخه أيضًا من مجلّد قالب HTML وCSS NeoBlog.
	</li>
	<li>
		مجلّد جافا سكريبت: يحتوي كلّ ملفّات جافا سكريبت المستخدمة في قالبنا. هذا المجلّد أيضًا قم بنسخه من مجلّد قالب HTML وCSS NeoBlog.
	</li>
	<li>
		<code>header.php</code> : هذا الملّف سيحتوي على أكواد القِسم الرأسيِّ للقالب.
	</li>
	<li>
		<code>footer.php</code> : هذا الملّف سيحتوي على أكواد القِسم السفليِّ للقالب.
	</li>
	<li>
		<code>index.php</code> : هذا هو الملفّ الأساسي للقالب، سيحتوي على أكواد المنطقة الرئيسيّة للقالب كما سيحدّد مِن أين سيتّم تضمين الملفّات الأخرى.
	</li>
	<li>
		<code>functions.php</code> : هذا الملّف سيتصرّف كإضافة ووردبريس، بحيث أنّه يضيف مميّزاتٍ و خصائص للقالب.
	</li>
	<li>
		<code>single.php</code> : سيحتوي على نسق صفحة عرض المقال.
	</li>
	<li>
		<code>page.php</code> : سيحتوي على نسق صفحة ووردبريس.
	</li>
	<li>
		<code>page-about.php</code> : هذا الملفُّ عبارة عن نموذج مقالٍ خاصٍّ يأتي مدمجًا داخل ووردبريس، يُستخدم هذا النموذج عادة لجعل صفحةٍ أو مجموعة صفحاتٍ تُعرض بشكلٍ مختلفٍ عن الشّكل العام للصّفحة في القالب. في حالتنا سنقوم بإنشاء نموذجٍ خاصٍّ لصفحة “عن الموقع”.
	</li>
	<li>
		<code>page-contact.php</code> : نوع آخر من النّماذج المدمجة مع ووردبريس. هذا النّموذج سيتم استخدامه لِعرضِ استمارة “تواصل معنا” للصّفحة التي تم تحديدها.
	</li>
	<li>
		<code>content-search.php</code> : هذا الملفّ يحتوي على حلقة تِكرارٍ تقوم بعرض نتائج البحث.
	</li>
	<li>
		<code>search.php</code> : هذا الملفّ مسؤولٌ عن عرضِ صفحات نتائج البحث.
	</li>
	<li>
		<code>searchform.php</code> : هذا الملفّ سيحتوي على نسقِ استمارة البحث.
	</li>
	<li>
		<code>comments.php</code> : هذا الملفّ سيحتوي على الكود المسؤول عن عرضِ التعليقات.
	</li>
	<li>
		<code>sidebar.php</code> : هذا الملفّ سيحتوي القائمة الجانبيّة.
	</li>
	<li>
		<code>404.php</code> : هذا الملفّ سيحتوي على صفحة الخطأ التي ستعرض نصَّ “لم يتم إيجاد نتائج مطابقة” و سيتّم التوجيه إلى هذه الصّفحة عندما لا تكون نتائج الاستعلام المطلوب موجودة بقاعدة البيانات.
	</li>
	<li>
		<code>style.css</code> : هذا الملفّ سيحتوي على تنسيقات و معلومات قالبنا NeoBlog.
	</li>
	<li>
		<code>Screenshot</code> : صورة بصيغة png تقوم بعرضِ تصميم القالب أو عنوانه.
	</li>
</ul>
<p>
	طيلة هذا الدّرسِ سنقوم بإضافة أكوادٍ لهذه الملفّات تتضّمن قوائم، مُعلِّقات، حلقات تِكرار وَوِدجت.
</p>

<h3 id="الخطوة-11-نسخ-الملفات-الضرورية-لقالب-ووردبريس-neoblog">
	الخطوة 1.1- نسخ الملفّات الضرورية لقالب ووردبريس NeoBlog
</h3>

<p>
	بدايةٌ قم بنسخِ مجلّداتcss, fonts, images و js من مجلّد قالب HTML وCSS NeoBlog و ألصقها في قالب ووردبريس NeoBlog.
</p>

<p style="text-align: center;">
	<img alt="file-folder1.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26107" data-unique="jlq32y14x" src="https://academy.hsoub.com/uploads/monthly_2017_12/file-folder1.png.1a5a14a4b098fe5cb97624713490512f.png"></p>

<h3 id="الخطوة-21-تسمية-قالبك-ووردبريس-عن-طريق-stylecss">
	الخطوة 2.1- تسميّة قالبك ووردبريس عن طريق <code>style.css</code>
</h3>

<p>
	قبل البدءِ بالعمل على ملفّات القالب، فلنقم أوّلًا بشبك ملفّات تنسيق قالب HTML وCSS NeoBlog داخل ملفِّ قالبنا NeoBlog لووردبريس. بداية أنشئ ملفَّ <code>style.css</code> ثمّ ألصق الكود التّالي بداخله.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5372_7" style="">
<span class="com">/*
Theme Name: NeoBlog
Theme URI: https://1stwebdesigner.com/
Author: Sam Norton
Author URI: https://1stwebdesigner.com/
Description:  A Simple Blog Theme for 1stwebdesigner.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/</span><span class="pln">

</span><span class="lit">@import</span><span class="pln"> url</span><span class="pun">(</span><span class="str">"css/reset.css"</span><span class="pun">);</span><span class="pln">
</span><span class="lit">@import</span><span class="pln"> url</span><span class="pun">(</span><span class="str">"css/bootstrap.css"</span><span class="pun">);</span><span class="pln">
</span><span class="lit">@import</span><span class="pln"> url</span><span class="pun">(</span><span class="str">"css/style.css"</span><span class="pun">);</span></pre>

<p>
	لا شيء معقّدٌ هنا، هذا الكود يحتوي معلوماتٍ عن القالب مثل اسم القالب، المؤلِّف، رابط موقع المؤلِّف وغيرها. جميع المعلومات مُضمّنة داخل وسم تعليق. هذه المعلومات ستُسهِّل التعرّف على القالب أثناء التنصيب.<br>
	يحتوي هذا الكود أيضا على مجموعةٍ وُسوم <code>@import</code> وظيفتها استدعاء ملفّات CSS الخاصّة بقالبنا من مجلّد CSS الذي سبق وأن أنشأناه من قبل.
</p>

<h3 id="الخطوة-31-إنشاء-صورة-مصغرة-للتعريف-بالقالب">
	الخطوة 3.1- إنشاء صورة مصغّرة للتعريف بالقالب
</h3>

<p>
	الآن وبعد أن أعطينا اسمًا لقالبنا عبر ملفِّ <code>style.css</code>، فلنقم بإضافة صورة تعريفيّة للقالب. بداية قم بإنشاء صورةٍ بأبعاد 880*660 بِكسل عن طريق فوتوشوب ثم بعد ذلك أضف لها عنوان القالب، تعريفٌ مختصر واسم مؤلِّف القالب.<br>
	في الحقيقة هذه الصورة ستُعرض بأبعاد 387*290 بِكسل في لوحة تحكّم المدير ولكّننا تعمّدنا إنشاءها بحجم مضاعف حتى تظهر بشكل أوضح على الشاشات الفائقة الدّقة HiDPI.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileid="26109" href="https://academy.hsoub.com/uploads/monthly_2017_12/screenshot.png.ebb03ee97c8cd4da06469d8c969b636a.png" rel=""><img alt="screenshot.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26109" data-unique="bokog3qz9" src="https://academy.hsoub.com/uploads/monthly_2017_12/screenshot.thumb.png.18e73baacc27fee4ee8c95e4170449ef.png"></a>
</p>

<p>
	بعد ذلك قم بحفظِ الصورة بامتداد png داخل المجلّد الرئيسي لقالب NeoBlog لووردبريس.
</p>

<h3 id="الخطوة-41-تفعيل-القالب">
	الخطوة 4.1- تفعيل القالب
</h3>

<p>
	بعد إضافتنا للصورة فلنقم الآن بتفعيل القالب.<br>
	لكن قبل تفعينا للقالب، ولِكي نقوم بالتحقّق إن كان يعمل أم لا، فلنقم بإنشاء ملّف <code>index.php</code> فارغ داخل المجلّد الرئيسي لقالب NeoBlog لووردبريس (لا تقلق، سنضيف الأكواد المناسبة لهذه الصّفحة لاحقًا).<br>
	الآن دعنا نُفعِّل القالب من خلال لوحة تحكُّمِ المدير عن طريق اختيار <strong>مظهر&lt; قوالب</strong> ثمّ بعد ذلك نضغط على زرِّ <strong>تفعيل</strong>.
</p>

<p style="text-align: center;">
	<img alt="themes.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="26110" data-unique="yb97y1gjp" src="https://academy.hsoub.com/uploads/monthly_2017_12/themes.jpg.73b6bf1b6a61f312018cc9487dd94d21.jpg"></p>

<p style="text-align: center;">
	<img alt="activate.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26105" data-unique="aqzowrmmm" src="https://academy.hsoub.com/uploads/monthly_2017_12/activate.png.70fada89aef94f4fb19558c0f1f7f60a.png"></p>

<p>
	إن أردت التحقّق أنَّ القالب يعمل، كلُّ ما عليك القّيام به هو التوجّه إلى الصفحة الرئيسّية وستلاحظ ظهور صفحةٍ بيضاء فارغة وهذا راجع إلى أنّنا لم نقم بعد بإضافة أكواد لصفحة <code>index.php</code>.
</p>

<h2 id="أهم-المشاكل-التي-قد-تواجهك-خلال-هذا-الدرس">
	أهمُّ المشاكلِ التي قد تواجهك خلال هذا الدّرس
</h2>

<p>
	خلال تجريبك لهذا الدّرس ، قد تواجهك مشاكل أثناء دمج أكواد PHP مع أكواد HTML.<br>
	يجب عليك دائمًا التحقّق مرّتين من أكوادك، أحيانًا قد تنسى غلق حلقة التّكرار “<code>while</code>” أو غلق الشّرط “<code>if</code>”. مثلًا في الكود أسفله هناك خطأ حيث أنّنا نسينا إغلاق شرط “<code>if</code>”.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5372_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> 
</span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">while</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        the_post</span><span class="pun">();</span><span class="pln">
        </span><span class="hljs-comment"><span class="com">//</span></span><span class="pln">
        </span><span class="hljs-comment"><span class="com">// Post Content here</span></span><span class="pln">
        </span><span class="hljs-comment"><span class="com">//</span></span><span class="pln">
    </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">end</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">while</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln"> </span><span class="hljs-comment"><span class="com">// end if supposed to be here</span></span><span class="pln">

</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

<p>
	لكنّنا قمنا بإصلاح ذلك هنا:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5372_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> 
</span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">while</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        the_post</span><span class="pun">();</span><span class="pln">
        </span><span class="hljs-comment"><span class="com">//</span></span><span class="pln">
        </span><span class="hljs-comment"><span class="com">// Post Content here</span></span><span class="pln">
        </span><span class="hljs-comment"><span class="com">//</span></span><span class="pln">
    </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">end</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">while</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln"> </span><span class="hljs-comment"><span class="com">// end if supposed to be here</span></span><span class="pln">

</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span></code></pre>

<p>
	عليك أيضًا الانتباه عند نهاية كوده PHP لغلقِه بواسطة وسمِ الإغلاق، إن نسيت ذلك فإنّ الكود الخاصّ بك قد لا يعمل عندما يتداخل مع أكواد HTML.<br>
	إن أردت أن تتعلّم إضافة وظائف أخرى لموقعك فعليك بالاطلاع على <a href="https://codex.wordpress.org/" rel="external nofollow">دليل ووردبريس</a> .
</p>

<h2 id="ماهي-حدود-هذه-السلسلة">
	ماهي حُدود هذه السلسلة ؟
</h2>

<p>
	رغم أنَّ هذا الدّرس يعطيك مدخلًا لكيفيّة إنشاء قالبك الخاص، إلَّا أنّ لديه حدودًا، فهو سيعلّمك فقط استخدام المميّزات الأساسيّة لإنشاء قالب مدوّنةٍ مثل القائمة الجانبيّة، التذييل، صندوق البحث، قائمة المقالات، الصورة البارزة وغيرها.
</p>

<h2 id="ملخص-الجزء-الأول">
	ملخص الجزء الأوّل
</h2>

<p>
	جميل! لقد أكملنا الجزء الأوّل من هذا الدّرس. لقد تعلّمت طريقة تضبيط ملفّات القالب، ما يجب عليك تفاديه، بعض النقاط التي وجب عليك البحث عنها، إضافةً إلى الخطوات الواجب إتّباعها لإنشاء قالب ووردبريس.<br>
	ملفّ HTML مجهّز الآن للبدء بتحويله إلى مجموعة ملفّات ستُشكّل قالب ووردبريس. في الدرس القادم سنعمل على هذه الملفّات ونضيف لها بعض الدّوال لجعل قالبنا يدعم بعض الوظائف.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://1stwebdesigner.com/convert-html-template-wordpress/" rel="external nofollow">How to Convert a Static HTML Template into a Responsive WordPress Theme</a>
</p>
]]></description><guid isPermaLink="false">581</guid><pubDate>Fri, 29 Dec 2017 14:08:00 +0000</pubDate></item><item><title>&#x62A;&#x637;&#x648;&#x64A;&#x631; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633; &#x627;&#x644;&#x645;&#x633;&#x62A;&#x648;&#x649; &#x627;&#x644;&#x645;&#x62A;&#x642;&#x62F;&#x645;: &#x645;&#x642;&#x62F;&#x645;&#x629; &#x625;&#x644;&#x649; &#x627;&#x644;&#x628;&#x631;&#x645;&#x62C;&#x629; &#x63A;&#x631;&#x636;&#x64A;&#x629; &#x627;&#x644;&#x62A;&#x648;&#x62C;&#x647;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D8%AA%D8%B7%D9%88%D9%8A%D8%B1-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D9%88%D9%89-%D8%A7%D9%84%D9%85%D8%AA%D9%82%D8%AF%D9%85-%D9%85%D9%82%D8%AF%D9%85%D8%A9-%D8%A5%D9%84%D9%89-%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D8%BA%D8%B1%D8%B6%D9%8A%D8%A9-%D8%A7%D9%84%D8%AA%D9%88%D8%AC%D9%87-r580/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2017_12/5a3f742b76993_27-2(1).png.64b6f5c17380c6ba7fac77e26adeedec.png" /></p>

<p>
	هل تريد تطوير مهاراتك في تطوير ووردبريس إلى مرحلة متقدمة؟ هل أنت مستعد لرفع مستواك في لغة PHP لأعلى مستوى وإضافة المزيد من القوة إلى إضافات وقوالب ووردبريس التي تقوم بتطويرها.
</p>

<h2 id="قبل-أن-نبدأ">
	قبل أن نبدأ
</h2>

<p>
	يُفترض قبل البدء أنك تعرف برمجة ووردبريس وتعلم كيف تعمل قوالب وإضافات ووردبريس بشكل بسيط إذا لم تكن تعلم فيمكنك البحث في الموقع وستجد مقالات للمبتدئين.
</p>

<h2 id="ماذا-سنغطي-في-هذه-المقالة">
	ماذا سنغطي في هذه المقالة
</h2>

<p>
	في هذه المقالة، سوف نبدئ مباشرة في البرمجة غرضية التوجه (object-oriented programming) وكيف يتم استخدامها في تطوير ووردبريس. البرمجة غرضية التوجه لا تحتاجها بشدة كمطور ووردبريس لكن بعد استخدامي لها لاحظت أن جودة تعليماتي البرمجية قد تحسنت بشكل سريع وقوي عندما بدأت في وضع مفاهيم البرمجة غرضية التوجه في عين الاعتبار، واستطعت أن أتعلم لغات برمجة آخرى لأن مفهوم الأصناف(classes) والكائنات(objects) متشابهة في كل لغات البرمجة. لنلقي نظرة على مبادئ البرمجة غرضية التوجه لنرى ما هي ولنستعملها في برمجة قوالب وإضافات قوية.
</p>

<h2 id="ما-هي-البرمجة-غرضية-التوجه">
	ما هي البرمجة غرضية التوجه؟
</h2>

<p>
	البرمجة غرضية التوجه هي منطق تفكيري أكثر من أن تكون طريقة لكتابة التعليمات البرمجية، لأنها تعني التفكير في البرمجة بشكل منظم أكثر، وتغليف التعليمات البرمجية وجعلها كوحدات منفصلة من أجل استخدامها بشكل أفضل لاحقًا. لا تقلق إذا لم تستوعب ما شرحناه، لأننا سنلقي نظرة على كثير من الأمثلة خلال هذه المقالة لتساعدك في ترسيخ هذه المفاهيم.
</p>

<h2 id="لماذا-نستخدم-البرمجة-غرضية-التوجه">
	لماذا نستخدم البرمجة غرضية التوجه؟
</h2>

<p>
	البرمجة غرضية التوجه تُغلف المجموعات المتماثلة منطقيًا من التعليمات البرمجية موفرةً بذلك تعليمات برمجية أكثر قابلية للقراءة وأكثر تنظيمًا وهي توفر الفوائد التالية:<br>
	• تعليمات برمجية أسهل تتبعًا.<br>
	• تطوير هذه التعليمات البرمجية يصبح فيما بعد أسهل بكثير.<br>
	• أسماء الدوال لا داعلي لأن تكون طويلة بعد الآن، والدوال داخل الأصناف لا تتضارب مع الدوال خارج هذه الأصناف.<br>
	• درجة أعلى من قابلية إعادة استخدام التعليمات البرمجية.
</p>

<h2 id="تعلم-عن-طريق-مثال">
	تعلم عن طريق مثال
</h2>

<p>
	لنبدأ مع مثال على تعليمات برمجية عادية وتحويلها إلى تعليمات برمجية غرضية التوجه، لنفترض أننا نبني موقع تويتر Twitter، ونريد أن نقوم بحذف الأحرف من نص معين، وتحويل النصوص إلى روابط، لذا سأقوم بكتابة بعض الدوال لاستعمالها في المشروع:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_2266_7" style="">
<span class="com">// Cut text down to required length</span><span class="pln">
</span><span class="kwd">function</span><span class="pln"> get_chirp_text</span><span class="pun">(</span><span class="pln"> $text </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> substr</span><span class="pun">(</span><span class="pln"> $text</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">200</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">// Parse hashtags from text</span><span class="pln">
</span><span class="kwd">function</span><span class="pln"> get_hashtags</span><span class="pun">(</span><span class="pln"> $text </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    preg_match_all</span><span class="pun">(</span><span class="str">"/S*#((?:\[[^\]]+\]|\S+))/"</span><span class="pun">,</span><span class="pln"> $text</span><span class="pun">,</span><span class="pln"> $matches</span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> $matches</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">// Create the final chirp text</span><span class="pln">
</span><span class="kwd">function</span><span class="pln"> create_chirp</span><span class="pun">(</span><span class="pln"> $text </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    $chirp_text </span><span class="pun">=</span><span class="pln"> get_chirp_text</span><span class="pun">(</span><span class="pln"> $text </span><span class="pun">);</span><span class="pln">
    $hastags </span><span class="pun">=</span><span class="pln"> get_hashtags</span><span class="pun">(</span><span class="pln"> $chirp_text </span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">if</span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln">empty</span><span class="pun">(</span><span class="pln"> $hastags</span><span class="pun">[</span><span class="lit">1</span><span class="pun">]</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">foreach</span><span class="pun">(</span><span class="pln"> $hastags</span><span class="pun">[</span><span class="lit">1</span><span class="pun">]</span><span class="pln"> </span><span class="kwd">as</span><span class="pln"> $key </span><span class="pun">=&gt;</span><span class="pln"> $match </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            $hastags</span><span class="pun">[</span><span class="lit">1</span><span class="pun">][</span><span class="pln">$key</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="str">"&lt;a href='http://chirp.chip/hastags/"</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> $match </span><span class="pun">.</span><span class="pln"> </span><span class="str">"/'&gt;"</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="str">'#'</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> $match </span><span class="pun">.</span><span class="pln"> </span><span class="str">"&lt;/a&gt;"</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">

        $chirp_text </span><span class="pun">=</span><span class="pln"> str_replace</span><span class="pun">(</span><span class="pln"> $hastags</span><span class="pun">[</span><span class="lit">0</span><span class="pun">],</span><span class="pln"> $hastags</span><span class="pun">[</span><span class="lit">1</span><span class="pun">],</span><span class="pln"> $chirp_text </span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">

    </span><span class="kwd">return</span><span class="pln"> $chirp_text</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

$text </span><span class="pun">=</span><span class="pln"> </span><span class="str">'This is a chirp with an #example hashtag created with code that is #procedural'</span><span class="pun">;</span><span class="pln">
echo create_chirp</span><span class="pun">(</span><span class="pln"> $text </span><span class="pun">);</span></pre>

<p>
	دالة <code>()get_chirp_text</code> تقوم باستلام نص كوسيط و تقتطعه، أما دالة <code>()get_hashtags</code> تقوم باستلام نص و إرجاع الجزء من النص الذي يبدأ ب “#”. دالة <code>()create_chirp</code> تستعمل القيم المعادة من الدالتين السابقتين لتحويلها إلى روابط.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileid="26070" href="https://academy.hsoub.com/uploads/monthly_2017_12/img-1.png.ca360d60c564c61942c7f1369e0c477b.png" rel=""><img alt="img-1.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26070" data-unique="bqrx471og" src="https://academy.hsoub.com/uploads/monthly_2017_12/img-1.thumb.png.b4546a8ab2ef7079f3064527c1ff2aa6.png"></a>
</p>

<p>
	صحيح أن هذه التعليمات البرمجية تعمل بشكل صحيح، لكن ماذا لو أردنا تغيير عدد الأحرف التي نريد اقتطاعها إلى 200 أو 300 حرف، أو نريد تغيير الروابط. هذه المشاكل لن يتم ملاحظتها ولكن من الممكن أن تعقد التعليمات البرمجية إذا كانت هذه التعليمات كثيرة. لنقم بتغليف هذه التعليمات البرمجية وتحويلها إلى تعليمات برمجية غرضية التوجه سأبدأ مع التعليمات البرمجية كاملة وسأقوم بشرحها بالتتالي:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_2266_7" style="">
<code class="hljs php"><span class="hljs-class"><span class="hljs-keyword"><span class="kwd">class</span></span><span class="pln"> </span><span class="hljs-title"><span class="typ">Chirp</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">var</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$text</span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">var</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$length</span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">var</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$hashtag_base</span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">var</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$hashtags</span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">var</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="pun">;</span><span class="pln">

    </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">__construct</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$text</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">hashtag_base </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">'http://chirp.chip/hastags/'</span></span><span class="pun">;</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">text </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$text</span></span><span class="pun">;</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">set_length</span><span class="pun">();</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">set_hashtags</span><span class="pun">();</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">set_chirp</span><span class="pun">();</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">

    </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">set_length</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">length </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-number"><span class="lit">200</span></span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">

    </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">set_hashtags</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
        preg_match_all</span><span class="pun">(</span><span class="hljs-string"><span class="str">"/S*#((?:\[[^\]]+\]|\S+))/"</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">text</span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$matches</span></span><span class="pun">);</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$hashtags</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">();</span><span class="pln">
        </span><span class="hljs-keyword"><span class="kwd">foreach</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$matches</span></span><span class="pun">[</span><span class="hljs-number"><span class="lit">1</span></span><span class="pun">]</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">as</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$key</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$match</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="hljs-variable"><span class="pln">$hashtags</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'#'</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$match</span></span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;a href='http://chirp.chip/hastags/"</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$match</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">"/'&gt;"</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">'#'</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$match</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/a&gt;"</span></span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">hashtags </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$hashtags</span></span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">

    </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">set_chirp</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> substr</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">text</span><span class="pun">,</span><span class="pln"> </span><span class="hljs-number"><span class="lit">0</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">length </span><span class="pun">);</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> str_replace</span><span class="pun">(</span><span class="pln"> array_keys</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">hashtags </span><span class="pun">)</span><span class="pln">  </span><span class="pun">,</span><span class="pln"> array_values</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">hashtags </span><span class="pun">),</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="pun">);</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">chirp </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">

</span><span class="pun">}</span><span class="pln">

</span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">new</span></span><span class="pln"> </span><span class="typ">Chirp</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'This is a chirp with an #example hashtag created with code that is #procedural'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">

</span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="pun">-&gt;</span><span class="pln">chirp</span><span class="pun">;</span></code></pre>

<p>
	من البداية قمت بتعريف صنف اسمه chirp. يحوي بداخله عددًا من المتغيرات والدوال. المتغيرات تمثل خصائص مهمة للكائنات التي سيتم بناءها من هذا الصنف.
</p>

<ul>
<li>
		متغير <code>text$</code> يحمل النص الأصلي الذي نريد معالجته
	</li>
	<li>
		متغير <code>length$</code> يحمل عدد الأحرف المسموحة بها في التغريدة
	</li>
	<li>
		متغير <code>hashtag_base$</code> يحمل القيمة الأساسية لروابط الهاشتاغ
	</li>
	<li>
		متغير <code>hashtags$</code> يحمل خريطة الهاشتاغ
	</li>
	<li>
		متغير <code>chirp$</code> يحمل ال html النهائية للتغريدة
	</li>
</ul>
<p>
	لنتخطى دالة <code>__construct()</code> للوقت الحالي و نركز على دالة <code>()set_length</code> . كل ما تفعله هذه الدالة هي تعيين قيمة 200 ل <code>this-&gt;$length</code>. من المؤكد أنك تتساءل عن المتغير <code>?this$</code> يستخدم للإشارة إلى المتغيرات والدوال داخل الصنف، كما قمنا بتعيين قيمة <code>length$</code> عن طريق <code>this-&gt;$length</code> سنكون قادرين على مناداة هذا المتغير في أي مكان في الصنف باستخدام <code>this-&gt;$length</code> والنتيجة أننا لا نحتاج لتمرير هذا المتغير كوسيط عند استعماله في كل دالة. الدالة التالية هي <code>()set_hashtage</code>، تقوم بهذه الدالة بجلب النص للقيام بمعالجته من <code>this-&gt;$text</code> و الذي سوف يوضع في دالة <code>__construct()</code> و التي سنقوم بشرحها لاحقًا، لقد قمت بتغيير المصفوفة التي تنتجها هذه الدالة لتحتوي على الهاشتاغ كمفتاح و الرابط الكامل كقيمة هذا المفتاح و هذه سيجعل استبدال النص أسهل. و أخيرًا الدالة <code>()set_chirp</code> تستخدم <code>this-&gt;$text</code> و <code>this-&gt;$length</code> لقطع النص و <code>this-&gt;$hashtags</code> لتبديل النصوص مع الروابط. أخيرًا تقوم بتعيين نتيجة html إلى <code>this-&gt;$chirp</code>. و في النهاية قمت باستخدام هذا الصنف لإنشاء الكائنات مخزن في <code>chirp$</code> قمت بتمرير وسيط واحد لهذا الصنف عندما تم إنشاء الكائن من الدالة <code>__construct()</code> عندما تم تفعيل هذا الصنف.<br>
	هذه الدالة يتم تفعيلها فورًا عند إنشاء الكائن يمكنك رؤية كيف يتم تمرير الوسائط وتقوم ايضًا بالتالي:
</p>

<ul>
<li>
		تضع قيمة المتغير <code>$this-&gt;hashtag_base</code> مباشرةً
	</li>
	<li>
		تضع قيمة للمتغير <code>this-&gt;$text</code> مباشرةً
	</li>
	<li>
		تستخدم الدالة <code>()set_length</code> لضبط الطول، لاحظ بما أن الدالة داخل الصنف فيتم الإشارة إليها ب <code>this$</code>
	</li>
	<li>
		تقوم بإنشاء تعليمات html النهائية باستخدام الدالة <code>()set_chirp</code>.
	</li>
</ul>
<p>
	بعد إنشاء الكائن يمكننا إظهار أي قيمة من الكائن ونعلم أن تعليمات html النهائية مخزنة في الخاصية <code>chirp$</code>، ويمكننا الدخول إليها باستخدام الصيغة <code>chirp-&gt;$chirp</code>.
</p>

<h2 id="عناصر-الأصناف-والكائنات">
	عناصر الأصناف والكائنات
</h2>

<p>
	في هذا القسم، سوف نشرح عناصر الأصناف والكائنات. الاختلاف بين الأصناف والكائنات، بأن الأصناف هي المخططات التي تصنع منها الكائنات. الأصناف تعرف باستخدام الكلمة class متبوعة باسم الصنف الذي نريده و كل التعليمات البرمجية الخاصة به موضوعة بين { }.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_2266_7" style="">
<code class="hljs xml"><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">p</span></span><span class="tag">&gt;</span></span><span class="pln">These are just 8 of our awesome posts. Click here for </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$posts</span></span><span class="pun">-&gt;</span><span class="pln">found_posts </span><span class="pun">-</span><span class="pln"> </span><span class="hljs-number"><span class="lit">8</span></span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln"> more!</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">p</span></span><span class="tag">&gt;</span></span></code></pre>

<p>
	الأصناف يمكن أن تحوي شيئين هما المتغيرات والدوال، لكن داخل الأصناف يشار لهم بالخصائص(properties) والطرق(methods) وهذا هو الصنف فقط عبارة عن مجموعة من الخصائص والطرق. لاستخدام الخصائص والطرق داخل الصنف نحتاج إلى الإشارة لها ب <code>this$</code>. الأصناف يمكن أن تحوي عددًا من الدوال الخاصة. واحدة من هذه الدوال <code>__construct()</code> والتي يبدأ تنفيذها مباشرةً عندما ننشأ كائن من صنف. أي عدد من الكائنات يمكن إنشاءه من صنف واحد.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_2266_7" style="">
<code class="hljs vhdl"><span class="pln">$chirp_one </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">new</span></span><span class="pln"> </span><span class="typ">Chirp</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-attribute"><span class="str">'This</span></span><span class="str"> </span><span class="hljs-keyword"><span class="str">is</span></span><span class="str"> a chirp </span><span class="hljs-keyword"><span class="str">with</span></span><span class="str"> an #example hashtag created </span><span class="hljs-keyword"><span class="str">with</span></span><span class="str"> code that </span><span class="hljs-keyword"><span class="str">is</span></span><span class="str"> #procedural'</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
echo $chirp_one</span><span class="pun">-&gt;</span><span class="pln">chirp</span><span class="pun">;</span><span class="pln">

$chirp_two </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">new</span></span><span class="pln"> </span><span class="typ">Chirp</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-attribute"><span class="str">'This</span></span><span class="str"> </span><span class="hljs-keyword"><span class="str">is</span></span><span class="str"> a chirp </span><span class="hljs-keyword"><span class="str">with</span></span><span class="str"> an #example hashtag created </span><span class="hljs-keyword"><span class="str">with</span></span><span class="str"> code that </span><span class="hljs-keyword"><span class="str">is</span></span><span class="str"> #procedural'</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
echo $chirp_two</span><span class="pun">-&gt;</span><span class="pln">chirp</span><span class="pun">;</span></code></pre>

<h2 id="استخدام-الكائنات-بشكل-صحيح">
	استخدام الكائنات بشكل صحيح
</h2>

<p>
	ليس هناك طريقة واحدة صحيحة لاستعمال الكائنات، لأن ذلك يعتمد بشكل كبير على ماهية ما تبنيه. لنراجع بعض النقاط المهمة في المثال السابق
</p>

<h3 id="تحديد-الطول">
	تحديد الطول
</h3>

<p>
	لدينا دالة منفصلة لتعيين الطول، لكن كل ما تفعله هو تعيين الطول ل 200 و كان يمكننا أن نضع القيمة يدويًا في دالة <code>()substr</code> الموجودة في <code>()set_chirp</code>. السبب هو التفكير للأمام، لأنه لا يجب أن نكون هذه مهمة <code>()set_chirp</code> لمعرفة الطول. لأنه من الممكن أن نقرر أن يكون عدد الحروف 160، وتوفير أطوال مختلفة بناء على حالة المستخدم على سبيل المثال. إذا أسندنا مهمة تعيين الطول لدالة منفصلة يمكننا تغيير المنطق الخاص بالطول من دون التأثير على أجزاء آخرى في التعليمات البرمجية.
</p>

<h2 id="دوال-الضبط-setter-methods">
	دوال الضبط Setter Methods
</h2>

<p>
	الطرق أو الدوال التي تقوم بتعيين قيمة لخاصية يتم الإشارة إليها بدوال الضبط أو التعيين. يمكنك ملاحظة أنني قمت بتعيين بعض الخصائص من الدالة البانية <code>__construct()</code> و بعضها من الدوال الآخرة. طريقة تفكيري هنا كانت أن الخصائص التي لا أحتاج إلى إجراء العمليات عليها يمكنني تعيين قيمها في الدالة البانية أما التي أريد معالجة قيمها أسندتها لدوال خاصة.
</p>

<h2 id="العمل-مع-الكائنات">
	العمل مع الكائنات
</h2>

<p>
	القدرة على الإشارة إلى الخصائص والطرق داخل الأصناف توفر لنا كثيرًا من الاستراتيجيات في التعامل مع الأصناف. إذا أزلنا معظم التعليمات من الدالة البانية في مثالنا السابق يمكننا القيام بالعمليات المطلوبة من خارج الأصناف. لنلقي نظرة:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_2266_7" style="">
<code class="hljs php"><span class="hljs-class"><span class="hljs-keyword"><span class="kwd">class</span></span><span class="pln"> </span><span class="hljs-title"><span class="typ">Chirp</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">var</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$text</span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">var</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$length</span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">var</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$hashtags</span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">var</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="pun">;</span><span class="pln">

    </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">__construct</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$text</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">hashtag_base </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">'http://chirp.chip/hastags/'</span></span><span class="pun">;</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">text </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$text</span></span><span class="pun">;</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">set_length</span><span class="pun">();</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">

    </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">set_length</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">length </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-number"><span class="lit">200</span></span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">

    </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">set_hashtags</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
        preg_match_all</span><span class="pun">(</span><span class="hljs-string"><span class="str">"/S*#((?:\[[^\]]+\]|\S+))/"</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">text</span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$matches</span></span><span class="pun">);</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$hashtags</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">();</span><span class="pln">
        </span><span class="hljs-keyword"><span class="kwd">foreach</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$matches</span></span><span class="pun">[</span><span class="hljs-number"><span class="lit">1</span></span><span class="pun">]</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">as</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$key</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$match</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="hljs-variable"><span class="pln">$hashtags</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'#'</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$match</span></span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;a href='http://chirp.chip/hastags/"</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$match</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">"/'&gt;"</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">'#'</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$match</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">"&lt;/a&gt;"</span></span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">hashtags </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$hashtags</span></span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">

    </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">get_chirp</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> substr</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">text</span><span class="pun">,</span><span class="pln"> </span><span class="hljs-number"><span class="lit">0</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">length </span><span class="pun">);</span><span class="pln">
        </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="hljs-keyword"><span class="pln">empty</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">hashtags </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> str_replace</span><span class="pun">(</span><span class="pln"> array_keys</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">hashtags </span><span class="pun">)</span><span class="pln">  </span><span class="pun">,</span><span class="pln"> array_values</span><span class="pun">(</span><span class="pln">    </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">hashtags </span><span class="pun">),</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
        </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">

</span><span class="pun">}</span></code></pre>

<p>
	الفرق هنا أن الدالة البانية لا تقوم بتشغيل دالة <code>()set_hashtags</code> و بالتالي يمكننا بناء التغريدة بطريقتين:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_2266_7" style="">
<code class="hljs lasso"><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="pln"> </span><span class="hljs-subst"><span class="pun">=</span></span><span class="pln"> </span><span class="hljs-literal"><span class="kwd">new</span></span><span class="pln"> </span><span class="typ">Chirp</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'This is a chirp with an #example hashtag created with code that is #procedural'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="hljs-comment"><span class="com">// Hashtags will not be links here</span></span><span class="pln">
echo </span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="hljs-subst"><span class="pun">-&gt;</span></span><span class="pln">get_chirp</span><span class="pun">();</span><span class="pln">

</span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="hljs-subst"><span class="pun">-&gt;</span></span><span class="pln">set_hashtags</span><span class="pun">();</span><span class="pln">

</span><span class="hljs-comment"><span class="com">// Hashtags are now links because they have been set</span></span><span class="pln">
echo </span><span class="hljs-variable"><span class="pln">$chirp</span></span><span class="hljs-subst"><span class="pun">-&gt;</span></span><span class="pln">get_chirp</span><span class="pun">();</span></code></pre>

<h2 id="مثال-ووردبريس">
	مثال ووردبريس
</h2>

<p>
	يمكننا أخذ مثال رائع من ووردبريس يستخدم البرمجة غرضية التوجه وهو WP_Query. إذا كنت قد استخدمته من قبل من دون علم بالبرمجة غرضية التوجه فسيصبح أوضح بالنسبة لك الآن. لنفترض أنك تقوم بإنشاء صفحة خاصة في ووردبريس ستحتوي على أحدث 8 مقالات و3 من تقييمات الكتب القادمة. يمكنك صناعة كائنين باستخدام هذا الصنف:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_2266_7" style="">
<code class="hljs php"><span class="hljs-variable"><span class="pln">$posts</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">new</span></span><span class="pln"> WP_Query</span><span class="pun">(</span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
  </span><span class="hljs-string"><span class="str">'post_type'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'post'</span></span><span class="pun">,</span><span class="pln">
  </span><span class="hljs-string"><span class="str">'posts_per_page'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">8</span></span><span class="pun">,</span><span class="pln">
  </span><span class="hljs-string"><span class="str">'post_status'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'publish'</span></span><span class="pln">
</span><span class="pun">));</span><span class="pln">

</span><span class="hljs-variable"><span class="pln">$books</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">new</span></span><span class="pln"> WP_Query</span><span class="pun">(</span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
  </span><span class="hljs-string"><span class="str">'post_type'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'book'</span></span><span class="pun">,</span><span class="pln">
  </span><span class="hljs-string"><span class="str">'posts_per_page'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">3</span></span><span class="pun">,</span><span class="pln">
  </span><span class="hljs-string"><span class="str">'post_status'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'future'</span></span><span class="pln">
</span><span class="pun">))</span></code></pre>

<p>
	إذا اطلعت على التوثيق الخاص بهذا الصنف يمكنك روية أنه يملك العديد من <a href="https://codex.wordpress.org/Class_Reference/WP_Query#Properties" rel="external nofollow">الخصائص</a> ومن بينها <code>$found_posts</code>. ولقد أصبحنا نعرف كيف نشير إلى هذه الخصائص:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_2266_7" style="">
<code class="hljs xml"><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">p</span></span><span class="tag">&gt;</span></span><span class="pln">These are just 8 of our awesome posts. Click here for </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$posts</span></span><span class="pun">-&gt;</span><span class="pln">found_posts </span><span class="pun">-</span><span class="pln"> </span><span class="hljs-number"><span class="lit">8</span></span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln"> more!</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">p</span></span><span class="tag">&gt;</span></span></code></pre>

<p>
	أصعب جزء في الأصناف والكائنات هو ليس استخدامها بل كيف تستخدمها بشكل صحيح، وأنا أشجعك أن تبدأ باستخدام البرمجة غرضية التوجه في مشاريعك، ربما في البداية سترى أنها غير مفيدة. لكن عندما بدأت في تطبيقها في مشاريعي وجدت الفائدة الكبيرة للبرمجة غرضية التوجه ومعظم إطارات العمل الحديثة ك Laravel تستخدم البرمجة غرضية التوجه.
</p>

<h2 id="احتراف-تطوير-ووردبريس">
	احتراف تطوير ووردبريس
</h2>

<p>
	نحن فقط بدأنا في تعلم ما يمكننا فعله، ويوجد الكثير مما يمكن تعلمه عن الأصناف وأنصحك في التدريب والتجريب وارتكاب الأخطاء وعدم الاستسلام.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://premium.wpmudev.org/blog/advanced-wordpress-development-introduction-to-oop/" rel="external nofollow">Advanced WordPress Development: Introduction to Object-Oriented Programming</a> لصاحبه Daniel Pataki
</p>
]]></description><guid isPermaLink="false">580</guid><pubDate>Wed, 27 Dec 2017 10:07:00 +0000</pubDate></item><item><title>&#x643;&#x64A;&#x641; &#x62A;&#x633;&#x62A;&#x62E;&#x62F;&#x645; &#x62D;&#x644;&#x642;&#x629; &#x627;&#x644;&#x62A;&#x643;&#x631;&#x627;&#x631; &#x627;&#x644;&#x62E;&#x627;&#x635;&#x629; &#x628;&#x627;&#x644;&#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633; &#x644;&#x62A;&#x646;&#x633;&#x64A;&#x642; &#x623;&#x648;&#x651;&#x644; &#x645;&#x642;&#x627;&#x644; &#x628;&#x637;&#x631;&#x64A;&#x642;&#x629; &#x645;&#x62E;&#x62A;&#x644;&#x641;&#x629;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D9%83%D9%8A%D9%81-%D8%AA%D8%B3%D8%AA%D8%AE%D8%AF%D9%85-%D8%AD%D9%84%D9%82%D8%A9-%D8%A7%D9%84%D8%AA%D9%83%D8%B1%D8%A7%D8%B1-%D8%A7%D9%84%D8%AE%D8%A7%D8%B5%D8%A9-%D8%A8%D8%A7%D9%84%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D9%84%D8%AA%D9%86%D8%B3%D9%8A%D9%82-%D8%A3%D9%88%D9%91%D9%84-%D9%85%D9%82%D8%A7%D9%84-%D8%A8%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-%D9%85%D8%AE%D8%AA%D9%84%D9%81%D8%A9-r578/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2017_12/24.png.ba34315067f330398859e19cbcfa59ba.png" /></p>

<p>
	القدرة على تعديل حلقة التكرار الخاصة بالووردبريس تمنحك الكثير من التحكم بتصميم ومحتوى موقعك المبني على ووردبريس. دائمًا ما أقوم بإنشاء حلقات تكرار خاصة، أحيانًا عن طريق تعديل حلقة التكرار القياسية وأحيانًا أخرى باستخدام WP_Query لإنشاء حلقات تكرار جديدة بالكامل. ولكن أحيانًا في بعض الحالات أرغب بأخذ الأمور إلى المستوى التالي. أريد أن أقوم بعرض المقال الأول في حلقتي بطريقة مختلفة عن المقالات التي تليه. يمكنني القيّام بهذا لأنني قد أريد إضافة تنسيقات خاصة أو ربما لأنّني أريد عرض محتوًى مختلفًا. مثلًا قد أريد أن أعرض محتوى المقال الأول وفقط المقتطفات بالنسبة للمقالات التي تليه، أو ربما أريد عرض الصورة البارزة للمقال الأول بحجم مختلف عن بقية المقالات، أو مثلًا أريد أن أطبّق كلاسات CSS مختلفة على أوّل مقالٍ. القيام بهذا الأمر سيمكّنك من تسليط الضوء على أحدث مقالاتك، جلب انتباه زوّار موقعك لقراءتها وتشجيعهم للنقر عليها. كما يمكّنك هذا الأمر من تحسين نسق موقعك، عن طريق إنشاء تصميمٍ أكثر تنويعًا.<br>
	خلال هذا الدرس سأقوم بتعليمك كيف تستخدم كلاس WP_Query للقيام بذلك. سأريك كيف تقوم بعمل استعلامٍ خاص لكل مقالاتك باستخدام WP_Query ثم بعد ذلك سأريك كيف تقوم بإنشاء استعلام خاص ثانٍ يتم تطبيقه فقط على مقالك الأوّل. خلال المثال الذي سنعمل عليه سأريك أولًا كيف يمكنك القيام بهذا الأمر على نموذج صفحة خاصة باستخدام WP_Query لجعل استعلامين مختلفين يعملان معًا. ثم بعد ذلك سأريك كيف تطبّق هذه التقنيّة على حلقة التكرار القياسية. أخيرًا سأريك كيف تقوم بتعديل نموذج صفحة الأرشيف القياسية واستخدام دالّة pre_get_posts لتغيير حلقة التكرار القياسية.
</p>

<h4 id="ما-الذي-ستحتاجه">
	ما الذي ستحتاجه:
</h4>

<p>
	لكي تتمكن من المتابعة طيلة هذا المقال ستكون بحاجة إلى:
</p>

<ul>
<li>
		سكريبت ووردبريس مخصص للتطوير (إيّاك ان تقوم بالتجريب على موقعك مباشرة ما لم تتأكد من أن الكود الذي قمت بكتابته يعمل بشكل جيد).
	</li>
	<li>
		محرر أكواد.
	</li>
</ul>
<h3 id="لنبدأ-إنشاء-الاستعلام">
	لنبدأ: إنشاء الاستعلام
</h3>

<p>
	موقعي الشخصي يحتوي على نموذج خاص من أجل صفحة “كتب”. هذه الصفحة تقوم بعرض المحتوى الذي قمت بإضافته إلى صفحة “كتب” ثم تقوم بتشغيل حلقة التكرار لإخراج جميع كتبي. كل هذا يتم عن طريق استخدام "إضافة مقال خاص". حلقة التكرار الخاصة بك قد تكون مختلفة جدًّا فأنت ربما قد ترغب بتطبيق التالي على مقالات عادية، أو على نموذج صفحة أرشيف، أو حتّى على مقالات مخصصة أو أي شيء قد تريد العمل عليه. إذًا أنت لست مجبرًا على العمل فقط على نموذج صفحة لاستخدام هذه التقنية. يجب عليك فقط التركيز على الطريقة التي تعمل بها حلقة التكرار ثم بعد ذلك يمكنك تطبيق هذه التقنية على موقعك. هذه صورة من صفحتي بحلقة تكرار واحدة تقوم بعرض كل كتبي في شبكة 2*2
</p>

<p style="text-align: center;">
	<img alt="1 (1).png" class="ipsImage ipsImage_thumbnailed" data-fileid="26020" data-unique="25o7q6pq7" src="https://academy.hsoub.com/uploads/monthly_2017_12/5a3a02ae95d6f_1(1).png.94baf4c636cb4a2a9403b93893914c70.png"></p>

<p>
	لقد استخدمت بعضًا من البرمجة الكائنية CSS الموجودة بقالبي لإنشاء شبكة 2*2 لعرض جميع كتبي. داخل الحلقة يوجد : العنوان، المقتطفات والصورة البارزة.<br>
	إليكم الكود الذي استخدمه
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_328_7" style="">
<span class="pun">&lt;?</span><span class="pln">php
$args </span><span class="pun">=</span><span class="pln"> array</span><span class="pun">(</span><span class="pln">
    </span><span class="str">'post_type'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'rmcc_blurb'</span><span class="pun">,</span><span class="pln">
</span><span class="pun">);</span><span class="pln">
$query </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> WP_query </span><span class="pun">(</span><span class="pln"> $args </span><span class="pun">);</span><span class="pln">
</span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> $query</span><span class="pun">-&gt;</span><span class="pln">have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">

    </span><span class="tag">&lt;section</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"books list full-width"</span><span class="tag">&gt;</span><span class="pln">

        </span><span class="pun">&lt;?</span><span class="pln">php </span><span class="kwd">while</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> $query</span><span class="pun">-&gt;</span><span class="pln">have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> $query</span><span class="pun">-&gt;</span><span class="pln">the_post</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">

        &lt;article id="post-</span><span class="pun">&lt;?</span><span class="pln">php the_ID</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">" </span><span class="pun">&lt;?</span><span class="pln">php post_class</span><span class="pun">(</span><span class="pln"> array</span><span class="pun">(</span><span class="pln"> </span><span class="str">'book'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'left'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'half'</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">&gt;

            </span><span class="tag">&lt;h3&gt;</span><span class="pln">&lt;a href="</span><span class="pun">&lt;?</span><span class="pln">php the_permalink</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">"&gt;</span><span class="pun">&lt;?</span><span class="pln">php the_title</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="tag">&lt;/a&gt;&lt;/h3&gt;</span><span class="pln">

            </span><span class="pun">&lt;?</span><span class="pln">php </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> has_post_thumbnail</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">

                &lt;a href="</span><span class="pun">&lt;?</span><span class="pln">php the_permalink</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">"&gt;

                    </span><span class="pun">&lt;?</span><span class="pln">php the_post_thumbnail</span><span class="pun">(</span><span class="pln"> </span><span class="str">'medium'</span><span class="pun">,</span><span class="pln"> array</span><span class="pun">(</span><span class="pln">
                        </span><span class="str">'class'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'left'</span><span class="pun">,</span><span class="pln">
                        </span><span class="str">'alt'</span><span class="pln">   </span><span class="pun">=&gt;</span><span class="pln"> get_the_title</span><span class="pun">()</span><span class="pln">
                        </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
                    </span><span class="pun">?&gt;</span><span class="pln">

                </span><span class="tag">&lt;/a&gt;</span><span class="pln">

            </span><span class="pun">&lt;?</span><span class="pln">php </span><span class="pun">}?&gt;</span><span class="pln">


            </span><span class="pun">&lt;?</span><span class="pln">php the_excerpt</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">

            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">&lt;a href="</span><span class="pun">&lt;?</span><span class="pln">php the_permalink</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">"&gt;Explore the Book</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span><span class="pln">

        </span><span class="tag">&lt;/article&gt;</span><span class="pln">

        </span><span class="pun">&lt;?</span><span class="pln">php endwhile</span><span class="pun">;</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">

        </span><span class="pun">&lt;?</span><span class="pln">php wp_reset_postdata</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">

    </span><span class="tag">&lt;/section&gt;</span><span class="pln">

</span><span class="pun">&lt;?</span><span class="pln">php </span><span class="pun">}</span><span class="pln"> </span><span class="pun">?&gt;</span></pre>

<p>
	يمكنك ملاحظة حلقة التكرار خاصتي تحتوي على معامل واحد ألا وهو نوع المقال <code>post type</code>. إذًا فإن ما ستعرضه هذه الحلقة هو فقط المقالات من النوع المدخل. كما سيتم عرض المقالات حسب الأحدث. لكن ما نريد القيام به هو عرض المقال الأول بطريقة مختلفة، للقيام بذلك يلزمنا:
</p>

<h3 id="القيام-بإنشاء-حلقة-تكرار-خاصة-بأول-مقال">
	القيام بإنشاء حلقة تكرار خاصة بأول مقال
</h3>

<p>
	لعرض أوّل مقال بطريقة مختلفة سنحتاج لإنشاء حلقة تكرار منفردة تقوم بعرض ذلك المقال فقط. للقيام بذلك سنحتاج الى معاملين، واحد لنوع المقال والاخر لعدد المقالات الذي سيكون <code>posts_per_page</code> حيث سيتم جعل قيمته 1. ابدأ بعمل نسخة ثانية من حلقة التكرار لديك بحيث يكون لديك حلقتا تكرار داخل ملف نموذجك، كلا الحلقتين تستخدمان<br>
	WP_Query. الان عدّل المعاملات للحلقة الأولى بحيث يصبح الكود لديك كما يلي:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_328_7" style="">
<code class="hljs php"><span class="hljs-variable"><span class="pln">$args</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
    </span><span class="hljs-string"><span class="str">'post_type'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'rmcc_blurb'</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">'posts_per_page'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">1</span></span><span class="pln">
</span><span class="pun">);</span></code></pre>

<p>
	هذه الحلقة ستقوم بعرض فقط أحدث مقال، لا يوجد داعٍ للقيام بهذا إن لم تكن تريد تغيير شيء في طريقة عرض أول مقال. في حالتي هذه أريد عرض المقتطفات والمحتوى. كما أريد أيضًا إضافة بعض التنسيقات للنسق كي أجعل الصورة البارزة والمقتطفات يظهران المحتوى.<br>
	إليكم النسخة الجديدة من الكود للحلقة التي ستعرض المقال الأول فقط:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_328_7" style="">
<code class="hljs xml"><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">article</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">id</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">"post-</span><span class="pun">&lt;?</span><span class="pln">php the_ID</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">"</span></span><span class="pln"> </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> post_class</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'book'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">&gt;</span></span><span class="pln">

    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"left one-third"</span></span><span class="tag">&gt;</span></span><span class="pln">

        </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> has_post_thumbnail</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

            </span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">href</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">"</span><span class="pun">&lt;?</span><span class="pln">php the_permalink</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">"</span></span><span class="pln">&gt;</span></span><span class="pln">

                </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_post_thumbnail</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'medium'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
                    </span><span class="hljs-string"><span class="str">'class'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'left'</span></span><span class="pun">,</span><span class="pln">
                    </span><span class="hljs-string"><span class="str">'alt'</span></span><span class="pln">   </span><span class="pun">=&gt;</span><span class="pln"> get_the_title</span><span class="pun">()</span><span class="pln">
                    </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
                </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

            </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="pln">

        </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="pun">}</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

    </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">

    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"right two-thirds book-excerpt"</span></span><span class="tag">&gt;</span></span><span class="pln">

        </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h3</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">href</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">"</span><span class="pun">&lt;?</span><span class="pln">php the_permalink</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">"</span></span><span class="pln">&gt;</span></span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_title</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h3</span></span><span class="tag">&gt;</span></span><span class="pln">

        </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_excerpt</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

    </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">

    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"clear"</span></span><span class="tag">&gt;</span></span><span class="pln">
        </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_content</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
    </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">

</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">article</span></span><span class="tag">&gt;</span></span></code></pre>

<p>
	ستلاحظ أن هناك كودًا إضافيًّا للمحتوى، وأنّني قد أضفت أيضًا عنصر <code>div</code> لتنسيق النسق، طبعًا أذكّرك أنّني استخدم ملف التنسيق الموجود مسبقًا في قالبي. إليك كيف يظهر أول مقال في صفحتي الآن:
</p>

<p style="text-align: center;">
	<img alt="2 (2).png" class="ipsImage ipsImage_thumbnailed" data-fileid="26021" data-unique="edtfipsth" src="https://academy.hsoub.com/uploads/monthly_2017_12/5a3a02af782f5_2(2).png.6d2cc6770c51936d6dd407ea8ee61c62.png"></p>

<p>
	كل شيء يبدو جيدًّا. لابدّ أنّك قد انتبهت أنّني قد قمت بنزع الزر الذي يأخذك لصفحة قراءة الكتاب، السبب في ذلك يعود إلى كون محتوى المقال ظاهر الآن ولكنّني قمت بتعويض ذلك إلى زر لشراء الكتاب الذي أخذناه من محتوى المقال.
</p>

<h3 id="تعديل-حلقة-التكرار-للمقالات-اللاحقة">
	تعديل حلقة التكرار للمقالات اللاحقة:
</h3>

<p>
	لكن هناك مشكلة. إليك صورة من أول مقال والمقالات التّي تليه:
</p>

<p style="text-align: center;">
	<img alt="3.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26022" data-unique="ad79b0rv0" src="https://academy.hsoub.com/uploads/monthly_2017_12/3.png.5ba586e066709ee1fd22de49d1b12371.png"></p>

<p>
	حاليًا أوّل مقال يتم تكراره مرّتين، يتم عرضه في الحلقة التي كانت موجودة في البداية كما يتم عرضه في الحلقة الجديدة التي قمنا بإنشائها. لإصلاح هذا المشكل سيتوجّب عليّ إضافة معامل جديد <code>offset</code> لحلقة التكرار الثانية. هذا المعامل يطلب من ووردبريس تجاهل عدد محدد من المواضيع لعدم عرضها. في حالتي هذه قمت بعرض أوّل مقال بطريقة مختلفة في حلقة التكرار الأولى، لذا سأقوم بتجاهل أول مقال في الحلقة الثانية. <strong>ملاحظة:</strong> عند استخدامك لهذه التقنية يجب أن تتساوى القيمة المحددة لمعامل <code>posts_per_page</code> في أوّل حلقة مع القيمة المحدّدة لمعامل <code>offset</code> في الحلقة الثانية. في الحلقة التكرارية الثانية سأقوم بتعديل الكود ليصبح بالشكل التالي:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_328_7" style="">
<code class="hljs php"><span class="hljs-variable"><span class="pln">$args</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
    </span><span class="hljs-string"><span class="str">'post_type'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'rmcc_blurb'</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">'offset'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">1</span></span><span class="pln">
</span><span class="pun">);</span></code></pre>

<p>
	الآن عندما أقوم بتحديث الصفحة ستجد أنّ أوّل مقالٍ لم يعد يعرض مرّتين.
</p>

<p style="text-align: center;">
	<img alt="4.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26023" data-unique="f0viptgpf" src="https://academy.hsoub.com/uploads/monthly_2017_12/4.png.55808c575a20f313ff4403af59e869dd.png"></p>

<p>
	ذلك جيّد! الآن وقد أكملت هذا الجزء، أكون قد أنشأت صفحة خاصة تحتوي على حلقتي تكرار إحداهما تقوم بعرض محتوى إضافي لأول مقال.
</p>

<h3 id="تطبيق-هذه-التقنية-على-حلقة-التكرار-القياسية">
	تطبيق هذه التقنية على حلقة التكرار القياسية
</h3>

<p>
	لكن ماذا لو كانت صفحتك تعمل باستخدام حلقة تكرار قياسية؟ إن كانت هذه هي حالتك، يمكنك تعديل ملف النموذج الذي تعمل عليه تلك الصفحة فقط بإضافة استعلام إضافي باستخدام WP_Query. لن تكون بحاجة لكتابة استعلامين جديدين.<br>
	هناك خطوتان لهذه التقنية:
</p>

<ol>
<li>
		إضافة استعلام إضافي لملف نموذجك باستخدام WP_Query.
	</li>
	<li>
		في ملف الدوال الخاص بقالبك (<code>functions.php) </code>استخدم pre_get_posts لتعديل حلقة التكرار القياسية لهذا النوع من الملفات لكي تقوم بتجاوز المقال الأول.
	</li>
</ol>
<h3 id="إضافة-الاستعلام-الإضافي">
	إضافة الاستعلام الإضافي
</h3>

<p>
	بداية قم بفتح ملف النموذج الذي ترغب بتعديله. يمكنه أن يكون أي نموذج أرشيف تريده. في حالتنا هذه إن كنت أستخدم النموذج القياسي لعرض المقالات المخصصة من نوع كتب، فإن الملف سيكون اسمه <code>archive-rmcc_book.php</code>. قبل حلقة التكرار الرئيسية أضف الحلقة الإضافية باستخدام WP_Query. ستقوم بهذا بطريقة مشابهة لما قمنا به سابقا عن طريق نسخ وتعديل محتوى الحلقة الرئيسية، ولكن بوضعها داخل استعلام منشئ بواسطة WP_Query. لا تنسى أنه سيتوجب عليك إضافة معامل <code>post_type</code> مع إعطائه قيمة نوع المقالات التي تريدها، حتى ولو كنت تستخدم نموذج لعرض هذا النوع من المقالات فقط. قم بحفظ ملفك وستلاحظ أنّ المقال الأول سيعرض مكرّرًا مثلما حدث معنا في المثال الذي عملنا عليه.
</p>

<h3 id="تجاوز-المقال-الأول-في-الاستعلام-الرئيسي">
	تجاوز المقال الأول في الاستعلام الرئيسي:
</h3>

<p>
	لا يمكنك التعديل مباشرة على معاملات الإستعلام الرئيسي في ملف الأرشيف. عوضًا عن ذلك سيتوجب عليك استخدام معلق “<code>hook</code> ” للقيام بهذا التعديل. افتح ملف <code>functions.php</code> (في حالة كان قالبك لا يحتوي على ذلك الملف فقم بإنشائه) ثم أضف الكود التالي:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_328_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$args</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
    </span><span class="hljs-string"><span class="str">'post_type'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'rmcc_blurb'</span></span><span class="pun">,</span><span class="pln">
    </span><span class="hljs-string"><span class="str">'posts_per_page'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">1</span></span><span class="pln">
</span><span class="pun">);</span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$query</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">new</span></span><span class="pln"> WP_query </span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$args</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$query</span></span><span class="pun">-&gt;</span><span class="pln">have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

    </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">section</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"books first wide-box"</span></span><span class="tag">&gt;</span></span><span class="pln">

        </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">while</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$query</span></span><span class="pun">-&gt;</span><span class="pln">have_posts</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$query</span></span><span class="pun">-&gt;</span><span class="pln">the_post</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

        </span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">article</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">id</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">"post-</span><span class="pun">&lt;?</span><span class="pln">php the_ID</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">"</span></span><span class="pln"> </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> post_class</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'book'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">&gt;</span></span><span class="pln">

            </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"left one-third"</span></span><span class="tag">&gt;</span></span><span class="pln">

                </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> has_post_thumbnail</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

                    </span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">href</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">"</span><span class="pun">&lt;?</span><span class="pln">php the_permalink</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">"</span></span><span class="pln">&gt;</span></span><span class="pln">

                        </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_post_thumbnail</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'medium'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
                            </span><span class="hljs-string"><span class="str">'class'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'left'</span></span><span class="pun">,</span><span class="pln">
                            </span><span class="hljs-string"><span class="str">'alt'</span></span><span class="pln">   </span><span class="pun">=&gt;</span><span class="pln"> get_the_title</span><span class="pun">()</span><span class="pln">
                            </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
                        </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

                    </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="pln">

                </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="pun">}</span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

            </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">

            </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"right two-thirds book-excerpt"</span></span><span class="tag">&gt;</span></span><span class="pln">

                </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h3</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="pln">&lt;</span><span class="hljs-title"><span class="pln">a</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="pln">href</span></span><span class="pln">=</span><span class="hljs-value"><span class="pln">"</span><span class="pun">&lt;?</span><span class="pln">php the_permalink</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">"</span></span><span class="pln">&gt;</span></span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_title</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">a</span></span><span class="tag">&gt;</span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h3</span></span><span class="tag">&gt;</span></span><span class="pln">

                </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_excerpt</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

            </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">

            </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">"clear"</span></span><span class="tag">&gt;</span></span><span class="pln">
                </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> the_content</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">
            </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">

        </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">article</span></span><span class="tag">&gt;</span></span><span class="pln">

        </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">endwhile</span></span><span class="pun">;</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

        </span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> wp_reset_postdata</span><span class="pun">();</span><span class="pln"> </span><span class="hljs-preprocessor"><span class="pun">?&gt;</span></span></span><span class="pln">

    </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">section</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">?</span></span></code></pre>

<p>
	ستلاحظ أن هناك ثلاثة وسوم شروط مستخدمة. واحد للتحقق أننا لسنا في شاشة المدير، الآخر للتحقق أن الاستعلام الرئيسي يعمل، أمّا الأخير فللتحقّق أنّنا في صفحة الأرشيف الخاصة بالمقالات المخصصة التي نريد التعديل عليها. وسمِّ الشرط الذي ستحتاجه من أجل مقالاتك الخاصة (أو تصنيفات أو أي شيء تريد العمل عليه) يمكنك أن تجده في دليل الووردبريس للمطوّرين <a href="https://codex.wordpress.org/Conditional_Tags" rel="external nofollow">WordPress Codex</a>. قم بحفظ ملف الدّوال خاصتك وستلاحظ أنّ مقالتك الأولى تعرض باستخدام حلقة التكرار التي أضفتها أما باقي المقالات اللاحقة فتعرض باستخدام حلقة التكرار الرئيسية.
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		اقتباس
	</div>

	<div class="ipsQuote_contents ipsClearfix">
		<p>
			<strong>ملاحظة:</strong> إن استخدام هذه الطريقة أحيانًا قد يقوم بخلق مشاكل في ترقيم الصفحات.
		</p>
	</div>
</blockquote>

<h3>
	WP_Query تسمح لك بلفت الانتباه الى أحدث مقالاتك
</h3>

<p>
	باستخدام هذه التقنية، يمكنك استعمال كلاس WP_Query لعرض محتوًى إضافي لأحدث مقالاتك، أو تنسيقها بطريقة مختلفة. كما رأيت في مثالنا الذي عملنا عليه، لقد استخدمنا هذه التقنية لجعل كتابي الأخير يظهر بطريقة بارزة مقارنة بباقي الكتب. يمكنك تطبيق هذه التقنية على حلقة تكرار خاصة قمت بإنشائها باستخدام كلاس WP_Query على حلقة تكرار قياسية في ملفات نماذج قالبك (مهما كان القالب الذي تستخدمه). بمجرد القيّام بهذا فإنّ آخر مقال لك سيكون ظاهرًا ويلفت انتباه قرّائك لقراءته.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://premium.wpmudev.org/blog/two-versions-wordpress-loop/" rel="external nofollow">How to Use the WordPress Loop to Style Your First Post Differently</a> لصاحبه Rachel McCollin
</p>
]]></description><guid isPermaLink="false">578</guid><pubDate>Sun, 24 Dec 2017 08:01:00 +0000</pubDate></item><item><title>&#x643;&#x64A;&#x641; &#x62A;&#x62E;&#x635;&#x635; &#x635;&#x641;&#x62D;&#x629; &#x62A;&#x633;&#x62C;&#x64A;&#x644; &#x627;&#x644;&#x62F;&#x62E;&#x648;&#x644; &#x644;&#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633; &#x628;&#x633;&#x647;&#x648;&#x644;&#x629;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D9%83%D9%8A%D9%81-%D8%AA%D8%AE%D8%B5%D8%B5-%D8%B5%D9%81%D8%AD%D8%A9-%D8%AA%D8%B3%D8%AC%D9%8A%D9%84-%D8%A7%D9%84%D8%AF%D8%AE%D9%88%D9%84-%D9%84%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D8%A8%D8%B3%D9%87%D9%88%D9%84%D8%A9-r577/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2017_12/22-2.png.7e4a048fbba10bf7ff40f4fa83eb67a8.png" /></p>

<p>
	طيلة سنواتٍ، شهِد ووردبريس عدَّة تطويرات إلّا أنّ تصميم صفحة تسجيلِ الدُّخول بقي على حالهِا. صحيحٌ أنّها ذات تصميمٍ بسيطٍ ونظيف وتتوافق مع مقاسات شاشاتٍ مختلفةٍ ولكن عند إنشاء قالبٍ لعميلٍ ما خاصّةً إذا كان هذا العميل عبارةً عن شرِكة فسيكون من الأفضل أن تستطيع تغيير ألوان التصميم في صفحة الدُّخول إضافة إلى تغيير الشِّعارِ أيضًا ليتوافقَ مع قالبِ الموقِع، أليسَ كذلك؟<br>
	شيءٌ جيِّدٌ أنّ هذا الأمر يُمكن القيّام به بسهولةٍ. أفضل ما في ووردبريس هو إمكانيِّةُ تخصيص أيِّ شيءٍ به فقط باستخدام دوالِّ الـ PHP.<br>
	في درسِنا اليوم، سأقوم بتعليمك كيفِيّة تخصيصِ صفحة تسجيل الدّخول في ووردبريس على حسب ذوقك واحتياجاتك. في البداية سنقوم بتغيير الشِّعار ثُمّ بعد ذلك نغيِّر ألوانَ التصميم إضافةً إلى بعضِ العناصر الأخرى.<br>
	فلنبدأ.
</p>

<h3 id="الأشياء-التي-ستحتاجها-خلال-هذا-الدرس">
	الأشياء التي ستحتاجها خلال هذا الدّرسِ
</h3>

<ul>
<li>
		تنصيب ووردبريس مع القالب الافتراضي twenty-fourteen.
	</li>
	<li>
		الوقت والصبر.
	</li>
</ul>
<h3 id="صفحة-تسجيل-الدخول-الافتراضية-لووردبريس">
	صفحة تسجيل الدُّخول الافتراضية لووردبريس:
</h3>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileid="26007" href="https://academy.hsoub.com/uploads/monthly_2017_12/default-login.png.e1a64d9e72639bee25806e83d8f4d3fb.png" rel=""><img alt="default-login.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26007" data-unique="jr8sfpd5l" src="https://academy.hsoub.com/uploads/monthly_2017_12/default-login.thumb.png.1b8f6e071ec438f64a9524b903f03cf9.png"></a>
</p>

<h3 id="ما-سنقوم-بإنشائه">
	ما سنقوم بإنشائه:
</h3>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileid="26008" href="https://academy.hsoub.com/uploads/monthly_2017_12/final-storm.png.62fd91f707b4cf19028ba16d26e090e0.png" rel=""><img alt="final-storm.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26008" data-unique="jdpiv5n2k" src="https://academy.hsoub.com/uploads/monthly_2017_12/final-storm.thumb.png.3443108d339f4f35b47a500724b63dec.png"></a>
</p>

<h2 id="تغيير-الشعار">
	تغيير الشِّعار:
</h2>

<p>
	يَستخدم ووردبريس CSS لعرض صورةٍ في الخلفيّة. في العادة يتِّم تضمينها بين وسمِ <strong>h1</strong> وَوسمِ <strong>a</strong>. لكنّنا في هذا الدّرسِ سنستخدِم ملفَّ <strong>functions.php</strong> الموجود داخل قالب ووردبريس twenty-fourteen الافتراضي.
</p>

<p style="text-align: center;">
	<img alt="functions.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26009" data-unique="27kcag6jc" src="https://academy.hsoub.com/uploads/monthly_2017_12/functions.png.258c3059f3af2b847e56ff1968dacfe7.png"></p>

<p>
	أوّلًا، قُم بوضع شعارك الذي تريد إضافتهُ (يجب أن يكون بصيغة png ) بداخلِ مجلّد images الخاصِّ بقالب twenty-fourteen (في هذا الدَّرسِ سأستخدِمُ شعار <strong>custom-login-logo.png</strong>). يرجى الانتباه إلى أنَّ أبعاد الشِّعار يجب أن تكون 80*80 بِكسل. غير ذلك سيتوجّب عليك تعديل الأبعاد داخل ملفِّ CSS خاص.
</p>

<p style="text-align: center;">
	<img alt="place-images.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26010" data-unique="de3k93ikf" src="https://academy.hsoub.com/uploads/monthly_2017_12/place-images.png.be7c74fdde00355841555d65273548f3.png"></p>

<p>
	بعد ذلِك، افتح ملف <strong>functions.php</strong> الخاصِّ بقالب twenty-fourteen سنستخدِمُ مُعلِّق <strong>login_enqueue_scripts</strong> لتضمينِ CSS في رأس صفحة تسجيل الدُّخول لتحميل شعارنا الذي نريد إضافتهُ. انسخ الكود التّالي تحت آخر سطرٍ في ملفِّ <strong>functions.php</strong> ثمَّ بعد ذلك ضع اسم ملفِّ شعارِك داخل المسار.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5487_7" style="">
<span class="pun">&lt;?</span><span class="pln">php 
</span><span class="kwd">function</span><span class="pln"> login_logo</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">
    </span><span class="tag">&lt;style</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="tag">&gt;</span><span class="pln">
        body</span><span class="pun">.</span><span class="pln">login div</span><span class="com">#login h1 a {</span><span class="pln">
            background</span><span class="pun">-</span><span class="pln">image</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(&lt;?</span><span class="pln">php echo get_stylesheet_directory_uri</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="str">/images/</span><span class="pln">custom</span><span class="pun">-</span><span class="pln">login</span><span class="pun">-</span><span class="pln">logo</span><span class="pun">.</span><span class="pln">png</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="tag">&lt;/style&gt;</span><span class="pln">
</span><span class="pun">&lt;?</span><span class="pln">php </span><span class="pun">}</span><span class="pln">
add_action</span><span class="pun">(</span><span class="pln"> </span><span class="str">'login_enqueue_scripts'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'login_logo'</span><span class="pln"> </span><span class="pun">);</span></pre>

<h2 id="تغيير-رابط-الشعار">
	تغيير رابطِ الشِّعار:
</h2>

<p>
	في الوضع الافتراضي، الشِّعار يقود إلى موقع <a href="https://wordpress.org/" rel="external nofollow">ووردبريس</a> . يُمكنك تغيير هذا الرّابط لِجعله يقود إلى موقِعك. للقيامِ بهذا استخدم المُعلِّقَ التَّالي، فقط قم بنسخهِ ولصقهِ في ملفِّ <strong>functions.php</strong> مباشرةً تحت مُعلِّقِ شعار الدُّخول.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5487_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln"> 
</span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">login_logo_url</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pln"> get_bloginfo</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'url'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
add_filter</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'login_headerurl'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'login_logo_url'</span></span><span class="pln"> </span><span class="pun">);</span></span></code></pre>

<h2 id="تغيير-تصميم-صفحة-تسجيل-الدخول">
	تغيير تصميم صفحة تسجيل الدُّخول:
</h2>

<p>
	لتخصيص تنسيق صفحة تسجيل الدُّخول الافتراضيّة لووردبريس سنكون بحاجةٍ لإضافةِ تنسيقات لهذه الصّفحة. للقيام بهذا سنحتاج لاستخدام مُعَلِّقٍ لملفّات CSS خاصّتنا.<br>
	بهذا سنطلُب من ووردبريس تَجاهلِ ملفِّ تنسيق صفحة تسجيل الدُّخولِ الافتراضي واستخدامِ مَلفِّنا.
</p>

<p style="text-align: center;">
	<img alt="css-file.png" class="ipsImage ipsImage_thumbnailed" data-fileid="26006" data-unique="nr6txoq37" src="https://academy.hsoub.com/uploads/monthly_2017_12/css-file.png.0059cf4176a0baae533c5a4948f64ebd.png"></p>

<p>
	بدايةً، سنحتاجُ لإنشاء ملفِّ تنسيقات داخل مجلّد CSS الخاصِّ بقالب twenty-fourteen (في هذا الدّرس، قمت بِتسميّة ملّفي <strong>custom-login-styles.css</strong>) ثمَّ بعد ذلك أضِف المُعلِّق التالي في ملفِّ .<strong>functions.php</strong>
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5487_7" style="">
<code class="hljs lasso"><span class="hljs-subst"><span class="pun">&lt;?</span></span><span class="pln">php 
</span><span class="kwd">function</span><span class="pln"> login_custom_stylesheet</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="hljs-subst"><span class="pun">?&amp;</span></span><span class="hljs-literal"><span class="pln">gt</span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-subst"><span class="pun">&amp;</span></span><span class="hljs-literal"><span class="pln">lt</span></span><span class="pun">;</span><span class="hljs-keyword"><span class="pln">link</span></span><span class="pln"> rel</span><span class="hljs-subst"><span class="pun">=</span></span><span class="hljs-string"><span class="str">"stylesheet"</span></span><span class="pln"> id</span><span class="hljs-subst"><span class="pun">=</span></span><span class="hljs-string"><span class="str">"custom_wp_admin_css"</span></span><span class="pln">  href</span><span class="hljs-subst"><span class="pun">=</span></span><span class="hljs-string"><span class="str">"&amp;lt;?php echo get_bloginfo( 'stylesheet_directory' ) . '/css/custom-login-styles.css'; ?&amp;gt;"</span></span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">type</span></span><span class="hljs-subst"><span class="pun">=</span></span><span class="hljs-string"><span class="str">"text/css"</span></span><span class="pln"> media</span><span class="hljs-subst"><span class="pun">=</span></span><span class="hljs-string"><span class="str">"all"</span></span><span class="pln"> </span><span class="hljs-subst"><span class="pun">/</span></span><span class="hljs-subst"><span class="pun">&amp;</span></span><span class="hljs-literal"><span class="pln">gt</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-subst"><span class="pun">&amp;</span></span><span class="hljs-literal"><span class="pln">lt</span></span><span class="pun">;</span><span class="hljs-subst"><span class="pun">?</span></span><span class="pln">php </span><span class="pun">}</span><span class="pln">
add_action</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'login_enqueue_scripts'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'login_custom_stylesheet'</span></span><span class="pln"> </span><span class="pun">);</span></code></pre>

<p>
	بعد ذلك قم بفتح ملفِّ التنسيقات الذي قمنا بإنشائه تحت اسم <strong>custom-login-styles.css</strong>. أوّلًا سنقوم بتغيير لون الخلفيّة ونوع الخطِّ المستخدمِ في صفحة تسجيل الدُّخول. قُم بنسخ الكود التّالي:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5487_7" style="">
<code class="hljs css"><span class="hljs-tag"><span class="pln">body</span></span><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-rules"><span class="pun">{</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-hexcolor"><span class="com">#3d3d3d</span></span></span></span><span class="com">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">font</span><span class="pun">-</span><span class="pln">family</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="typ">Helvetica</span></span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-rule"><span class="pun">}</span></span></span></code></pre>

<p>
	الآن وبعد تغييرنا لِلون الخلفيِّة ونوعِ الخطّ، دعنا نعطي لونًا رماديًّا جميلًا لِنموذج استمارة تسجيلِ الدُّخول.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5487_7" style="">
<code class="hljs css"><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">form</span></span><span class="pln"> </span><span class="hljs-rules"><span class="pun">{</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">background</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-hexcolor"><span class="com">#f3f3f3</span></span></span></span><span class="com">;</span><span class="pln">
</span><span class="hljs-rule"><span class="pun">}</span></span></span></code></pre>

<p>
	بعد ذلك فلنخصِّص حُقول المُدخلات لِنموذج الاستمارة في كلِّ الحالاتِ المُمكِنة (normal, hover, focus).
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5487_7" style="">
<code class="hljs css"><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">form</span></span><span class="pln"> </span><span class="hljs-class"><span class="pun">.</span><span class="pln">input</span></span><span class="pun">,</span><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">input</span></span><span class="hljs-attr_selector"><span class="pun">[</span><span class="pln">type</span><span class="pun">=</span><span class="pln">text</span><span class="pun">]</span></span><span class="pun">,</span><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">form</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">input</span></span><span class="hljs-attr_selector"><span class="pun">[</span><span class="pln">type</span><span class="pun">=</span><span class="pln">checkbox</span><span class="pun">]</span></span><span class="pln"> </span><span class="hljs-rules"><span class="pun">{</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">background</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-hexcolor"><span class="com">#fff</span></span></span></span><span class="com">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">border</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-number"><span class="lit">1</span></span><span class="lit">px</span><span class="pln"> solid </span><span class="hljs-hexcolor"><span class="com">#b7b7b7</span></span></span></span><span class="com">;</span><span class="pln">
                </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">padding</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-number"><span class="lit">5</span></span><span class="lit">px</span></span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-rule"><span class="pun">}</span></span></span><span class="pln">
</span><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">form</span></span><span class="pln"> </span><span class="hljs-class"><span class="pun">.</span><span class="pln">input</span></span><span class="hljs-pseudo"><span class="pun">:</span><span class="pln">hover</span></span><span class="pun">,</span><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">form</span></span><span class="pln"> </span><span class="hljs-class"><span class="pun">.</span><span class="pln">input</span></span><span class="hljs-pseudo"><span class="pun">:</span><span class="pln">focus</span></span><span class="pun">,</span><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">input</span></span><span class="hljs-attr_selector"><span class="pun">[</span><span class="pln">type</span><span class="pun">=</span><span class="pln">text</span><span class="pun">]</span></span><span class="hljs-pseudo"><span class="pun">:</span><span class="pln">hover</span></span><span class="pun">,</span><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">input</span></span><span class="hljs-attr_selector"><span class="pun">[</span><span class="pln">type</span><span class="pun">=</span><span class="pln">text</span><span class="pun">]</span></span><span class="hljs-pseudo"><span class="pun">:</span><span class="pln">focus</span></span><span class="pun">,</span><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">form</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">input</span></span><span class="hljs-attr_selector"><span class="pun">[</span><span class="pln">type</span><span class="pun">=</span><span class="pln">checkbox</span><span class="pun">]</span></span><span class="hljs-pseudo"><span class="pun">:</span><span class="pln">hover</span></span><span class="pun">,</span><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">form</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">input</span></span><span class="hljs-attr_selector"><span class="pun">[</span><span class="pln">type</span><span class="pun">=</span><span class="pln">checkbox</span><span class="pun">]</span></span><span class="hljs-pseudo"><span class="pun">:</span><span class="pln">focus</span></span><span class="pln"> </span><span class="hljs-rules"><span class="pun">{</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">background</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-hexcolor"><span class="com">#fff</span></span></span></span><span class="com">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">outline</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> none</span></span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-rule"><span class="pun">}</span></span></span></code></pre>

<p>
	الآن، سأقوم بتغيير لون خلفيِّة زرِّ تسجيل الدُّخول مع إعطائه بعض التبطين على كلٍّ من الجِهتين اليُمنى واليُسرى. سأقوم أيضًا بجعل حجم الخطِّ 13 بكسل، لِجعله يبدو زرًّا مسطَّحًا.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5487_7" style="">
<code class="hljs css"><span class="hljs-tag"><span class="pln">body</span></span><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">div</span></span><span class="hljs-id"><span class="com">#login</span></span><span class="com"> </span><span class="hljs-tag"><span class="com">form</span></span><span class="hljs-id"><span class="com">#loginform</span></span><span class="com"> </span><span class="hljs-tag"><span class="com">p</span></span><span class="hljs-class"><span class="com">.submit</span></span><span class="com"> </span><span class="hljs-tag"><span class="com">input</span></span><span class="hljs-id"><span class="com">#wp-submit</span></span><span class="com"> </span><span class="hljs-rules"><span class="com">{</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-number"><span class="lit">0</span></span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">background</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-hexcolor"><span class="com">#ffab00</span></span></span></span><span class="com">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">outline</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> none</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">border</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> none</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">padding</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-number"><span class="lit">0</span></span><span class="pln"> </span><span class="hljs-number"><span class="lit">25</span></span><span class="lit">px</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> center</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">font</span><span class="pun">-</span><span class="pln">size</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-number"><span class="lit">13</span></span><span class="lit">px</span></span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-rule"><span class="pun">}</span></span></span></code></pre>

<p>
	آخرًا، دعنا نقم بتغيير نصِّ رابطي (“نسيت كلمة السِّر” و “العودة للتسجيل”) لكلٍّ من حالتي normal و hover ثمّ بعد ذلِك سنقوم بجعلِهما في وسط الصّفحة.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5487_7" style="">
<code class="hljs css"><span class="hljs-tag"><span class="pln">body</span></span><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">div</span></span><span class="hljs-id"><span class="com">#login</span></span><span class="com"> </span><span class="hljs-tag"><span class="com">p</span></span><span class="hljs-id"><span class="com">#nav</span></span><span class="com"> </span><span class="hljs-rules"><span class="com">{</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">margin</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-number"><span class="lit">20</span></span><span class="lit">px</span><span class="pln"> </span><span class="kwd">auto</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> center</span></span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-rule"><span class="pun">}</span></span></span><span class="pln">

</span><span class="hljs-tag"><span class="pln">body</span></span><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-tag"><span class="pln">div</span></span><span class="hljs-id"><span class="com">#login</span></span><span class="com"> </span><span class="hljs-tag"><span class="com">p</span></span><span class="hljs-id"><span class="com">#backtoblog</span></span><span class="com"> </span><span class="hljs-rules"><span class="com">{</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">margin</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-number"><span class="lit">0</span></span><span class="pln"> </span><span class="kwd">auto</span></span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> center</span></span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-rule"><span class="pun">}</span></span></span><span class="pln">
</span><span class="hljs-class"><span class="pun">.</span><span class="pln">login</span></span><span class="pln"> </span><span class="hljs-id"><span class="com">#nav</span></span><span class="com"> </span><span class="hljs-tag"><span class="com">a</span></span><span class="hljs-pseudo"><span class="com">:hover</span></span><span class="com">,</span><span class="hljs-class"><span class="com">.login</span></span><span class="com"> </span><span class="hljs-id"><span class="com">#backtoblog</span></span><span class="com"> </span><span class="hljs-tag"><span class="com">a</span></span><span class="hljs-pseudo"><span class="com">:hover</span></span><span class="com"> </span><span class="hljs-rules"><span class="com">{</span><span class="pln">
    </span><span class="hljs-rule"><span class="hljs-attribute"><span class="pln">color</span></span><span class="pun">:</span><span class="hljs-value"><span class="pln"> </span><span class="hljs-hexcolor"><span class="com">#ffab00</span></span></span></span><span class="com">;</span><span class="pln">
</span><span class="hljs-rule"><span class="pun">}</span></span></span></code></pre>

<h3 id="في-الختام">
	في الخِتام:
</h3>

<p>
	هذا كلُّ شيء! أتمنّى أن تكون قد تعلَّمت من هذا الدَّرسِ طريقة تغيير التصميم العاديِّ لصفحةِ تسجيل الدُّخول الخاصّةِ بووردبريس إلى أيِّ تصميمٍ تريده. في حالةِ لم تكن مرتاحًا حيَال استخدامِ PHP يمكنك دائمًا استخدام إضافات ووردبريس مثل <a href="https://wordpress.org/plugins/branded-login-screen/" rel="external nofollow">Branded Login Screen</a> و <a href="https://wordpress.org/plugins/login-screen-manager/" rel="external nofollow">Login Screen Manager</a> .<br>
	هل تَعلمُ أيّة طُرقٍ أخرى للقيّامِ بنفسِ الشيء؟ سنكون سعداء بسماعها من عندك.<br>
	نتمنّى أن تكون قادرًا الآن على ملاحظة المُميِّزات الضخمة التي يُتيحها لك ووردبريس. طبعا نحنُ نعلم أنَّ ووردبريس قد لا يكون مناسبًا لجميع أنواعِ المشاريعِ ولكنّه سيكون مناسبًا لأغلبها. شاركنا رأيك.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://1stwebdesigner.com/how-to-easily-customize-the-wordpress-login-page/" rel="external nofollow">How to Easily Customize the WordPress Login Page</a>
</p>
]]></description><guid isPermaLink="false">577</guid><pubDate>Fri, 22 Dec 2017 12:03:00 +0000</pubDate></item><item><title>&#x645;&#x642;&#x62F;&#x645;&#x629; &#x641;&#x64A; &#x627;&#x644;&#x628;&#x631;&#x645;&#x62C;&#x629; &#x63A;&#x631;&#x636;&#x64A;&#x629; &#x627;&#x644;&#x62A;&#x648;&#x62C;&#x647; &#x644;&#x62A;&#x637;&#x648;&#x64A;&#x631; &#x625;&#x636;&#x627;&#x641;&#x627;&#x62A; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D9%85%D9%82%D8%AF%D9%85%D8%A9-%D9%81%D9%8A-%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D8%BA%D8%B1%D8%B6%D9%8A%D8%A9-%D8%A7%D9%84%D8%AA%D9%88%D8%AC%D9%87-%D9%84%D8%AA%D8%B7%D9%88%D9%8A%D8%B1-%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r572/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2017_12/11-2.png.ce98a5f48d384e52b62b2ec46a32e969.png" /></p>

<p>
	قد يبدو مفهوم البرمجة غرضية التوجه (object-oriented programming)، صعبًا ومعقدًا في البداية لكنه مفهوم مهم يجب تعلمه، إذا أردت زيادة مهاراتك وقدراتك في تطوير إضافات ووردبريس.سوف نشرح طريقتين مفيدتين تمكنك من جعل إضافاتك غرضية التوجه، الأمر الذي سيقلل من فرص تعقيد التعليمات البرمجية وتضاربها مع بعضها البعض، وتمكنك من كتابة تعليمات برمجية مرتبة وقوية وتشكل وحدات منفصلة.
</p>

<p>
	<strong>ملاحظة</strong>: هذه المقالة حول البرمجة غرضية التوجه، لم يتم التطرق فيها إلى طرق الكتابة المتقدمة للتعليمات البرمجية أو تم تبسيط بعضها لتصبح مفهومة بشكل أكبر للمبتدئين، الغرض من هذه المقالة تعليمك المبادئ الأساسية للبرمجة غرضية التوجه، وليس جعلك محترفًا في ليلة وضحاها، لكن إذا واصلت شغفك على التعلم والتجربة فستصبح محترفًا في وقت قصير.
</p>

<h2 id="ما-هي-البرمجة-غرضية-التوجه">
	ما هي البرمجة غرضية التوجه؟
</h2>

<p>
	البرمجة غرضية التوجه بأبسط مفهوم هي طبقة أخرى من التجريد(abstraction)، إذا كتبت تعليمات php عند عملك في ووردبريس من قبل ففي الغالب أنك مررت بمرحلة التجريد، بدلًا من كتابة أسطر من التعليمات البرمجية سطرًا تلو سطر، البرمجة الغرضية تستخدم بواني (constructs) كالدوال (functions). الدوال يمكن ان تجعل التعليمات البرمجية أكثر مركزية ووحدة. لنأخذ هذا المثال:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8082_7" style="">
<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'post'</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">'post-23'</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;h2&gt;</span><span class="pun">&lt;?</span><span class="pln">php the_title</span><span class="pun">()</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="tag">&lt;/h2&gt;</span><span class="pln">  
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'excerpt'</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="pun">&lt;?</span><span class="pln">php 
      $content </span><span class="pun">=</span><span class="pln"> get_the_content</span><span class="pun">();</span><span class="pln">
      </span><span class="kwd">if</span><span class="pun">(</span><span class="pln"> strlen</span><span class="pun">(</span><span class="pln">$content</span><span class="pun">)</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln"> </span><span class="lit">250</span><span class="pln">  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        echo $content</span><span class="pun">;</span><span class="pln">
      </span><span class="pun">}</span><span class="pln">
      </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        $content </span><span class="pun">=</span><span class="pln"> substr</span><span class="pun">(</span><span class="pln"> $content</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">250</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
        echo $content </span><span class="pun">.</span><span class="pln"> </span><span class="str">'...'</span><span class="pun">;</span><span class="pln">
      </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">?&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></pre>

<p>
	قمت يدويًا بإنشاء مقتطف عند جلب البيانات مباشرة، لكن تخيل أن أفعل ذلك في كل مرة أعرض منشور ووردبريس، ليست هذه بداية المشكلة حتى، لكن ماذا لو أردت بعد فترة تغيير طول محارف المقتطف. الآن هي معدة لتقتطع 250 محرفًا و إذا أردت تغيير هذا العدد عليك أن تمر على جميع الأماكن التي كتبت هذه التعليمات فيها و تغييرها واحدًا تلو الآخر، لهذا استخدام الدوال مفيد جدًا، ووردبريس أوجدت حلًا لهذه المشكلة عن طريق استخدام دالة <code>()the_excerpt</code>.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8082_7" style="">
<code class="hljs xml"><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">'post'</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">id</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">'post-23'</span></span><span class="tag">&gt;</span></span><span class="pln">
  </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">h2</span></span><span class="tag">&gt;</span></span><span class="php"><span class="hljs-string"><span class="pun">&lt;?</span><span class="pln">php the_title</span><span class="pun">()</span><span class="pln"> </span><span class="pun">?&gt;</span></span></span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">h2</span></span><span class="tag">&gt;</span></span><span class="pln">  
  </span><span class="hljs-tag"><span class="tag">&lt;</span><span class="hljs-title"><span class="tag">div</span></span><span class="pln"> </span><span class="hljs-attribute"><span class="atn">class</span></span><span class="pun">=</span><span class="hljs-value"><span class="atv">'excerpt'</span></span><span class="tag">&gt;</span></span><span class="pln">
    </span><span class="php"><span class="hljs-string"><span class="pun">&lt;?</span><span class="pln">php the_excerpt</span><span class="pun">()</span><span class="pln"> </span><span class="pun">?&gt;</span></span></span><span class="pln">
  </span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span><span class="pln">
</span><span class="hljs-tag"><span class="tag">&lt;/</span><span class="hljs-title"><span class="tag">div</span></span><span class="tag">&gt;</span></span></code></pre>

<p>
	البرمجة غرضية التوجه هي طبقة أخرى من التجريد(abstraction)، مشابهة كثيرًا للدوال. في هذه المقالة، سنقوم بإنشاء صنف(class)، الذي يمكن تشبيهه بوعاء حاوي للدوال.
</p>

<h2 id="كتابة-صنفك-الأول">
	كتابة صنفك الأول
</h2>

<p>
	لنقم بإنشاء صنف باسم “Post”. سيكون الهدف منه هو التلاعب بمنشورات ووردبريس:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8082_7" style="">
<code class="hljs php"><span class="pln"> </span><span class="hljs-class"><span class="hljs-keyword"><span class="kwd">class</span></span><span class="pln"> </span><span class="hljs-title"><span class="typ">Post</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
  </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">get_excerpt</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$content</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pun">(</span><span class="pln"> strlen</span><span class="pun">(</span><span class="hljs-variable"><span class="pln">$content</span></span><span class="pun">)</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">250</span></span><span class="pln">  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$content</span></span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">else</span></span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="hljs-variable"><span class="pln">$excerpt</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> substr</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$content</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-number"><span class="lit">0</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-number"><span class="lit">250</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
      </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$excerpt</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">'...'</span></span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">the_excerpt</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$content</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> get_excerpt</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$content</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">the_title</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$title</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$title</span></span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code></pre>

<p>
	صنفنا الآن يحتوي على 3 دوال بسيطة، واحدة لجلب المقتطف والثانية من أجل عرض المقتطف، الثالثة لعرض عنوان المقال. في الوقت الحالي الصنف يحتوي الآن فقط دوال، لكن هذا ليس كل شيء يمكن للصنف أن يفعله. لنرى القوة الحقيقية للأصناف سنلقي نظرة على دالة خاصة في الأصناف تدعي الباني <code>__construct()</code> ،<br>
	ومتغير خاص يدعى <code>this$</code>، والمتغيرات داخل الأصناف.<br>
	عندما ننشأ صنف، يكون الهدف منه معظم الأحيان هو إنشاء كائنات متعددة، يمكنك إنشاء عدة منشورات، لنرى كيف سنقوم بها من خلال هذا المثال:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8082_7" style="">
<code class="hljs php"><span class="hljs-class"><span class="hljs-keyword"><span class="kwd">class</span></span><span class="pln"> </span><span class="hljs-title"><span class="typ">Post</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
  </span><span class="hljs-keyword"><span class="kwd">var</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$title</span></span><span class="pun">;</span><span class="pln">
  </span><span class="hljs-keyword"><span class="kwd">var</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$content</span></span><span class="pun">;</span><span class="pln">

  </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">__construct</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$data</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">title </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$data</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'title'</span></span><span class="pun">];</span><span class="pln">  
    </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">title </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$data</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'content'</span></span><span class="pun">];</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">get_excerpt</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pun">(</span><span class="pln"> strlen</span><span class="pun">(</span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">content</span><span class="pun">)</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">250</span></span><span class="pln">  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">content</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">else</span></span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      </span><span class="hljs-variable"><span class="pln">$excerpt</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> substr</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$content</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-number"><span class="lit">0</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-number"><span class="lit">250</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
      </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$excerpt</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">'...'</span></span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">the_excerpt</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">get_excerpt</span><span class="pun">();</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">the_title</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-keyword"><span class="pln">echo</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">-&gt;</span><span class="pln">title</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

</span><span class="pun">}</span><span class="pln">

</span><span class="hljs-variable"><span class="pln">$postdata</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
  </span><span class="hljs-string"><span class="str">'title'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'Post 1 Title'</span></span><span class="pun">,</span><span class="pln">
  </span><span class="hljs-string"><span class="str">'content'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'Content of Post 1'</span></span><span class="pln"> 
</span><span class="pun">);</span><span class="pln">

</span><span class="hljs-variable"><span class="pln">$post</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">new</span></span><span class="pln"> </span><span class="typ">Post</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$postdata</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$post</span></span><span class="pun">-&gt;</span><span class="pln">the_excerpt</span><span class="pun">();</span></code></pre>

<p>
	هناك الكثير من الأشياء غير المفهومة بالنسبة لك في هذا المثال، لكن سيتم شرح كل شيء خلال لحظات، عندما تريد إنشاء كائن من صنف تستعمل هذه التعليمات كما في المثال <code>$post = new Post ($postdata)</code>، عندما تقوم بإنشاء الكائن ستنفذ الدالة البانية بشكل مباشر. الوسيط <code>postdata$</code> الذي تم تمريره للكائن عند إنشائها سيصبح متاحًا لدالة الباني التي تم تعريفها في الصنف. لتعطي قيم للمتغيرين اللذين تم تعريفهما داخل الصنف. تم إسناد قيمة للمتغير <code>title$</code> عن طريق <code>this-&gt;$title</code> وللمتغير <code>content$</code> عن طريق<br><code>this-&gt;$content</code> . المتغير <code>this$</code> هو متغير خاص يشير إلى الصنف نفسه، في أي وقت تريد الإشارة فيه إلى متغير تم تعريفه داخل الصنف بـ <code>this-&gt;$property_name</code> أو إلى دالة <code>()this-&gt;$function_name</code> تم تعريفها داخل الصنف.
</p>

<p>
	<strong>ملاحظة</strong>: الدوال داخل الصنف تدعى طرائق(methods)، والمتغيرات تدعى خصائص(properties) وسيتم من الآن الإشارة إليهم بهذه الأسماء بهذا المقال.
</p>

<p>
	إن أفضل طريقة لفهم كيفية عمل الأصناف هو تتبع التعليمات البرمجية، بعد أن قمنا بإنشاء الكائن قمنا بتشغيل الدالة <code>()post-&gt;the_excerpt$</code> لكن الآن نستعمل متغير <code>post$</code> للإشارة إلى الدالة بدلًا من <code>this$</code> لأننا نستعمل هذه الدالة خارج الصنف. الآن لنعرف بماذا تقوم هذه الدالة يمكننا التوجه إلى تعريف الصنف لأننا نعلم أن التعريف الأصلي والتعليمات البرمجية لهذه الدالة هي في الصنف الذي تم تعريفها فيه. كما نرى أن دالة <code>get_excerpt</code> لا تحتاج لتمرير أي محتوى لأنها تأخذ المحتوى من المتغير <code>content$</code>
</p>

<h2 id="مراجعة-ما-تعلمناه">
	مراجعة ما تعلمناه
</h2>

<p>
	لنراجع ما تعلمناه عن الأصناف قبل أن نرى كيف نستعملها في برمجة إضافات ووردبريس. الصنف هو وعاء حاوي للدوال يمكن تعريف الصنف بكتابة كلمة <code>class</code> وبعدها اسم الصنف، الدوال داخل الصنف تدعى طرائق، والمتغيرات تدعى خصائص. إذا كنا نكتب التعليمات البرمجية داخل الصنف فيمكن الإشارة إلى الخصائص والدوال بالمتغير <code>this$</code>. يمكن إنشاء كائن من صنف باستخدام الصيغة <code>$object = new class( $params )</code> . الدالة البانية يتم تنفيذها مباشرة عند إنشاء الكائن.
</p>

<h2 id="استخدام-الكائنات-في-إضافات-ووردبريس">
	استخدام الكائنات في إضافات ووردبريس
</h2>

<p>
	بما أن الأصناف تقوم بتغليف التعليمات البرمجية ضمن وعاء أو وحدة واحدة فهي تمنع التضارب مع التعليمات البرمجية المتواجدة خارج هذا الصنف يمكنني تعريف الدالة <code>get_excerpt</code> في إضافة ووردبريس التي أعمل عليها على الرغم أن هذه الدالة متواجدة بنفس الاسم في التعليمات البرمجية الأساسية لووردبريس. البرمجية غرضية التوجه تعتبر ميزة رائعة لأنها تجبرك استخدام معايير برمجية جيدة بالإضافة أنها تجعلك مبرمجًا أفضل. عندما تكون البرمجة غرضية التوجه مكتوبة بشكل جيد، فإنها دائمًا تكون الحل الأمثل لتتمكن من معرفة مزاياها بشكل جيد نحن نحتاج إلى أكثر من عدة أسطر برمجية، برمجة إضافة ووردبريس ستكون مثالًا رائعًا.<br>
	هذا مثال هو عبارة عن إضافة تضيف نصًا إلى نهاية كل مقال يتم نشره بشكل تلقائي:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8082_7" style="">
<code class="hljs php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln">
</span><span class="hljs-comment"><span class="com">/*
Plugin Name: Written By Awesome
Description: Adds a nice author tagline
Version: 1.0.0
Author: Daniel Pataki
Author URI: http://danielpataki.com
*/</span></span><span class="pln">

</span><span class="hljs-class"><span class="hljs-keyword"><span class="kwd">class</span></span><span class="pln"> </span><span class="hljs-title"><span class="typ">Written_By_Awesome</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
  </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">__construct</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    add_filter</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'the_content'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'add_author_line_to_content'</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">add_author_line_to_content</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$content</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$content</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">'&lt;br&gt; Written by someone awesome'</span></span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

</span><span class="pun">}</span><span class="pln">

</span><span class="hljs-variable"><span class="pln">$written_by_awesome</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">new</span></span><span class="pln"> </span><span class="typ">Written_By_Awesome</span><span class="pun">();</span></code></pre>

<p>
	عندما تفهم كيف تعمل الأصناف يمكنك تخطي الكثير من العوائق والتفكير بتعليماتك البرمجية كوحدات منفصلة، على سبيل المثال يمكنك إنشاء أصناف لتتولى التعليمات البرمجية الخاصة بالتفاعل مع المستخدم وإظهار النتائج، وأصناف آخرى للتعامل مع الخادم (server).
</p>

<p>
	لنلقي نظرة على هذه الإضافة، التي ترتب المنشورات بناء عدد التعليقات:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8082_7" style="">
<code class="hljs php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln">



</span><span class="hljs-class"><span class="hljs-keyword"><span class="kwd">class</span></span><span class="pln"> </span><span class="hljs-title"><span class="typ">PostsByCommentBackend</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
  </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">construct</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    add_action</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'pre_get_posts'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'backend_query'</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">backend_query</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$query</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
     </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$query</span></span><span class="pun">-&gt;</span><span class="pln">is_admin</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$query</span></span><span class="pun">-&gt;</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'orderby'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'comment_count'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$query</span></span><span class="pun">-&gt;</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'order'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'DESC'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="hljs-class"><span class="hljs-keyword"><span class="kwd">class</span></span><span class="pln"> </span><span class="hljs-title"><span class="typ">PostsByCommentFrontend</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
  </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">construct</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    add_action</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'pre_get_posts'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$this</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'frontend_query'</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">frontend_query</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$query</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
     </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$query</span></span><span class="pun">-&gt;</span><span class="pln">is_admin</span><span class="pun">()</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$query</span></span><span class="pun">-&gt;</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'orderby'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'comment_count'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$query</span></span><span class="pun">-&gt;</span><span class="kwd">set</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'order'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'DESC'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="hljs-variable"><span class="pln">$backend</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">new</span></span><span class="pln"> </span><span class="typ">PostsByCommentBackend</span><span class="pun">();</span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$frontend</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">new</span></span><span class="pln"> </span><span class="typ">PostsByCommentFrontend</span><span class="pun">();</span></code></pre>

<p>
	ربما تجد هذه التعليمات بالغة الصعوبة، لكن النقطة التي أحاول الوصول إليها أن فصل تعليماتك البرمجية إلى وحدات منفصلة، يسهل عملية تطوير هذه الوحدات والبناء عليها.
</p>

<h2 id="مثال-كامل">
	مثال كامل
</h2>

<p>
	إذا كنت مهتمًا بمزيد من الأمثلة التوضيحية يمكنك الاطلاع على مشروع <a href="http://wppb.io/" rel="external nofollow">WordPress Plugin Boilerplate</a> وهو عبارة عن قاعدة لبناء إضافات ووردبريس عن طريق البرمجة غرضية التوجه. لقد استخدمتها في العديد من مشاريعي وأنصح بها بشدة، خاصة للإضافات التي تتطلب درجة عالية من التعقيد.
</p>

<h2 id="الخاتمة">
	الخاتمة
</h2>

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

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://premium.wpmudev.org/blog/object-oriented-code-beginners/" rel="external nofollow">An Introduction to Object-Oriented Code for WordPress Plugins</a> لصاحبه Daniel Pataki
</p>
]]></description><guid isPermaLink="false">572</guid><pubDate>Mon, 11 Dec 2017 16:00:00 +0000</pubDate></item><item><title>&#x643;&#x64A;&#x641; &#x62A;&#x636;&#x628;&#x637; &#x646;&#x642;&#x637;&#x629; &#x646;&#x647;&#x627;&#x64A;&#x629; JSON &#x641;&#x64A; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633; &#x644;&#x644;&#x648;&#x635;&#x648;&#x644; &#x625;&#x644;&#x649; &#x648;&#x627;&#x62C;&#x647;&#x629; &#x628;&#x631;&#x645;&#x62C;&#x64A;&#x629; &#x62E;&#x627;&#x631;&#x62C;&#x64A;&#x629;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D9%83%D9%8A%D9%81-%D8%AA%D8%B6%D8%A8%D8%B7-%D9%86%D9%82%D8%B7%D8%A9-%D9%86%D9%87%D8%A7%D9%8A%D8%A9-json-%D9%81%D9%8A-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D9%84%D9%84%D9%88%D8%B5%D9%88%D9%84-%D8%A5%D9%84%D9%89-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D8%A9-%D8%AE%D8%A7%D8%B1%D8%AC%D9%8A%D8%A9-r544/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2017_10/59db76170f187_main(75).png.785d82fadfd8009658a541c1aaa4007f.png" /></p>

<p>
	هنالك الكثير من الواجهات البرمجية المبنية على JSON التي توفر وصولًا عبر دوال من جهة الخادوم فقط، فلو أردنا استخدام عميل JavaScript مع تلك الواجهات البرمجية الخارجية، فسنحتاج إلى ضبط خادومنا للوصول إلى تلك الواجهات البرمجية الخارجية ثم تخديم تلك البيانات عبر Ajax أو عبر نقطة نهاية (endpoint) خاصة بك. ولحسن الحظ، فعل ذلك سهلٌ جدًا في ووردبريس.<br>
	سأريك في هذا الدرس كيفية الحصول على أجور الشحن عبر <a href="https://www.easypost.com/docs/api.html" rel="external nofollow">Easy Post <abbr title="Application Programming Interface | واجهة برمجية">API</abbr></a> باستخدام نقطة نهاية في ووردبريس.<br>
	لتبسيط هذا الدرس (وجعله قصيرًا) فسنرسل ستة معاملات (وهو عدد كاف لواجهة Easy Post البرمجية لإعادة أجور الشحن):
</p>

<ul>
<li>
		عرض الطرد
	</li>
	<li>
		ارتفاع الطرد
	</li>
	<li>
		طول الطرد
	</li>
	<li>
		وزن الطرد
	</li>
	<li>
		كود Zip للمرسل
	</li>
	<li>
		كود Zip للمستقبل
	</li>
</ul>
<h2 id="ضبط-نقطة-نهاية-json">
	ضبط نقطة نهاية JSON
</h2>

<p>
	أوّل خطوة هي ضبط المسار الذي ستُخدَّم منه بيانات JSON، وفي هذه الحالة هو:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5827_10" style="">
<span class="str">/wp-json/</span><span class="pln">easy</span><span class="pun">-</span><span class="pln">post</span><span class="pun">/</span><span class="pln">v1</span><span class="pun">/</span><span class="pln">rates</span><span class="pun">/</span></pre>

<p>
	الشيفرة:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5827_8" style="">
<span class="com">/**
 * Sets up a JSON endpoint at /wp-json/easy-post/v1/rates/
 */</span><span class="pln">
</span><span class="kwd">function</span><span class="pln"> easy_post_api_init</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    $namespace </span><span class="pun">=</span><span class="pln"> </span><span class="str">'easy-post/v1'</span><span class="pun">;</span><span class="pln">
    register_rest_route</span><span class="pun">(</span><span class="pln"> $namespace</span><span class="pun">,</span><span class="pln"> </span><span class="str">'/rates/'</span><span class="pun">,</span><span class="pln"> array</span><span class="pun">(</span><span class="pln">
        </span><span class="str">'methods'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'GET'</span><span class="pun">,</span><span class="pln">
        </span><span class="str">'callback'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'easy_post_return_rates'</span><span class="pun">,</span><span class="pln">
    </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
add_action</span><span class="pun">(</span><span class="pln"> </span><span class="str">'rest_api_init'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'easy_post_api_init'</span><span class="pln"> </span><span class="pun">);</span></pre>

<h2 id="عرض-البيانات">
	عرض البيانات
</h2>

<p>
	تتوقع نقطة النهاية إرسال ست قيم من البيانات كطلبية، وستستخدمها للحصول على البيانات من الواجهة البرمجية الخارجية، فلو لم تكن تلك القيم موجودةً فستستعمل القيم الافتراضية، وسنحرص أن تكون تلك القيم رقميةً فقط.<br>
	مثال عن رابط URL مع قيم لكل المعاملات:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5827_10" style="">
<code class="hljs livecodeserver"><span class="str">/wp-json/</span><span class="pln">easy</span><span class="pun">-</span><span class="hljs-built_in"><span class="pln">post</span></span><span class="pun">/</span><span class="pln">v1</span><span class="pun">/</span><span class="pln">rates</span><span class="pun">/?</span><span class="pln">zip</span><span class="pun">=</span><span class="hljs-number"><span class="lit">78701</span></span><span class="pun">&amp;</span><span class="pln">width</span><span class="pun">=</span><span class="hljs-number"><span class="lit">10</span></span><span class="pun">&amp;</span><span class="hljs-built_in"><span class="pln">length</span></span><span class="pun">=</span><span class="hljs-number"><span class="lit">10</span></span><span class="pun">&amp;</span><span class="pln">height</span><span class="pun">=</span><span class="hljs-number"><span class="lit">10</span></span><span class="pun">&amp;</span><span class="pln">weight</span><span class="pun">=</span><span class="hljs-number"><span class="lit">10</span></span><span class="pun">&amp;</span><span class="pln">shipping_zip</span><span class="pun">=</span><span class="hljs-number"><span class="lit">78751</span></span></code></pre>

<p>
	الشيفرة:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5827_10" style="">
<code class="hljs php"><span class="hljs-comment"><span class="com">/**
 * عرض مخرجات Easy Post عبر النهاية الطرفية
 *
 * نستخدم القيم المبدئية في حال عدم ذكر بيانات في الطلب، إلا أن إعادة خطأ ربما تكون فكرة أفضل.
 * Valid URL: /wp-json/easy-post/v1/rates/?zip=78701&amp;width=10&amp;length=10&amp;height=10&amp;weight=10&amp;shipping_zip=78751
 */</span></span><span class="pln">
</span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">easy_post_return_rates</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> WP_REST_Request </span><span class="hljs-variable"><span class="pln">$request</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-comment"><span class="com">// الإعدادات المبدئية للشحن</span></span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$defaults</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'zip'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">78701</span></span><span class="pun">,</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'width'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">10</span></span><span class="pun">,</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'length'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">10</span></span><span class="pun">,</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'height'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">10</span></span><span class="pun">,</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'weight'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">16</span></span><span class="pun">,</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'shipping_zip'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">94105</span></span><span class="pln">
    </span><span class="pun">);</span><span class="pln">
    </span><span class="hljs-comment"><span class="com">// الحصول على المعطيات من الطلب</span></span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$request</span></span><span class="pun">-&gt;</span><span class="pln">get_query_params</span><span class="pun">();</span><span class="pln">
    </span><span class="hljs-comment"><span class="com">// التأكد من توفر جميع المعطيات</span></span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> array_replace</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$defaults</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
    </span><span class="hljs-comment"><span class="com">// تنظيف المفاتيح</span></span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> array_map</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">"absint"</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
    </span><span class="hljs-comment"><span class="com">// إنشاء قيم مفاتيح فريدة لتحديد قيم البيانات المؤقتة transient أو العثور عليها</span></span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$key</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">'easy_post_'</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> implode</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">"_"</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
    </span><span class="hljs-comment"><span class="com">/**
     * نحتفظ بالإجابة في قيمة مؤقتة transient ضمن قاعدة بيانات ووردبريس
     * لتجنب إرسال الكثير من الطلبات في وقت قصير
     * 
     * تنتهي صلاحية هذه البيانات بعد عشر دقائق
     */</span></span><span class="pln">
     </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">false</span></span><span class="pln"> </span><span class="pun">===</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$data</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> get_transient</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$key</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$data</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> easy_post_make_request</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
        </span><span class="hljs-variable"><span class="pln">$response</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">new</span></span><span class="pln"> WP_REST_Response</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$data</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
        </span><span class="hljs-comment"><span class="com">// التخبئة لمدة عشر دقائق</span></span><span class="pln">
        set_transient</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$key</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$response</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-number"><span class="lit">60</span></span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="hljs-number"><span class="lit">10</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">else</span></span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="hljs-comment"><span class="com">// إرجاع القيمة المخبّأة</span></span><span class="pln">
        </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pln"> get_transient</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$key</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$response</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>

<h2 id="الحصول-على-البيانات">
	الحصول على البيانات
</h2>

<p>
	الدالة <code>easy_post_make_request()‎</code> هي الدالة التي تطلب البيانات من الواجهة البرمجية الخارجية، والغرض من أغلبية الشيفرات التي هنا هي تجهيز الطلبية ضمن مصفوفة يمكن لواجهة Easy Post البرمجية أن تعالجها:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5827_10" style="">
<code class="hljs php"><span class="hljs-comment"><span class="com">/**
*العثور على البيانات من الواجهة البرمجية لـ Easy Post باستخدام الدالة wp_remote_post
*/</span></span><span class="pln">
</span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">easy_post_make_request</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$to_address</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'zip'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'shipping_zip'</span></span><span class="pun">],</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'country'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'US'</span></span><span class="pln">
    </span><span class="pun">);</span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$from_address</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'zip'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'zip'</span></span><span class="pun">],</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'country'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'US'</span></span><span class="pln">
    </span><span class="pun">);</span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$parcel</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'length'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'length'</span></span><span class="pun">],</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'width'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'width'</span></span><span class="pun">],</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'height'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'height'</span></span><span class="pun">],</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'weight'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$params</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'weight'</span></span><span class="pun">]</span><span class="pln">
    </span><span class="pun">);</span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$request</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'shipment'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
            </span><span class="hljs-string"><span class="str">'to_address'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$to_address</span></span><span class="pun">,</span><span class="pln">
            </span><span class="hljs-string"><span class="str">'from_address'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$from_address</span></span><span class="pun">,</span><span class="pln">
            </span><span class="hljs-string"><span class="str">'parcel'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$parcel</span></span><span class="pln">
        </span><span class="pun">)</span><span class="pln">
    </span><span class="pun">);</span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$args</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'method'</span></span><span class="pln">    </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'POST'</span></span><span class="pun">,</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'blocking'</span></span><span class="pln">  </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">true</span></span><span class="pun">,</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'headers'</span></span><span class="pln">   </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(</span><span class="pln">
            </span><span class="hljs-string"><span class="str">'Content-Type'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-string"><span class="str">'application/json'</span></span><span class="pln">
        </span><span class="pun">),</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'timeout'</span></span><span class="pln">   </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-number"><span class="lit">15</span></span><span class="pun">,</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'sslverify'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">false</span></span><span class="pun">,</span><span class="pln">
        </span><span class="hljs-string"><span class="str">'body'</span></span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> json_encode</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$request</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln">
    </span><span class="pun">);</span><span class="pln">
    </span><span class="hljs-comment"><span class="com">// ضع مفتاح <abbr title="Application Programming Interface | واجهة برمجية">API</abbr> الخاص بك مكان EASYPOST_TEST_API_KEY</span></span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$api_url</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">'https://'</span></span><span class="pln"> </span><span class="pun">.</span><span class="pln"> EASYPOST_TEST_API_KEY </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">':@<abbr title="Application Programming Interface | واجهة برمجية">api</abbr>.easypost.com/v2/shipments'</span></span><span class="pun">;</span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$response</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> wp_remote_post</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$api_url</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$args</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">

    </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln"> is_wp_error</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$response</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$response</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> json_decode</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$response</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'body'</span></span><span class="pun">]</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
    </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$response</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>

<h2 id="استخدام-البيانات">
	استخدام البيانات
</h2>

<p>
	عندما نحاول الوصول إلى نقطة النهاية التي أنشأناها، فإن بيانات JSON التي جلبناها من Easy Post ستظهر لنا:
</p>

<p style="text-align: center;">
	<img alt="1-json.gif" class="ipsImage ipsImage_thumbnailed" data-fileid="25125" data-unique="eerurs918" src="https://academy.hsoub.com/uploads/monthly_2017_10/1-json.gif.a4510bbd8b2e5c26e194755b25e10ed5.gif"></p>

<p>
	<br>
	يمكنك الآن الحصول على أجور الشحن ديناميكيًا في موقعك باستخدام نقطة النهاية التي أنشأناها في هذا الدرس.<br>
	يمكنك الاطلاع على <a href="https://gist.github.com/devinsays/dd15de71e3c563a3e6577acea7fa2d9d" rel="external nofollow">كامل الشيفرة هنا</a>.<br>
	ترجمة –وبتصرّف– للمقال <a href="https://wptheming.com/2017/04/json-endpoints-external-api/" rel="external nofollow">How to Set JSON Endpoints in WordPress to Access an External <abbr title="Application Programming Interface | واجهة برمجية">API</abbr></a> لصاحبه Devin Price
</p>

<p>
	حقوق الصورة البارزة محفوظة لـ <a href="http://www.freepik.com/free-vector/yellow-stripes-texture_768125.htm" rel="external nofollow">Freepik</a>
</p>
]]></description><guid isPermaLink="false">544</guid><pubDate>Mon, 09 Oct 2017 13:18:34 +0000</pubDate></item><item><title>&#x625;&#x646;&#x634;&#x627;&#x621; &#x62D;&#x633;&#x627;&#x628;&#x627;&#x62A; &#x645;&#x633;&#x62A;&#x62E;&#x62F;&#x645;&#x64A; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633; &#x628;&#x631;&#x645;&#x62C;&#x64A;&#x64B;&#x627;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D8%AD%D8%B3%D8%A7%D8%A8%D8%A7%D8%AA-%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85%D9%8A-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D9%8B%D8%A7-r496/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2017_06/main2.png.62db38d17010b01f8f5e512ebf709b54.png" /></p>

<p>
	عندما يتعلق الأمر ببناء نوع معيّنٍ من تطبيقات الويب، فأوّل ما يخطر ببالي هو استخدام <a href="https://academy.hsoub.com/programming/php/wordpress/" rel="">ووردبريس</a>! ومن بين المشاريع البرمجية التي عملتُ عليها في السنتين الماضيتين، تطلّب نصفها - على الأقل - إمكانية إدارة حسابات المستخدمين، وهو ما يعني عادةً السماح للمستخدمين بإنشاء حساباتهم، بإدخال بعض البيانات في حقلَي الاسم وعنوان البريد الإلكتروني، ومن ثم ستُرسَل إليهم رسالةٌ بريديةٌ لتفعيل حسابهم بعد إرسال النموذج.
</p>

<p style="text-align: center;">
	<img alt="main2.png" class="ipsImage ipsImage_thumbnailed" data-fileid="23524" data-unique="b4ike6yxj" src="https://academy.hsoub.com/uploads/monthly_2017_06/main2.png.8e7b8f476aa0a9d17a25d290a3ea6b58.png"></p>

<p>
	توفِّر ووردبريس طريقةً سهلةً لإدارة المستخدمين عبر لوحة التحكم، وإذا كان موقعك تعليميًا أو كنتَ تستعمله مدونةً لك، فلا حاجة إلى إنشاء آليةٍ أخرى لإدارة المستخدمين، لكن إذا كنتَ تبني تطبيقًا متكاملًا، فهنالك طرائق أخرى للتعامل مع حسابات المستخدمين.
</p>

<p>
	لنقل مثلًا أنَّ المُصمِّم قد وضع طريقةً معينةً لإدارة الحسابات في الموقع، وإذا أجبرتَ المستخدمين على استخدام لوحة التحكم فستتسبَّب بتخريب تجربة المستخدم، أليس كذلك؟
</p>

<p>
	هنالك طرائقٌ أفضل لتسجيل حسابات المستخدمين وإدارتها بدلًا من استخدام لوحة التحكم التابعة لووردبريس، وسنناقش في هذا الدرس كيفية إنشاء حسابات المستخدمين برمجيًا، وسنلقي نظرةً على النقاط الآتية:
</p>

<ol>
<li>
		الحصول على معلومات المستخدم بصيغةٍ معيّنة،
	</li>
	<li>
		التعرّف على المعلومات اللازمة لإنشاء حساب مستخدم،
	</li>
	<li>
		إنشاء الحساب،
	</li>
	<li>
		التأكد أنَّ شيفرتنا تخضع لمعايير كتابة الشفرات القياسية، وأنها سهلة القراءة والصيانة.
	</li>
</ol>
<p>
	لا تقلق، لن يكون هذا الدرس طويلا ومملًّا، أعدك بذلك!
</p>

<h2 id="إنشاء-حسابات-مستخدمي-ووردبريس">
	إنشاء حسابات مستخدمي ووردبريس
</h2>

<p>
	يحتاج أحدنا إلى المعلومات الآتية –على الأقل– لإنشاء حساب مستخدم جديد:
</p>

<ol>
<li>
		اسم المستخدم
	</li>
	<li>
		كلمة المرور
	</li>
	<li>
		عنوان البريد الإلكتروني
	</li>
</ol>
<p>
	عندما يتعلق الأمر بإنشاء اسم المستخدم، فأنا أفضِّل استخدام البريد الإلكتروني اسمًا للمستخدم لأنني أضمن أنَّه فريد ولن يتكرر مرةً أخرى؛ ولهذا سنستخدمه في هذا الدرس؛ وسنتحدث عن توليد كلمة المرور لاحقًا.
</p>

<p>
	أضف إلى ذلك ضرورة افتراض أنَّ البيانات ستأتيك بأيّ صيغة: فربما تكون بصيغة JSON، أو تكون حقولًا مفصولةً بفواصل كما في CSV، وقد تأتي بصيغة XML.
</p>

<p>
	بغض النظر عن الصيغة المستعملة، فيجدر بك كتابة الشفرات اللازمة لتفسير تلك المعلومات باستخدام <a href="https://academy.hsoub.com/programming/php/" rel="">PHP</a> لكي تستطيع التعامل معها لاحقًا.<br>
	ولتبسيط الشيفرات المعروضة في هذا الدرس، سنفترض وجود تسجيلة Record لمستخدمٍ وحيدٍ مخزنةٌ معلوماته في مصفوفة. هذا لا يعني أنَّ المعلومات ستأتيك مباشرةً على شكل مصفوفة جاهزة، وإنما عليك تحويلها برمجيًا إلى واحدة.
</p>

<h2 id="أولا-معلومات-المستخدم">
	أولًا: معلومات المستخدم
</h2>

<p>
	لنفترض أنَّنا سنضيف شخصًا باسم Meghan إلى نظامنا، ولدينا عنوان بريده الإلكتروني.
</p>

<p style="text-align: center;">
	<img alt="01_creating_wordpress_users_persona.png" class="ipsImage ipsImage_thumbnailed" data-fileid="23522" data-unique="fjaq69axd" src="https://academy.hsoub.com/uploads/monthly_2017_06/01_creating_wordpress_users_persona.png.aa5a0233b5e2c23eb6031aab90d7ef70.png"></p>

<p>
	لكن لا بأس بذلك، فلدينا المعلومات الأساسية التي نريدها:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_6467_7" style="">
<span class="pun">&lt;?</span><span class="pln">php
$user_info </span><span class="pun">=</span><span class="pln"> array</span><span class="pun">(</span><span class="pln">
          </span><span class="str">'email'</span><span class="pln">      </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'meghan@emaildomain.com'</span><span class="pun">,</span><span class="pln">
          </span><span class="str">'first_name'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'Meghan'</span><span class="pun">,</span><span class="pln">
          </span><span class="str">'last_name'</span><span class="pln">  </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'McFarlin'</span><span class="pun">,</span><span class="pln">
        </span><span class="pun">);</span></pre>

<p>
	ولنحوِّلها إلى شيءٍ نستطيع من خلاله إنشاء حسابٍ له.
</p>

<h2 id="ثانيا-إنشاء-الحساب">
	ثانيًا: إنشاء الحساب
</h2>

<p>
	أوّل ما علينا فعله هو التحقق من عدم وجود مستخدم مرتبط بعنوان البريد الإلكتروني نفسه، وإذا حدث ذلك فسنستعمل التعليمة <code>return</code> فقط، لكنك قد ترغب بإظهار رسالة خطأ أو أي نوع من التنبيهات لتخبر المستخدم أنَّك لا تستطيع إنشاء هذا الحساب لوجوده من قبل؛ لكن ذلك خارجٌ عن نطاق هذا الدرس:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_6467_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln">

</span><span class="hljs-comment"><span class="com">// التحقق من صحة البريد الإلكتروني الذي أدخله المستخدم وعدم وجوده مسبقًا في قاعدة البيانات  </span></span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$email</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$user_info</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'email'</span></span><span class="pun">];</span><span class="pln">    
</span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln"> filter_var</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$email</span></span><span class="pun">,</span><span class="pln"> FILTER_VALIDATE_EMAIL </span><span class="pun">)</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> username_exists</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$email</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> 
      </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pun">;</span><span class="pln">       
</span><span class="pun">}</span></span></code></pre>

<p>
	لنفترض في هذا الدرس أنَّ المستخدم غير موجود، وعلينا إنشاء حساب له؛ ولفعل ذلك سنحتاج إلى عنوان البريد الإلكتروني إضافةً إلى كلمة مرور؛ ولحسن الحظ، توليد كلمات المرور سهلٌ جدًا:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_6467_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln">   

</span><span class="hljs-variable"><span class="pln">$password</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> wp_generate_password</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-number"><span class="lit">16</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">false</span></span><span class="pln"> </span><span class="pun">);</span></span></code></pre>

<p>
	لنأخذ البريد الإلكتروني الذي أدخله المستخدم وكلمة المرور التي ولّدناها ولنُنشِئ الحساب:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_6467_7" style="">
<code class="hljs xml"><span class="php"><span class="hljs-preprocessor"><span class="pun">&lt;?</span><span class="pln">php</span></span><span class="pln">               

</span><span class="hljs-comment"><span class="com">// الحصول على البريد الإلكتروني وتوليد كلمة المرور</span></span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$email</span></span><span class="pln">    </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$user_info</span></span><span class="pun">[</span><span class="hljs-string"><span class="str">'email'</span></span><span class="pun">];</span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$password</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> wp_generate_password</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-number"><span class="lit">12</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">false</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">

</span><span class="hljs-comment"><span class="com">// إنشاء حساب المستخدم</span></span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$user_id</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> wp_create_user</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$email</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$password</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$email</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">

</span><span class="hljs-comment"><span class="com">// ضبط امتيازات أو دور المستخدم</span></span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$user</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">new</span></span><span class="pln"> \WP_User</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$user_id</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$user</span></span><span class="pun">-&gt;</span><span class="pln">set_role</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'author'</span></span><span class="pln"> </span><span class="pun">);</span></span></code></pre>

<p>
	لاحظ في الشيفرة السابقة أننا ضبطنا دور المستخدم (role)، وذلك عبر الحصول على نسخةٍ من الصنف <a href="https://developer.wordpress.org/reference/classes/wp_user/" rel="external nofollow">Wp_User</a> ثم استخدام مُعرِّف المستخدم المُخزَّن في المتغير <code>‎$user_id</code> لضبط الدور الخاص به.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileid="23523" href="https://academy.hsoub.com/uploads/monthly_2017_06/02_roles_and_capabilities.png.136f23ce90d0e70ed9fcbdc73c1dab1c.png" rel=""><img alt="02_roles_and_capabilities.png" class="ipsImage ipsImage_thumbnailed" data-fileid="23523" data-unique="f0uzw0lfi" src="https://academy.hsoub.com/uploads/monthly_2017_06/02_roles_and_capabilities.thumb.png.bff396366cc0f41e0d2d85f72d7d8c7b.png"></a>
</p>

<p>
	استخدمتُ دور الكاتب Author في المثال السابق، لكن هنالك أدوار ووردبريس أخرى يمكنك اختيار أحدها.
</p>

<h2 id="ثالثا-ألا-توجد-خطوات-أخرى">
	ثالثًا: ألا توجد خطواتٌ أخرى؟!
</h2>

<p>
	أصبح حساب المستخدم جاهزًا عند هذه المرحلة؛ دعني أذكِّرُكَ أنَّ جزءًا كبيرًا من عملية إنشاء المستخدم متعلقٌ بكيفية استقبال البيانات، ومن ثم معالجتها، والطريقة التي تسمح بها لمدير الموقع بإنشاء الحسابات.
</p>

<p>
	هذه الأمور مهمة، لكنني وعدتُكَ أن أبقي هذا الدرس قصيرًا ومركَّزًا، وتلك الأمور ترتبط ارتباطًا وثيقًا بشكل موقعك وتجربة المستخدم فيه، أي أنها تختلف من موقعٍ لآخر.
</p>

<h2 id="الخلاصة">
	الخلاصة
</h2>

<p>
	لقد تعلمنا في هذا الدرس طريقة إنشاء مستخدمي ووردبريس برمجيًا، عبر تجربتنا لذلك على حساب مستخدمٍ واحد.
</p>

<p>
	إذا أردتَ إنشاء مستخدمين عدّة، فعليك إنشاء <a href="https://academy.hsoub.com/programming/php/%D8%A7%D9%84%D9%85%D8%B5%D9%81%D9%88%D9%81%D8%A7%D8%AA-arrays-%D9%88%D8%AD%D9%84%D9%82%D8%A9-foreach-%D9%81%D9%8A-php-r294/" rel="">مصفوفات</a> فيها معلومات المستخدمين، والتي تستطيع الدوران عليها عبر حلقة تكرار وتُنشِئ الحسابات كما فعلنا في هذا الدرس.
</p>

<p>
	ترجمة –وبتصرّف– للمقال <a href="https://tommcfarlin.com/creating-wordpress-users/" rel="external nofollow">Programmatically Creating WordPress Users</a> لصاحبه Tom McFrlin.
</p>

<p>
	حقوق الصورة البارزة محفوظة لـ <a href="http://www.freepik.com/free-vector/user-avatars-without-faces_846294.htm" rel="external nofollow">Freepik</a>
</p>
]]></description><guid isPermaLink="false">496</guid><pubDate>Tue, 06 Jun 2017 21:02:36 +0000</pubDate></item><item><title>&#x627;&#x644;&#x623;&#x62E;&#x637;&#x627;&#x621; &#x627;&#x644;&#x639;&#x634;&#x631;&#x629; &#x627;&#x644;&#x623;&#x643;&#x62B;&#x631; &#x634;&#x64A;&#x648;&#x639;&#x64B;&#x627; &#x644;&#x62F;&#x649; &#x645;&#x637;&#x648;&#x631;&#x64A; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D8%A7%D9%84%D8%A3%D8%AE%D8%B7%D8%A7%D8%A1-%D8%A7%D9%84%D8%B9%D8%B4%D8%B1%D8%A9-%D8%A7%D9%84%D8%A3%D9%83%D8%AB%D8%B1-%D8%B4%D9%8A%D9%88%D8%B9%D9%8B%D8%A7-%D9%84%D8%AF%D9%89-%D9%85%D8%B7%D9%88%D8%B1%D9%8A-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r429/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2017_02/wordpress-top-10-mistakes.png.764f63e68418bb9af2df77b537c00878.png" /></p>

<p id="الأخطاء-العشرة-الأكثر-شيوعا-ما-بيم-مطوري-ووردبريس">
	من الطبيعي أن نرتكب نحن البشر أخطاءً، لكننا نصحح تلك الأخطاء بنفسنا، أي أننا نميل إلى التعلم من أخطائنا ولا نرتكب الخطأ نفسه مرتين؛ أغلبية الأخطاء التي أقع فيها عند تطوير مواقع ووردبريس تأتي من محاولتي لتقليل الوقت اللازم لإنشاء الميزات، لكن ينتهي المطاف بمَن يعتمد هذه الطريقة بألمٍ في الرأس وندمٍ على أخطائه؛ لكن التعلم من هفوات الآخرين أفضل من الوقوع بكثير من الأخطاء وتضييع الوقت.
</p>

<p style="text-align: center;">
	<img alt="wordpress-top-10-mistakes.png" class="ipsImage ipsImage_thumbnailed" data-fileid="21884" data-unique="55sz9rlhd" src="https://academy.hsoub.com/uploads/monthly_2017_02/wordpress-top-10-mistakes.png.ca6b7f91ae1e032a8b0c46b240e52c98.png" style=""></p>

<h2 id="الخطأ-الشائع-الأول-عدم-تفعيل-ميزة-التنقيح-في-ووردبريس">
	الخطأ الشائع الأول: عدم تفعيل ميزة التنقيح في ووردبريس
</h2>

<p>
	لماذا علينا تفعيل ميزة التنقيح (debugging) عندما تعمل الشيفرة كما يجب؟ ميزة التنقيح هي ميزةٌ مدمجة في ووردبريس التي ستؤدي إلى إظهار الأخطاء والتحذيرات والملاحظات (عن الدوال المهملة [deprecated functions] …إلخ.).<br>
	عندما تكون ميزة التنقيح معطلةً فقد لا تظهر التحذيرات أو الملاحظات المهمة، مما قد يؤدي إلى حدوث مشاكل مستقبلًا إن لم تتعامل مع تلك التحذيرات مباشرةً. ونريد أن تتوافق الشيفرات الجديدة مع بقية عناصر الموقع، لذا عند إضافتها إلى ووردبريس يجب فعل ذلك في بيئة تطويرية مُفعَّلةٌ فيها ميزة التنقيح (لكن احرص على تعطيل هذه الميزة قبل نشر الموقع وتحويله إلى بيئةٍ إنتاجيةٍ).<br>
	عليك تعديل ملف <code>wp-config.php</code> الموجود في المجلد الرئيسي لووردبريس لتفعيل هذه الميزة، هذا جزءٌ من الملف:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8792_7" style="">
<span class="com">// Enable debugging</span><span class="pln">
define</span><span class="pun">(</span><span class="str">'WP_DEBUG'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">);</span><span class="pln">

</span><span class="com">// Log all errors to a text file located at /wp-content/debug.log</span><span class="pln">
define</span><span class="pun">(</span><span class="str">'WP_DEBUG_LOG'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">);</span><span class="pln">

</span><span class="com">// Don’t display error messages write them to the log file /wp-content/debug.log</span><span class="pln">
define</span><span class="pun">(</span><span class="str">'WP_DEBUG_DISPLAY'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">);</span><span class="pln">

</span><span class="com">// Ensure all PHP errors are written to the log file and not displayed on screen</span><span class="pln">
</span><span class="lit">@ini_set</span><span class="pun">(</span><span class="str">'display_errors'</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">);</span></pre>

<p>
	لا تضم الشيفرة السابقة جميع خيارات الضبط التي يمكن تفعيلها، لكن الضبط السابق كافٍ عادةً لأغلبية الاحتياجات.
</p>

<h2 id="الخطأ-الشائع-الثاني-إضافة-السكربتات-وأنماط-css-عبر-wphead">
	الخطأ الشائع الثاني: إضافة السكربتات وأنماط CSS عبر wp_head
</h2>

<p>
	أين الخطأ في إضافة السكربتات إلى قالب header؟ تتضمن ووردبريس مسبقًا عددًا كبيرًا من <a href="https://developer.wordpress.org/themes/basics/including-css-javascript/#default-scripts-included-and-registered-by-wordpress" rel="external nofollow">السكربتات المشهورة</a>، ومع ذلك يأتي المطورون ويضيفون سكربتاتٍ جديدة باستخدام الخطّاف (hook) ذو الاسم <code>wp_head</code>. وهذا قد يؤدي إلى تحميل نفس السكربت عدِّة مرات لكن بإصدارات مختلفة.<br>
	أتت عملية طلب تحميل السكربتات (enqueuing) لحل هذه الإشكالية، وهذه العملية تمثِّل الطريقة المثُلى لإضافة السكربتات وأنماط CSS إلى موقع ووردبريس. علينا استخدام هذه الطريقة لمنع التضاربات بين السكربتات التي تتطلّب الإضافات استخدامها، وللتعامل مع (ومن ثم تضمين) المكتبات المطلوبة من أحد السكربتات.<br>
	يمكن استخدام هذه التقنية عبر الدالتين الموجودتين في ووردبريس <code>wp_enqueue_script</code> و <code>wp_enqueue_style</code> لطلب تحميل السكربتات وصفحات الأنماط (على التوالي وبالترتيب). الفرق الأساسي بين الدالتين السابقتين يمكن في أنَّ الدالة <code>wp_enqueue_script</code> تقبل معاملًا (parameter) إضافيًا الذي يسمح لنا بنقل مكان إضافة السكربت إلى أسفل الصفحة.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8792_7" style="">
<code class="hljs php"><span class="pln">wp_register_script</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$handle</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$src</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$deps</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(),</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$ver</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">false</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$in_footer</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">false</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln">
wp_enqueue_script</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$handle</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$src</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">false</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$deps</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(),</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$ver</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">false</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$in_footer</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">false</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln">

wp_register_style</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$handle</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$src</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$deps</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(),</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$ver</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">false</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$media</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">'all'</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln">
wp_enqueue_style</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$handle</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$src</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">false</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$deps</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="pln">array</span></span><span class="pun">(),</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$ver</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-keyword"><span class="kwd">false</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$media</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="hljs-string"><span class="str">'all'</span></span><span class="pln"> </span><span class="pun">)</span></code></pre>

<p>
	إذا لم يكن السكربت ضروريًا لعرض محتوى الصفحة، فيمكننا نقله إلى أسفلها لكي تُحمَّل محتويات الصفحة بسرعة؛ يجدر بالذكر أنَّه من المستحسن تسجيل (register) السكربت أولًا قبل طلب تحميله، لأنَّ ذلك يسمح للمطورين الآخرين بإلغاء تسجيل السكربت عبر المرجعية (أي <code>‎$handle</code>) وذلك ضمن الإضافات التي يكتبونها، دون الحاجة إلى تعديل الشيفرات البرمجية لإضافتك. وعند تسجيل السكربت فيمكن ذكره ضمن مصفوفة الاعتماديات (أي <code>‎$deps</code>) عبر مرجعيته إن وَجَبَ تحميله قبل تضمين أحد السكربتات الأخرى التي طُلِبَ تحميلها، فعندئذٍ سيُحمَّل السكربت تلقائيًا قبل تحميل السكربت الآخر.
</p>

<h2 id="الخطأ-الشائع-الثالث-تفادي-استخدام-القوالب-الأبناء-وتعديل-ملفات-ووردبريس-الأساسية">
	الخطأ الشائع الثالث: تفادي استخدام القوالب الأبناء وتعديل ملفات ووردبريس الأساسية
</h2>

<p>
	أنشِئ قالب ابن (child theme) دومًا إذا أدرتَ تعديل أحد القوالب، فبعض المطورين يجرون تعديلات على ملفات القالب الأب ثم يكتشفون أنَّ جميع تعديلاتهم قد ذهبت أدراج الرياح ولن يستطيعوا استعادتها بعد تحديث القالب.<br>
	لإنشاء قالب ابن عليك وضع ملف <code>style.css</code> في مجلدٍ فرعي تابعٍ للقالب الابن الخاص بك، وبه المحتويات الآتية:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8792_7" style="">
<code class="hljs fsharp"><span class="com">/*
 Theme Name:   Twenty Sixteen Child
 Theme URI:    http:</span><span class="hljs-comment"><span class="com">//example.com/twenty-fifteen-child/</span></span><span class="com">
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http:</span><span class="hljs-comment"><span class="com">//example.com</span></span><span class="com">
 Template:     twentysixteen
 Version:      </span><span class="hljs-number"><span class="com">1.0</span></span><span class="hljs-number"><span class="com">.0</span></span><span class="com">
 License:      GNU General Public License v2 </span><span class="hljs-keyword"><span class="com">or</span></span><span class="com"> later
 License URI:  http:</span><span class="hljs-comment"><span class="com">//www.gnu.org/licenses/gpl-2.0.html</span></span><span class="com">
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-sixteen-child
*/</span></code></pre>

<p>
	الملف السابق هو مثالٌ عن إنشاء قالب ابن يعتمد على أحد قوالب ووردبريس المُضمَّنة فيها وهو Twenty Sixteen. أهم سطر في الشيفرة السابقة هو السطر الذي يحتوي على كلمة <code>Template</code> والتي يجب أن يُطابِق محتواه اسمَ مجلد القالب الأب.<br>
	ينطبق نفس المبدأ على ملفات ووردبريس الأساسية: لا تختر الطريق السهل وتُعدِّل الملفات الأساسية. وإنما ابذل جهدًا قليلًا وأعد تعريف الدوال القابلة للتعديل فقط (تسمى <a href="https://codex.wordpress.org/Pluggable_Functions" rel="external nofollow">Pluggable functions</a>) واستعمل مرشِّحات ووردبريس لمنع الكتابة فوق تعديلاتك بعد تحديث نسخة ووردبريس. تسمح لك إعادة تعريف الدوال باستخدام شيفرات خاصة بك بدلًا من الدوال الأساسية، لكن خفَّ استعمال هذه الطريقة وأصبحنا نستخدم المُرشِّحات (filters) بدلًا منها. حيث يؤدي استخدام المرشحات إلى نفس الناتج، وستُضاف التعليمات البرمجية في نهاية دوال ووردبريس للسماح بتعديل مخرجاتها. إحدى الأشياء التي عليك الانتباه إليها هي إعادة تعريف الدوال ضمن عبارة شرطية <code>if ( !function_exists() )</code> لاحتمال تعديل أكثر من إضافة لنفس الدالة، فبدون تلك العبارة الشرطية فسيحدث خطأٌ من النوع fetal.
</p>

<h2 id="الخطأ-الشائع-الرابع-ضبط-بعض-القيم-ضبطا-ثابتا">
	الخطأ الشائع الرابع: ضبط بعض القيم ضبطًا ثابتًا
</h2>

<p>
	نستسهل عادةً إضافة قيمٍ ثابتةٍ (مثل روابط URL) في مكانٍ ما في الشيفرات التي نكتبها، لكن الوقت الذي سننفقه لمعرفة سبب حدوث المشاكل ناتجة عن القيم الثابتة ولتصحيح تلك المشاكل سيكون أكبر. وإذا استعملنا الدالة المناسبة لتوليد المسار المطلوب ديناميكيًا، فسنُبسِّط عملية صيانة وتنقيح الشيفرة.<br>
	فمثلًا لو نقلتَ موقعك من بيئةٍ تطويريةٍ إلى بيئةٍ إنتاجيةٍ لكنك استخدمتَ روابط URL ثابتة في الشيفرات؛ فعندئذٍ ستُفاجَأ أنَّ موقعك لا يعمل. وهذا هو السبب وراء وجوب استخدامنا للدوال –كتلك المذكورة أدناه– لتوليد مسارات وروابط URL توليدًا ديناميكيًا:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8792_7" style="">
<code class="hljs scss"><span class="hljs-comment"><span class="com">// الحصول على رابط القالب الابن الحالي</span></span><span class="pln">
</span><span class="hljs-function"><span class="pln">stylesheet_directory_uri</span><span class="pun">()</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-comment"><span class="com">//  الحصول على رابط القالب الأب</span></span><span class="pln">
</span><span class="hljs-function"><span class="pln">get_template_directory_uri</span><span class="pun">()</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-comment"><span class="com">// الحصول على رابط الموقع الحالي</span></span><span class="pln">
 </span><span class="hljs-function"><span class="pln">site_url</span><span class="pun">()</span></span><span class="pun">;</span></code></pre>

<p>
	مثالٌ آخر عن مساوئ ضبط القيم ضبطًا ثابتًا يظهر جليًا عند كتابة طلبيات SQL مخصصة. فنحن نغيّر عادةً «السابقة» (prefix) التي تأتي قبل أسماء الجداول في قاعدة بيانات ووردبريس من <code>wp_‎</code> إلى شيءٍ آخر مختلف مثل wp743_<code>‎</code>، فلو وضعنا اسم الجدول كقيمة ثابتة فلن تُنفَّذ الطلبيات إذا نقلنا ووردبريس إلى قاعدة بيانات أخرى، لأنَّ السابقة قد تختلف حينها. ولمنع حدوث هذه الإشكالية فيمكننا استعمال <a href="https://codex.wordpress.org/wpdb#Tables" rel="external nofollow">خاصيات الصنف <code>wpdb</code></a>:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8792_7" style="">
<code class="hljs lasso"><span class="hljs-built_in"><span class="kwd">global</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$wpdb</span></span><span class="pun">;</span><span class="pln">
</span><span class="hljs-variable"><span class="pln">$user_count</span></span><span class="pln"> </span><span class="hljs-subst"><span class="pun">=</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$wpdb</span></span><span class="hljs-subst"><span class="pun">-&gt;</span></span><span class="pln">get_var</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">"SELECT COUNT(*) FROM $wpdb-&gt;users"</span></span><span class="pln"> </span><span class="pun">);</span></code></pre>

<p>
	لاحظ أنَّنا لم نستعمل القيمة <code>wp_users</code> مكان اسم الجدول، وإنما تركنا الأمر بيد ووردبريس. سيساعدنا استعمال هذه الخاصيات لتوليد أسماء صحيحة للجداول.
</p>

<h2 id="الخطأ-الشائع-الخامس-عدم-منع-فهرسة-موقعك-من-محركات-البحث">
	الخطأ الشائع الخامس: عدم منع فهرسة موقعك من محركات البحث
</h2>

<p>
	لماذا قد أرغب منع فهرسة محركات البحث لموقعي؟ أليس ذلك أمرًا جيدًا؟ حسنًا، عندما تطوِّر موقع ويب فلن ترغب بالسماح لمحركات البحث بفهرسة الموقع إلى أن تنتهي من بنائه وتختار بنية «الروابط الدائمة» (permalinks) المناسبة. إضافةً إلى أنَّك إذا كنتَ تطوِّر الموقع على خادوم آخر فلن ترغب بفهرسة محركات البحث لصفحات الموقع كي لا تمسي صفحات الموقع الإنتاجي وكأنها منسوخة من هذا الموقع! وعندما تتواجد أكثر من نسخة لنفس المحتوى، فسيصعب على محركات البحث تحديد ما هو المصدر الملائم أكثر لمطابقة عبارة البحث، وستعاقب محركات البحث عادةً المواقع ذات المحتوى المتماثل مما يؤدي إلى تقليل تقييم صفحتك في نتائج البحث.<br>
	وكما هو ظاهر في الصورة الآتية، هنالك خيارٌ في صفحة «Reading Settings» (إعدادات القراءة) المُعَنوَن «Discourage search engines from indexing this site» (منع محركات البحث من أرشفة هذا الموقع) لكن لا تغفل عن الملاحظة الظاهر أسفل ذاك الخيار التي تقول أنَّ الأمر متروكٌ لمحركات البحث لكي تستجيب لطلبك بعدم فهرسة الموقع.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileid="21882" href="https://academy.hsoub.com/uploads/monthly_2017_02/1-image1.jpg.097ff2aa665fadeaa07b2fdfcf00cd7b.jpg" rel=""><img alt="1-image1.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="21882" data-unique="0bwvh3s8g" src="https://academy.hsoub.com/uploads/monthly_2017_02/1-image1.thumb.jpg.dc4cdb98b65e78ad3b3bb79c4c4a0204.jpg" style=""></a>
</p>

<p>
	ابقِ ببالك أنَّ محركات البحث لا تستجيب عادةً لهذا الطلب، ولذا إذا أردتَ منعًا حقيقيًا لمحركات البحث من فهرسة الموقع، فعدِّل ملف <code>‎.htaccess</code> وأضف السطر الآتي:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8792_7" style="">
<code class="hljs lasso"><span class="hljs-keyword"><span class="typ">Header</span></span><span class="pln"> </span><span class="hljs-built_in"><span class="kwd">set</span></span><span class="pln"> X</span><span class="hljs-attribute"><span class="pun">-</span><span class="typ">Robots</span></span><span class="hljs-attribute"><span class="pun">-</span><span class="typ">Tag</span></span><span class="pln"> </span><span class="hljs-string"><span class="str">"noindex, nofollow"</span></span></code></pre>

<h2 id="الخطأ-الشائع-السادس-عدم-التحقق-من-تفعيل-إحدى-الإضافات">
	الخطأ الشائع السادس: عدم التحقق من تفعيل إحدى الإضافات
</h2>

<p>
	لماذا نتحقق أنَّ دالةً مرتبطةً بإحدى الإضافات موجودةٌ إذا كانت الإضافة مفعلةً دومًا؟ لكن ماذا لو كانت الإضافة مفعلةً بنسبة 99%، ماذا عن احتمال 1% أنَّ الإضافة معطلة؟ إذا حدث ذلك فمن المرجح أن يعرض موقعك رسائل خطأ، ولمنع ذلك يجب علينا أن نتأكَّد إن كانت الإضافة مفعلة قبل استدعاء إحدى دوالها. إذا كانت تلك الدالة مستدعاةً في «الواجهة الأمامية» (front-end)، فسنحتاج إلى تضمين ملف <code>plugin.php</code> لكي نستطيع استخدام الدالة <code>is_plugin_active()‎</code>:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8792_7" style="">
<code class="hljs php"><span class="hljs-keyword"><span class="pln">include_once</span></span><span class="pun">(</span><span class="pln"> ABSPATH </span><span class="pun">.</span><span class="pln"> </span><span class="hljs-string"><span class="str">'wp-admin/includes/plugin.php'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> is_plugin_active</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'plugin-folder/plugin-main-file.php'</span></span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="hljs-comment"><span class="com">// تنفيذ الشيفرات هنا</span></span><span class="pln">
</span><span class="pun">}</span></code></pre>

<p>
	هذه الطريقة ناجعة وعملية، لكن هنالك بعض الحالات التي يغيّر فيها المطوِّر اسم مجلد الإضافة الرئيسي، لذا من الأفضل التحقق من وجود أحد الأصناف المُعرَّفة في الإضافة:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_6163_7" style="">
<span class="kwd">if</span><span class="pun">(</span><span class="pln"> class_exists</span><span class="pun">(</span><span class="pln"> </span><span class="pun">‘</span><span class="typ">WooCommerce</span><span class="pun">’</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="com">// إضافة WooCommerce مفعلة</span><span class="pln">
</span><span class="pun">}</span></pre>

<p>
	من غير المرجح أن يُعدِّل المطورون أسماء الأصناف، لذا أفضِّلُ استخدام الطريقة الثانية.
</p>

<h2 id="الخطأ-الشائع-السابع-تحميل-الكثير-من-الموارد">
	الخطأ الشائع السابع: تحميل الكثير من الموارد
</h2>

<p>
	لماذا يجب أن ننتقي ما هي الموارد التي يجب تحميلها لصفحات الموقع؟ لا يوجد سببٌ منطقيٌ لتحميل السكربتات أو صفحات أنماط CSS التابعة لإضافةٍ معينةٍ إن لم تكن تلك الإضافة مستعملةً في الصفحة التي انتقل إليها المستخدم. يمكننا تقليل وقت تحميل الصفحة إذا حمّلنا الموارد الضرورية فقط، وبالتالي سيُحسِّن ذلك من تجربة المستخدم. خذ على سبيل المثال موقعًا يستعمل WooCommerce، حيث نحتاج إلى تحميل الإضافة في صفحات التسوق فقط، وفي هذه الحالة يمكننا حذف أيّة موارد غير ضرورية في صفحات الموقع الأخرى لتحسين الأداء. يمكننا إضافة الشيفرة الآتية إلى ملف <code>functions.php</code> للقالب أو للإضافة:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8792_7" style="">
<code class="hljs scss"><span class="kwd">function</span><span class="pln"> </span><span class="hljs-function"><span class="pln">load_woo_scripts_styles</span><span class="pun">()</span></span><span class="pun">{</span><span class="pln">

</span><span class="hljs-function"><span class="kwd">if</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-function"><span class="pln">function_exists</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'is_woocommerce'</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pun">{</span><span class="pln">
    </span><span class="hljs-function"><span class="kwd">if</span><span class="pun">(!</span><span class="pln"> </span><span class="hljs-function"><span class="pln">is_woocommerce</span><span class="pun">()</span></span><span class="pln"> </span><span class="pun">&amp;&amp;</span><span class="pln"> </span><span class="pun">!</span><span class="pln"> </span><span class="hljs-function"><span class="pln">is_cart</span><span class="pun">()</span></span><span class="pln"> </span><span class="pun">&amp;&amp;</span><span class="pln"> </span><span class="pun">!</span><span class="pln"> </span><span class="hljs-function"><span class="pln">is_checkout</span><span class="pun">()</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span><span class="pln">         

        </span><span class="hljs-comment"><span class="com">// Dequeue scripts.</span></span><span class="pln">
        </span><span class="hljs-function"><span class="pln">wp_dequeue_script</span><span class="pun">(</span><span class="hljs-string"><span class="str">'woocommerce'</span></span><span class="pun">)</span></span><span class="pun">;</span><span class="pln"> 
        </span><span class="hljs-function"><span class="pln">wp_dequeue_script</span><span class="pun">(</span><span class="hljs-string"><span class="str">'wc-add-to-cart'</span></span><span class="pun">)</span></span><span class="pun">;</span><span class="pln"> 
        </span><span class="hljs-function"><span class="pln">wp_dequeue_script</span><span class="pun">(</span><span class="hljs-string"><span class="str">'wc-cart-fragments'</span></span><span class="pun">)</span></span><span class="pun">;</span><span class="pln">

        </span><span class="hljs-comment"><span class="com">// Dequeue styles.  </span></span><span class="pln">
        </span><span class="hljs-function"><span class="pln">wp_dequeue_style</span><span class="pun">(</span><span class="hljs-string"><span class="str">'woocommerce-general'</span></span><span class="pun">)</span></span><span class="pun">;</span><span class="pln"> 
        </span><span class="hljs-function"><span class="pln">wp_dequeue_style</span><span class="pun">(</span><span class="hljs-string"><span class="str">'woocommerce-layout'</span></span><span class="pun">)</span></span><span class="pun">;</span><span class="pln"> 
        </span><span class="hljs-function"><span class="pln">wp_dequeue_style</span><span class="pun">(</span><span class="hljs-string"><span class="str">'woocommerce-smallscreen'</span></span><span class="pun">)</span></span><span class="pun">;</span><span class="pln"> 

        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">   
</span><span class="pun">}</span><span class="pln">

</span><span class="hljs-function"><span class="pln">add_action</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'wp_enqueue_scripts'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'load_woo_scripts_styles'</span></span><span class="pun">)</span></span><span class="pun">;</span></code></pre>

<p>
	يمكن حذف السكربتات عبر الدالة <code>wp_dequeue_script($handle)</code> باستخدام المرجعية التي سُجِّلَت فيها. وبشكلٍ شبيه، تمنع الدالة <code>wp_dequeue_style($handle)</code> تحميل صفحات الأنماط. لكن إن رأيتَ أنَّ ما سبق معقدٌ جدًا ولا تستطيع تنفيذه لبقية الإضافات، فأنصحك بتثبيت إضافة <a href="https://wordpress.org/plugins/plugin-organizer/" rel="external nofollow">Plugin Organizer</a> التي توفر لك القدرة على اختيار الإضافات التي ستُحمَّل مواردها بناءً على معايير معيّنة، مثل نوع المنشور أو اسمه. من الأفضل أيضًا تعطيل أيّة إضافات للتخزين المؤقت مثل <a href="https://wordpress.org/plugins/w3-total-cache/" rel="external nofollow">W3Cache</a> والتي فعّلتَها مسبقًا لإظهار التعديلات التي أجريتها.
</p>

<h2 id="الخطأ-الشائع-الثامن-الإبقاء-على-شريط-الإدارة">
	الخطأ الشائع الثامن: الإبقاء على شريط الإدارة
</h2>

<p>
	لماذا لا أترك شريط الإدارة الموجود أعلى الصفحات ظاهرًا لجميع المستخدمين؟ حسنًا، يمكنك السماح لمستخدميك بالوصول إلى الصفحات الإدارية، لكن ذاك الشريط لن يندمج بشكلٍ جميل مع القالب المختار. إذا أردتَ أن يبدو موقعك احترافيًا، فعليك تعطيل شريط الإدارة وتوفير صفحة مخصصة لإدارة الحساب:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8792_7" style="">
<code class="hljs javascript"><span class="pln">add_action</span><span class="pun">(</span><span class="hljs-string"><span class="str">'after_setup_theme'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'remove_admin_bar'</span></span><span class="pun">);</span><span class="pln">

</span><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">remove_admin_bar</span></span><span class="hljs-params"><span class="pun">()</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
  </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(!</span><span class="pln">current_user_can</span><span class="pun">(</span><span class="hljs-string"><span class="str">'administrator'</span></span><span class="pun">)</span><span class="pln"> </span><span class="pun">&amp;&amp;</span><span class="pln"> </span><span class="pun">!</span><span class="pln">is_admin</span><span class="pun">())</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    show_admin_bar</span><span class="pun">(</span><span class="hljs-literal"><span class="kwd">false</span></span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code></pre>

<p>
	ستؤدي الشيفرة السابقة عند إضافتها إلى ملف <code>functions.php</code> (التابع للقالب الذي تستعمله) إلى إظهار شريط الإدارة لمدراء الموقع فقط. يمكنك إضافة أيّة <a href="https://codex.wordpress.org/Roles_and_Capabilities" rel="external nofollow">أنواع من المستخدمين</a> إلى دالة <code>current_user_can($capability)</code> في الشيفرة السابقة لعدم إخفاء الشريط لهم.
</p>

<h2 id="الخطأ-الشائع-التاسع-عدم-استخدام-المرشح-gettext">
	الخطأ الشائع التاسع: عدم استخدام المرشِّح GetText
</h2>

<p>
	أستطيع استخدام CSS أو JavaScript لتغيير لافتة أحد الأزرار، ما المانع؟ حسنًا، أنت تضيف شيفرات عجيبة وتضيع وقتك سدى لتغيير تلك اللافتة، في حين يمكنك استعمال أحد أجمل المرشِّحات في ووردبريس المدعو <code>gettext</code>. وعند استخدامه مع <code>textdomain</code> التابع للإضافة (وهو مُعرِّف فريد الذي يضمن أن تستطيع ووردبريس التفريق بين جميع الترجمات المتوافرة)، فيمكننا حينها استعمال المرشح <code>gettext</code> لتعديل النص قبل توليد الصفحة. إذا بحثت في الشيفرة المصدرية عن الدالة <code>load_plugin_textdomain($domain)</code>فستجد اسم المجال (domain name) الذي ستحتاج له لتعديل النص. جميع الإضافات الاحترافية تضبط <code>textdomain</code> أثناء تهيئة الإضافة. أما إذا كان لديك نصٌ ما ضمن قالب وكنت تريد تغييره، فابحث عن <code>load_theme_textdomain($domain)</code>.<br>
	سنستعمل هنا إضافة WooCommerce مرةً أخرى كمثال، يمكننا تغيير النص الظاهر لترويسة «Related Products» بإضافة الشيفرة الآتية في ملف <code>functions.php</code> في قالبك:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8792_7" style="">
<code class="hljs php"><span class="hljs-function"><span class="hljs-keyword"><span class="kwd">function</span></span><span class="pln"> </span><span class="hljs-title"><span class="pln">translate_string</span></span><span class="hljs-params"><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$translated_text</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$untranslated_text</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$domain</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pln"> </span><span class="pun">{</span></span><span class="pln">
  </span><span class="hljs-keyword"><span class="kwd">if</span></span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$translated_text</span></span><span class="pln"> </span><span class="pun">==</span><span class="pln"> </span><span class="hljs-string"><span class="str">'Related Products'</span></span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="hljs-variable"><span class="pln">$translated_text</span></span><span class="pln"> </span><span class="pun">=</span><span class="pln"> __</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'Other Great Products'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'woocommerce'</span></span><span class="pln"> </span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="hljs-keyword"><span class="kwd">return</span></span><span class="pln"> </span><span class="hljs-variable"><span class="pln">$translated_text</span></span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

add_filter</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'gettext'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'translate_string'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-number"><span class="lit">15</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-number"><span class="lit">3</span></span><span class="pln"> </span><span class="pun">);</span></code></pre>

<p>
	سيُطبَّق المرشِّح السابق على النص المُترجَم عبر دوال <code>‎__()‎</code> و <code>‎_e()‎</code>، لطالما كان مجال النص (<code>textdomain</code>) مضبوطٌ ضبطًا صحيحًا أثناء استخدام تلك الدوال:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_8792_7" style="">
<code class="hljs scss"><span class="pln">_</span><span class="hljs-function"><span class="pln">e</span><span class="pun">(</span><span class="pln"> </span><span class="hljs-string"><span class="str">'Related Products'</span></span><span class="pun">,</span><span class="pln"> </span><span class="hljs-string"><span class="str">'woocommerce'</span></span><span class="pln"> </span><span class="pun">)</span></span><span class="pun">;</span></code></pre>

<p>
	ابحث في إضافتك عن دوال ترجمة النص لمعرفة ما هي السلاسل النصية التي يمكنك تخصيصها.
</p>

<h2 id="الخطأ-الشائع-العاشر-الإبقاء-على-بنية-الروابط-الدائمة-الافتراضية">
	الخطأ الشائع العاشر: الإبقاء على بنية الروابط الدائمة الافتراضية
</h2>

<p>
	تستخدم ووردبريس افتراضيًا بنية روابط دائمة (permalinks) تتضمن مُعرِّف (ID) المنشور لإظهار محتوى معيّن، لكن هذه البنية ليست جميلة ومستحيلة القراءة، وقد يحذف الزوار أجزاءً مهمةً من روابط URL أثناء نسخها. وأهم ما في الأمر أنَّ الروابط الدائمة الافتراضية ليست «صديقةً» لمحركات البحث. وتفعيل ما ندعوه «الروابط الدائمة الجميلة» سيؤدي إلى تضمين كلمات مفتاحية واسم المنشور في روابط URL مما يُحسِّن من تقييم محركات البحث لموقعنا. يمكن أن يكون تغيير بنية الروابط مهمةً شاقةً خصوصًا إذا كان موقعك يعمل منذ فترةٍ طويلةٍ ولديك مئات المنشورات التي تمت فهرستها من محركات البحث. لذا بعد أن تثبِّت ووردبريس فاحرص على تعديل بنية الروابط الدائمة ليستطيع الزائر معرفة محتوى الصفحة من رابطها بدلًا من عرض معرِّف المنشور فقط. عمومًا أستخدمُ اسم المنشور في الروابط الدائمة لأغلبية المواقع التي أبنيها، لكن يمكننا تخصيص الروابط الدائمة كيفما شئت، انظر إلى مقالة «<a href="https://academy.hsoub.com/apps/web/wordpress/%D8%A7%D9%84%D8%AF%D9%84%D9%8A%D9%84-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-%D9%84%D9%84%D8%B1%D9%88%D8%A7%D8%A8%D8%B7-%D8%A7%D9%84%D8%AF%D8%A7%D8%A6%D9%85%D8%A9-permalinks-%D9%81%D9%8A-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r91/" rel="">الدليل الشامل للروابط الدائمة في ووردبريس</a>».
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileid="21883" href="https://academy.hsoub.com/uploads/monthly_2017_02/2-image2.jpg.4e38408dec737add2ecba270b9d1261e.jpg" rel=""><img alt="2-image2.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="21883" data-unique="33okjf677" src="https://academy.hsoub.com/uploads/monthly_2017_02/2-image2.thumb.jpg.f10a116c03f655e4b921a4d28cd29535.jpg" style=""></a>
</p>

<h2 id="الخلاصة">
	الخلاصة
</h2>

<p>
	لم تضم هذه المقالة جميع الأخطاء التي يرتكبها مطورو ووردبريس (حتى الخبراء منهم)، الفكرة الأساسية التي عليك أن تفهمها من هذه المقالة هي أنَّك عليك ألّا تأخذ الطرق المختصرة (وهذه القاعدة تنطبق أيضًا على جميع منصات التطوير، ولا أقصد بها ووردبريس بعينها). الوقت الذي توفره باتباعك للأساليب البرمجية الضعيفة ستنفق أضعافه وأنت تحاول إصلاح المشاكل التي ستواجهك مستقبلًا. شاركنا بعض الأخطاء التي كنت تقع فيها وأخبرنا ما هي الدروس التي تعلمتها منها في التعليقات.<br>
	ترجمة –وبتصرّف– للمقال <a href="https://www.toptal.com/wordpress/top-wordpress-development-mistakes" rel="external nofollow">The 10 Most Common Mistakes That WordPress Developers Make</a> لصاحبه Andrew Schultz
</p>
]]></description><guid isPermaLink="false">429</guid><pubDate>Thu, 23 Feb 2017 06:27:00 +0000</pubDate></item><item><title>&#x62A;&#x639;&#x631;&#x641; &#x639;&#x644;&#x649; &#x648;&#x627;&#x62C;&#x647;&#x629; HTTP &#x627;&#x644;&#x628;&#x631;&#x645;&#x62C;&#x64A;&#x629; &#x641;&#x64A; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633; &#x648;&#x643;&#x64A;&#x641;&#x64A;&#x629; &#x627;&#x633;&#x62A;&#x62E;&#x62F;&#x627;&#x645;&#x647;&#x627;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D8%AA%D8%B9%D8%B1%D9%81-%D8%B9%D9%84%D9%89-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-http-%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D8%A9-%D9%81%D9%8A-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D9%88%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85%D9%87%D8%A7-r393/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2016_12/wp-http-api.png.355506176903fd56178c47a0b69d6f71.png" /></p>

<p>
	أصبحت واجهات REST البرمجية أكثر انتشارًا بين المطوّرين، نظرًا لأنها توفّر واجهة بسيطة، موحّدة وواضحة لخدمات الطرف الثالث third-party مثل Twitter، MailChimp وGitHub.
</p>

<p>
	ومع ازدياد شهرة واجهة ووردبريس البرمجية (المتوفرة <a href="http://v2.wp-api.org/" rel="external nofollow">عبر إضافة</a>) فإن الوقت قد حان لنتعلم حول واجهة HTTP البرمجية في ووردبريس، وكيفية عملها واستخداماتها.
</p>

<h2>
	ما هي واجهة HTTP في ووردبريس؟
</h2>

<p>
	لن يكون من المستغرب القول بأنها طريقة لإرسال واستقبال الرسائل بواسطة HTTP – لغة شبكة الويب. حيث يقوم المتصفح بإرسال واستقبال الرسائل طوال الوقت وبهذا الشكل يتم استقبال صفحات الويب. ويمكن من خلال واجهة REST البرمجية، يمكن باستخدام رسائل HTTP القيام بأشياء أكثر كتعديل منشور، حذف حساب مستخدم أو نشر وصفة جديدة على موقعك.
</p>

<p>
	لهذا السبب تعتبر واجهة ووردبريس البرمجية مهمة جدًا، فهي تسمح بفصل التطبيق من جهة المستخدم عن النواة البرمجية الخاصة بووردبريس. ولاستخدامها، تحتاج أن تكون معتادًا على إرسال طلبات HTTP واستقبال الأجوبة، وهذا هو أساس عمل واجهة HTTP البرمجية.
</p>

<p>
	وهناك العديد من الطرق لإرسال طلبات HTTP، حيث توفّر واجهة HTTP البرمجية طريقة موحّدة باستخدام مجموعة من التوابع المساعدة والتي سنطّلع عليها بعد قليل.
</p>

<h2>
	طرق HTTP ومصادرها
</h2>

<p>
	ترتكز HTTP حول الطرق methods (تسمّى أحيانًا بالأفعال verbs) والمصادر resources. تحدّد المصادر العنصر الذي سيتم تنفيذ العملية عليه، وتحدّد الطريقة نوع العملية التي سيتم تنفيذها.
</p>

<p>
	ويعتبر العنوان URL هو المصدر الذي يشير إلى الغرض على شبكة الويب، كمنشور على سبيل المثال. وتوجد العديد من <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html" rel="external nofollow">الطرق</a>، لكن الأهم فيها هي GET, POST, PUT و DELETE.
</p>

<p>
	ولا بد أن لديك الكثير من الخبرة مع GET فهذه الطريقة هي المستخدمة في الحصول على المصادر، فمثلًا عند استعراض مقال في المتصفح يتم إرسال طلب GET إلى عنوان المقال وليكن مثلًا <a href="https://premium.wpmudev.org/blog/using-the-wordpress-http-api/." ipsnoembed="true" rel="external nofollow">https://premium.wpmudev.org/blog/using-the-wordpress-http-<abbr title="Application Programming Interface | واجهة برمجية">api</abbr>/.</a> أما طلبات PUT فتستخدم لتعديل المصادر، وتستخدم طلبات POST لإنشاء مصادر جديدة، وتستخدم طلبات DELETE لحذف مصادر موجودة مسبقًا.
</p>

<p>
	ولو كان لدى موقع WPMU DEV واجهة REST برمجية، فربما كان من الممكن أن يقوم المدير بإرسال طلب DELETE لحذف المقال على الرابط <a href="https://premium.wpmudev.org/blog/wordpress-http-api%D8%8C" ipsnoembed="true" rel="external nofollow">https://premium.wpmudev.org/blog/wordpress-http-<abbr title="Application Programming Interface | واجهة برمجية">api</abbr>،</a> وهذا الأمر مفيد جدًا للمواقع الكبيرة التي تملك برامج إدارة على الهواتف الذكية.
</p>

<h2>
	مثال عن طلب HTTP بسيط
</h2>

<p>
	للقيام بإرسال طلب GET بسيط على سبيل التجربة، سنقوم باستخدام التابع wp_remote_get() الذي يملك مُعاملين، المُعامل الأول هو رابط المصدر، والمُعامل الثاني هو مصفوفة اختيارية optional من الخيارات التي من الممكن استخدامها لتحديد بعض التفاصيل.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_7424_7">
<span class="pln">$test </span><span class="pun">=</span><span class="pln"> wp_remote_get</span><span class="pun">(</span><span class="pln"> </span><span class="str">'http://google.com'</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
echo </span><span class="str">"&lt;pre&gt;"</span><span class="pun">;</span><span class="pln">
var_dump</span><span class="pun">(</span><span class="pln">$test</span><span class="pun">);</span><span class="pln">
echo </span><span class="str">"&lt;/pre&gt;"</span><span class="pun">;</span></pre>

<p>
	يقوم المثال السابق بجلب الصفحة الرئيسية لموقع جوجل، ومن ثم يتم طباعة محتوى المتغير test الذي يحوي على جواب الطلب الذي أرسله موقع جوجل – حيث يمكن رؤية جميع العناصر التي يحتويها.
</p>

<p>
	تحتوي الترويسات headers على المزيد من المعلومات عن كل رسالة. وقد تطلب منك بعض واجهات REST البرمجية أن تقوم بإرسال معلومات محددة في الترويسات عندما ترسل الطلب.
</p>

<p>
	يحتوي الجواب response على رمز الحالة status code وعبارة قد تكون معروفة بالنسبة لك كأخطاء 404، أو خطأ في معالجة الطلب 500 أو تحويل من النوع 301 أو 302. يحتوي موقع W3.org على جميع رموز أخطاء HTTP المعرّفة والمشروحة، ويعتبر مصدرًا مفيدًا إن احتجت أن تعرف ما يعني أي خطأ.
</p>

<p>
	بإمكانك أيضا الاطّلاع على هذا المقال على أكاديمية حسوب لتعرف المزيد حول هذه الرّموز:
</p>

<p>
	<a href="https://academy.hsoub.com/programming/general/%D8%B1%D9%85%D9%88%D8%B2-%D8%A7%D9%84%D8%A5%D8%AC%D8%A7%D8%A8%D8%A9-%D9%81%D9%8A-http-r75/" rel="">رموز الإجابة في HTTP</a>
</p>

<p>
	يحتوي الجسم body على الجواب وهو المكان الذي تحتاج أن تنظر إليه بحثًا عن النتيجة المطلوبة. في حالة المثال السابق، فإننا نحصل على وسوم HTML التي تشكّل الصفحة الرئيسية، ولكن عند التعامل مع واجهات REST البرمجية فمن الشائع أن نحصل على نص بصيغة JSON. وعادة ما تطلب الواجهات البرمجية APIs أن يتم إضافة نص محدّد إلى الجسم عند إرسال طلبات أيضًا.
</p>

<p>
	يحتوي قسم cookies على أي كعكات تم استلامها مع الرسالة.
</p>

<p>
	كما ترى، فإن إرسال طلب باستخدام واجهة HTTP البرمجية أمر بسيط جدًا. ما يجعل العمل مع HTTP معقّد نوعًا ما هو أن واجهات REST البرمجية قد تكون حساسة جدًا لصيغة البيانات المدخلة (وهو أمر جيّد) لذا فإن تجاوزت سطرًا عند دراسة توثيق الواجهة البرمجية قد ينتهي بك الأمر ببرمجية لا تعمل كما ترغب.
</p>

<h2>
	العمل مع الواجهات البرمجية
</h2>

<p>
	أعتقد بأنه من الآمن القول بأن معظمكم سيستخدم HTTP للتعامل مع واجهات REST البرمجية في شبكة الويب، وفي هذه الحالة سنحتاج لاستخدام المعامل الثاني لتحديد بعض الأمور، كالاستيثاق وتجنب بعض الأخطاء الشائعة. لنبدأ بمثال بسيط – استعادة البيانات من لوحة Pinterest.
</p>

<p>
	تتطلب جميع الواجهات البرمجية الجيّدة تنفيذ عملية استيثاق للتعريف عن المستخدم الذي يرسل الطلب، لكنّنا سنغش قليلًا في هذا المثال باستخدام <a href="https://developers.pinterest.com/tools/access_token/" rel="external nofollow">مولّد رموز الأمان الخاص بـ Pinterest</a>. بعد إكمال الاستيثاق ستحصل على رمز أمان يمكن استخدامه في المثال التالي، حيث سنقوم بإنشاء طلب لجلب وعرض قائمة بمنشورات Pinterest.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_7424_9">
<span class="pln">$request </span><span class="pun">=</span><span class="pln"> wp_remote_get</span><span class="pun">(</span><span class="pln"> </span><span class="str">'https://<abbr title="Application Programming Interface | واجهة برمجية">api</abbr>.pinterest.com/v1/boards/marticz/home-office/pins/?access_token=&lt;your access token&gt;'</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
$pins </span><span class="pun">=</span><span class="pln"> json_decode</span><span class="pun">(</span><span class="pln"> $request</span><span class="pun">[</span><span class="str">'body'</span><span class="pun">],</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
</span><span class="kwd">if</span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln">empty</span><span class="pun">(</span><span class="pln"> $pins</span><span class="pun">[</span><span class="str">'data'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
	echo </span><span class="str">'&lt;ul&gt;'</span><span class="pun">;</span><span class="pln">
	</span><span class="kwd">foreach</span><span class="pun">(</span><span class="pln"> $pins</span><span class="pun">[</span><span class="str">'data'</span><span class="pun">]</span><span class="pln"> </span><span class="kwd">as</span><span class="pln"> $pin </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
		echo </span><span class="str">'&lt;li&gt;&lt;a href="'</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> $pin</span><span class="pun">[</span><span class="str">'url'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="str">'"&gt;'</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> $pin</span><span class="pun">[</span><span class="str">'note'</span><span class="pun">].</span><span class="pln"> </span><span class="str">'&lt;/a&gt;&lt;/li&gt;'</span><span class="pun">;</span><span class="pln">
	</span><span class="pun">}</span><span class="pln">
	echo </span><span class="str">'&lt;/ul&gt;'</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></pre>

<p>
	لو قمنا بنسخ المثال السابق ولصقه في صفحة content-page.php في قالب <a href="https://wordpress.org/themes/twentyfifteen/" rel="external nofollow">Twenty Fifteen</a> لتجربته فإن النتيجة هو الحصول على لائحة بالمنشورات من لوحة Pinterest حول <a href="https://www.pinterest.com/marticz/home-office/" rel="external nofollow">المكاتب الشخصية في المنزل</a>.
</p>

<p style="text-align: center;">
	<img alt="001-pins.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="20009" data-unique="kbr6hgmfu" src="https://academy.hsoub.com/uploads/monthly_2016_12/001-pins.jpg.9d7b61403bc17c5d9c95b8b2a40cd035.jpg" style=""></p>

<p>
	لا تنس أن تستبدل <span style="font-family:Courier New,Courier,monospace;">&lt;your access token&gt;</span> في المثال السابق برمز الأمان الذي حصلت عليه.
</p>

<p>
	يقوم السطر الثاني في المثال بفك ترميز جسم الجواب من JSON إلى شكله الأساسي كمصفوفة ونقوم بإنشاء حلقة loop تقوم بطباعة محتوى عنصر المصفوفة<span style="font-family:Courier New,Courier,monospace;"> $pins['data']</span>.
</p>

<h2>
	الاستيثاق
</h2>

<p>
	يقع العديد من الأشخاص في عثرات في هذه المرحلة لأنها تتطلب خطوة إضافية على الأقل وربما بعض الترويسات الإضافية أيضًا.
</p>

<p>
	ولننظر إلى واجهة تويتر البرمجية على سبيل المثال، وتحديدًا إلى الاستيثاق الخاص بالتطبيقات، الذي يمكنك استخدامه لاستيثاق تطبيقك مع تويتر.
</p>

<h3>
	قراءة التوثيق
</h3>

<p>
	إن أول خطأ قد يتم ارتكابه هو عدم قراءة التوثيق بشكل جيّد. ولو كنت مبرمجًا متمرسًا في واجهات REST البرمجية فيمكنك <a href="https://dev.twitter.com/oauth/application-only" rel="external nofollow">القفز مباشرة إلى الجزء حول الاستيثاق</a>، ولو فعلت هذا فقد لا تنتبه إلى سطر يقول:
</p>

<blockquote class="ipsQuote" data-ipsquote="">
	<div class="ipsQuote_citation">
		Quote
	</div>

	<div class="ipsQuote_contents ipsClearfix">
		<p>
			إن جسم الطلب يجب أن يكون grant_type=client_credentials
		</p>
	</div>
</blockquote>

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

<h3>
	إضافة ترويسات ومعاملات أخرى
</h3>

<p>
	بعد اتباع التوجيهات في التوثيق حرفيًّا، قمت بإنشاء طلب POST، ينبغي أن يؤدي إلى توليد رمز أمان للوصول من أجلي، ويبدو الكود على الشكل:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_4600_20">
<span class="pln">$key </span><span class="pun">=</span><span class="pln"> base64_encode</span><span class="pun">(</span><span class="pln"> urlencode</span><span class="pun">(</span><span class="pln"> </span><span class="str">"n8KP16uvGZA6xvFTtb8IAA:i4pmOV0duXJv7TyF5IvyFdh5wDIqfJOovKjs92ei878"</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">

$request </span><span class="pun">=</span><span class="pln"> wp_remote_post</span><span class="pun">(</span><span class="str">'https://<abbr title="Application Programming Interface | واجهة برمجية">api</abbr>.twitter.com/oauth2/token'</span><span class="pun">,</span><span class="pln"> array</span><span class="pun">(</span><span class="pln">

	</span><span class="str">'headers'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> array</span><span class="pun">(</span><span class="pln">

		</span><span class="str">'Authorization'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'Basic '</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> $key</span><span class="pun">,</span><span class="pln">

		</span><span class="str">'Content-Type'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'application/x-www-form-urlencoded;charset=UTF-8'</span><span class="pln">

	</span><span class="pun">),</span><span class="pln">

	</span><span class="str">'body'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'grant_type=client_credentials'</span><span class="pun">,</span><span class="pln">

	</span><span class="str">'httpversion'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'1.1'</span><span class="pln">

</span><span class="pun">));</span><span class="pln">

$token </span><span class="pun">=</span><span class="pln"> json_decode</span><span class="pun">(</span><span class="pln"> $request</span><span class="pun">[</span><span class="str">'body'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">);</span><span class="pln">

echo </span><span class="str">"&lt;pre&gt;"</span><span class="pun">;</span><span class="pln"> var_dump</span><span class="pun">(</span><span class="pln">$token</span><span class="pun">);</span><span class="pln"> echo </span><span class="str">"&lt;/pre&gt;"</span><span class="pun">;</span><span class="pln">
</span></pre>

<p>
	إن الخطوة الأولى هو ترميز رمز أمان الوصول والكلمة السرّية بصيغة <a href="http://www.w3schools.com/tags/ref_urlencode.asp" rel="external nofollow">URL encoding</a>. قمت أيضًا بإضافة ترويستين، واحدة ترويسة استيثاق تحوي على بيانات الوصول. أما الترويسة الثانية فهي ترويسة نوع المحتوى content type، والتي يطلب توثيق تويتر إضافتها.
</p>

<p>
	إضافة لما سبق، قمت بملء جسم الطلب تمامًا كما ذكرت الملاحظة السابقة حول <span style="font-family:Courier New,Courier,monospace;">grant_type=client_credentials</span> وتم إضافة إصدار HTTP كما يطلب توثيق تويتر أيضًا. سيحتوي الجواب بالإضافة للعديد من المعلومات الأخرى على رمز أمان الوصول في جسم الجواب، وسنحتاج لرمز الأمان هذا في جميع الطلبات اللاحقة المرسلة إلى الواجهة البرمجية الخاصة بتويتر.
</p>

<p style="text-align: center;">
	<img alt="002-token.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="20010" data-unique="2pny5f0hb" src="https://academy.hsoub.com/uploads/monthly_2016_12/002-token.jpg.ee67939d8e1e2c9eaac8ec3965954cef.jpg" style=""></p>

<h3>
	تخزين رمز أمان الوصول
</h3>

<p>
	إن رمز الأمان صالح لبعض الوقت، ويعتبر طلبه مجدّدًا هدرًا غير ضروري عند تحميل كل صفحة أو عندما يحتاج تطبيقك أن يقوم بعملية ما وسيؤدي إلى استهلاك عدد الطلبات المسموح بسرعة. يمكن في ووردبريس استخدام عابرة transient لتخزين قيمة رمز الأمان ومن ثم استخدام العابرة عند كل طلب لاحق للواجهة البرمجية.
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_7424_11">
<span class="pln">$token </span><span class="pun">=</span><span class="pln"> get_transient</span><span class="pun">(</span><span class="pln"> </span><span class="str">'twitter_access_token'</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
$token </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> empty</span><span class="pun">(</span><span class="pln"> $token </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">?</span><span class="pln"> get_twitter_access_token</span><span class="pun">()</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> $token</span><span class="pun">;</span><span class="pln">
$request </span><span class="pun">=</span><span class="pln"> wp_remote_get</span><span class="pun">(</span><span class="str">'https://<abbr title="Application Programming Interface | واجهة برمجية">api</abbr>.twitter.com/1.1/followers/ids.json?screen_name=danielpataki&amp;count=5'</span><span class="pun">,</span><span class="pln"> array</span><span class="pun">(</span><span class="pln">
	</span><span class="str">'headers'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> array</span><span class="pun">(</span><span class="pln">
		</span><span class="str">'Authorization'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'Bearer '</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> $token</span><span class="pun">,</span><span class="pln">
		</span><span class="str">'Content-Type'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'application/x-www-form-urlencoded;charset=UTF-8'</span><span class="pln">
	</span><span class="pun">),</span><span class="pln">
	</span><span class="str">'httpversion'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'1.1'</span><span class="pln">
</span><span class="pun">));</span><span class="pln">
$token </span><span class="pun">=</span><span class="pln"> json_decode</span><span class="pun">(</span><span class="pln"> $request</span><span class="pun">[</span><span class="str">'body'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">);</span></pre>

<p>
	سيؤدي إرسال الطلب السابق إلى واجهة تويتر البرمجية إلى عرض 5 من متابعيّ على تويتر (قائمة بسيطة لأرقام حساباتهم Ids). وكما يظهر في المثال السابق، فإنني أقوم بجلب القيمة التي خزّنتها في العابرة فإن لم تكن موجودة سأقوم باستدعاء التابع get_twitter_access_token() للحصول على رمز أمان جديد ومن ثم إضافته إلى العابرة كي أستخدمه في الطلبات اللاحقة.
</p>

<p>
	تجدر الإشارة إلى أن هذه الطريقة تهدف فقط إلى إظهار آلية التنفيذ وليست أفضل طريقة للتنفيذ، وكسيناريو أبسط كنت لأقوم بوضع جميع العبارات الشرطية IFs داخل التابع get_twitter_access_token() الذي سيقوم بتنفيذ جميع الشيفرة السابقة ضمنيًا.
</p>

<h3>
	التوابع المساعدة في واجهة HTTP البرمجية
</h3>

<p>
	الآن وبعد أن حصلنا على لمحة جيدة حول هدف المقال، دعونا نلق نظرة على التوابع التي ستساعدك في واجهة HTTP البرمجية في ووردبريس. هناك 4 توابع يمكن بواسطتها تنفيذ طلبات:
</p>

<p style="text-align: left;">
	<span style="font-family:Courier New,Courier,monospace;">wp_remote_get()</span>
</p>

<p style="text-align: left;">
	<span style="font-family:Courier New,Courier,monospace;">wp_remote_post()</span>
</p>

<p style="text-align: left;">
	<span style="font-family:Courier New,Courier,monospace;">wp_remote_head()</span>
</p>

<p style="text-align: left;">
	<span style="font-family:Courier New,Courier,monospace;">wp_remote_request()</span>
</p>

<p>
	ومن الواضح تمامًا وظيفة كل تابع، أما التابع الأخير <span style="font-family:Courier New,Courier,monospace;">wp_remote_request()</span> فهو تابع عام يمكنك استخدامه مع أي طريقة HTTP method.
</p>

<p>
	أما التوابع الخمسة التالية فتسمح لك بالحصول على جواب على الطلب بسهولة باستخدام توابع قياسية عوضًا عن الخوض في التعامل مع المصفوفات وعناصرها.
</p>

<p style="text-align: left;">
	<span style="font-family:Courier New,Courier,monospace;">wp_remote_retrieve_body()</span>
</p>

<p style="text-align: left;">
	<span style="font-family:Courier New,Courier,monospace;">wp_remote_retrieve_header()</span>
</p>

<p style="text-align: left;">
	<span style="font-family:Courier New,Courier,monospace;">wp_remote_retrieve_headers()</span>
</p>

<p style="text-align: left;">
	<span style="font-family:Courier New,Courier,monospace;">wp_remote_retrieve_response_code()</span>
</p>

<p style="text-align: left;">
	<span style="font-family:Courier New,Courier,monospace;">wp_remote_retrieve_response_message()</span>
</p>

<p>
	أيضًا يبين اسم كل تابع الهدف الوظيفي له بسهولة، وينصح عند الإمكان باستخدام هذه التوابع عوضًا عن التعامل مع المصفوفات يدويًا، حيث ستسمح هذه الطريقة الموحّدة لمطوّرين آخرين بفهم البرمجية بسهولة واستخدام <a href="https://academy.hsoub.com/programming/php/wordpress/%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D8%A7%D9%84%D8%AE%D9%8F%D8%B7%D9%91%D8%A7%D9%81%D8%A7%D8%AA-hooks-r40/" rel="">الخطافات hooks</a> إن أصبحت متاحة في المستقبل.
</p>

<h2>
	الخلاصة
</h2>

<p>
	كما ترى فإن التعامل مع واجهة REST البرمجية سهل باستخدام واجهة HTTP البرمجية في ووردبريس وبعض توابع ووردبريس كالعبّارات. أنصح بشدّة تجربة هذا الأمر لأن عملية التطوير في ووردبريس تسير بثقة باتجاه العالم المُقاد باستخدام الواجهات البرمجية وعليك أن تقفز إلى الموكب قبل فوات الأوان.<br>
	 
</p>

<p>
	إن كان لديك المزيد من الأسئلة حول استخدام واجهة HTTP البرمجية أو لديك بعض الأفكار حول كيفية استخدامها، فلا تتردد بمناقشة الأمر في قسم التعليقات في الأسفل.
</p>

<p>
	ترجمة -وبتصرّف- للمقال <a href="https://premium.wpmudev.org/blog/wordpress-http-api/" rel="external nofollow">How to Use the WordPress HTTP <abbr title="Application Programming Interface | واجهة برمجية">API</abbr></a> لصاحبه Daniel Pataki.
</p>
]]></description><guid isPermaLink="false">393</guid><pubDate>Sun, 16 Oct 2016 11:32:00 +0000</pubDate></item><item><title>&#x645;&#x627; &#x627;&#x644;&#x630;&#x64A; &#x62A;&#x62D;&#x62A;&#x627;&#x62C; &#x645;&#x639;&#x631;&#x641;&#x62A;&#x647; &#x642;&#x628;&#x644; &#x627;&#x644;&#x634;&#x631;&#x648;&#x639; &#x641;&#x64A; &#x627;&#x644;&#x62A;&#x637;&#x648;&#x64A;&#x631; &#x639;&#x644;&#x649; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D9%85%D8%A7-%D8%A7%D9%84%D8%B0%D9%8A-%D8%AA%D8%AD%D8%AA%D8%A7%D8%AC-%D9%85%D8%B9%D8%B1%D9%81%D8%AA%D9%87-%D9%82%D8%A8%D9%84-%D8%A7%D9%84%D8%B4%D8%B1%D9%88%D8%B9-%D9%81%D9%8A-%D8%A7%D9%84%D8%AA%D8%B7%D9%88%D9%8A%D8%B1-%D8%B9%D9%84%D9%89-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r325/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2016_05/wordpress-getting-started.png.f08d4ca57699c7881fb5e3a8cd981bf1.png" /></p>
<div id="wmd-preview-section-16">
	<p id="ما-الذي-تحتاج-معرفته-قبل-الشروع-في-التطوير-على-ووردبريس">
		هل أنت مهتم بتعلم PHP وبناء قوالب وملحقات خاصة بك على ووردبريس؟ أو ربما أنت مُهتمّ بتعلّم القليل الذي يُمكنك من إدخال التّعديلات التي تحتاجها على مواقعك ومدوّناتك التي تعتمد على ووردبريس.
	</p>

	<p>
		أيّا كان وضعك، هناك أمور يجب عليك أن تعرفها قبل أن تغوص في مجال تطوير ووردبريس. سنحاول في هذا المقال إعطاءك فكرة واضحة عليها. 
	</p>

	<p style="text-align: center;">
		<img alt="wordpress-getting-started.png" class="ipsImage ipsImage_thumbnailed" data-fileid="15931" data-unique="fyivq1oev" src="https://academy.hsoub.com/uploads/monthly_2016_05/wordpress-getting-started.png.66ef90b8ed4811c847998b779cf68742.png">
	</p>
</div>

<div id="wmd-preview-section-17">
	<h2 id="كيف-يعمل-ووردبريس">
		كيف يعمل ووردبريس؟
	</h2>

	<p>
		لنفهم ماذا وكيف يمكننا التطوير في ووردبريس، سنلقي أولا نظرة سريعة على آلية عمل ووردبريس.
	</p>

	<p>
		يتكون ووردبريس من ثلاثة عناصر رئيسية: النواة الأساسية والقوالب والمُلحقات.
	</p>

	<p>
		تحتوي النواة على جميع الوظائف الأساسية التي تشكل نظام إدارة المحتوى لووردبريس، وهذه الشيفرات البرمجية تتضمن كل شيء من البنية التحتية (backend) للإدارة إلى دوال جدولة المشاركات والتأكد من قوة كلمة المرور والسماح بإنشاء مستخدمين وغيرها.
	</p>

	<p>
		في حين أن النواة الأساسية (core) مسؤولة عن البنية التحتية للموقع وكيفية التعامل معها، فإن القوالب مسؤولة عن الواجهة الأمامية للموقع وكيفية ظهوره.
	</p>

	<p>
		نستخدم <a data-ss1614253417="1" href="https://academy.hsoub.com/apps/web/wordpress/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D9%84%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%81-%D8%A7%D9%84%D8%B9%D9%85%D9%84-%D8%B9%D9%84%D9%89-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A5%D8%AF%D8%A7%D8%B1%D8%A9-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r93/" rel="">إدارة ووردبريس</a> (WordPress admin) لإنشاء المشاركات والصفحات وبقية محتوى الموقع، وأما بالنسبة لكيفية ظهور هذه الأشياء للزائر فهو أمر متروك للقالب theme، لذلك فإن هذا سيعطيك قوة كبيرة للتحكم في موقعك، فقد ترغب بتثبيت وتفعيل القوالب الموجودة أو حتى تطوير قوالبك المخصصة. 
	</p>

	<p>
		أبسط طريقة لوصف المُلحقات plugins هي أنها توفر وظائف إضافية للووردبريس، ولفعل ذلك، قد تعدّل المُلحق الشيفرة البرمجية للواجهة الأمامية أو البنية التحتية للموقع، وأبسط مثال لذلك هي المُلحق الذي يضيف زر لتغريدة تويتر، وقد تُنشئ أيضا صفحة إعدادات جديدة في البنية التحتية لقائمة الإدارة والتي ستمكنك من إعداد بعض الخيارات الافتراضية لتغريدة المستخدم ويمكنها إضافة نفسها إلى الواجهة الأمامية للموقع، والتي سيكون موقعها في الغالب تحت التدوينة (post).
	</p>
</div>

<div id="wmd-preview-section-18">
	<h2 id="مجالات-التطوير">
		مجالات التطوير
	</h2>

	<p>
		بقدر تقدمك في تطوير ووردبريس، ستتمكن من تطوير أي واحدة من المكونات الرئيسية المذكورة أعلاه بالإضافة إلى تطبيقات مستقلة بمساعدة REST <abbr title="Application Programming Interface | واجهة برمجية"><abbr title="Application Programming Interface | واجهة برمجية">API</abbr></abbr> الجديدة وسنذكر المزيد عن هذا الموضوع بعد قليل.
	</p>

	<p>
		مهما كان ما تريد فعله مع ووردبريس، أنصحك باتباع منهج في دراستك، هذه القائمة ستساعدك على التعرف على الأنظمة التي تحتاج إلى معرفتها قبل بدء تعلمك المزيد حول المجال الذي اخترته:
	</p>

	<ol>
		<li>
			القوالب 
		</li>
		<li>
			المُلحقات 
		</li>
		<li>
			REST <abbr title="Application Programming Interface | واجهة برمجية"><abbr title="Application Programming Interface | واجهة برمجية">API</abbr></abbr> 
		</li>
		<li>
			النواة
		</li>
	</ol>
</div>

<div id="wmd-preview-section-19">
	<h3 id="القوالب">
		القوالب
	</h3>

	<p>
		إن تعلم كيفية عمل القوالب وتطويرها سيسمح لك باحتراف إنشاء المواقع بدءا من المواقع الصفحة الواحدة إلى مواقع المحتوي الحيوي الثقيل، وستسمح لك أيضا بالحصول على المزيد من العملاء (إذا كان هذا ما يهمك) أو حتى بيع القوالب تجاريا.
	</p>

	<p>
		يوجد العديد من مطوري القوالب الناجحين في أسواق مثل Themeforest و Mojo Marketplace وغيرها.
	</p>

	<p>
		ففي وقت كتابة هذا المقال، أشهر قالب على موقع Themeforest تم بيع 1377 نسخة منه في أسبوع أي أكثر من $81,000 في أسبوع واحد فقط! يمكنك الحصول على الكثير من الأموال إذا كنت تستطيع تطوير قالب مميزة. على الرغم من أن هذا المبلغ لا يحققه جميع مطوري القوالب، وربما لن تصبح مليونيرًا بين عشيّة وضحاها من إنشاء القوالب، لكن يمكنك الحصول على مبلغ مالي جيد من القوالب إذا كنت تقوم بالأمر بالشكل الصحيح.
	</p>

	<p>
		إذا أردت رؤية بعض الأمثلة عن القوالب الشهيرة، فألق نظرة على الأسواق التي ذكرناها أعلاه، أو على <a data-ss1614253417="1" href="https://wordpress.org/themes/" rel="external nofollow">قسم قوالب ووردبربس</a> حيث جميع القوالب مجانية، فالكثير من مطوري القوالب يصدرون أعمالهم الأولى في هذا القسم.
	</p>

	<p>
		يمكنك تعلم كيفية إنشاء قوالب ووردبريس في أكاديمية حسوب من خلال سلسلة الدروس <a data-ss1614253417="1" href="https://academy.hsoub.com/search/?tags=%D9%85%D8%AF%D8%AE%D9%84+%D8%A5%D9%84%D9%89+%D8%AA%D8%B7%D9%88%D9%8A%D8%B1+%D9%82%D9%88%D8%A7%D9%84%D8%A8+%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3" rel="">مدخل إلى تطوير قوالب ووردبريس</a>.
	</p>
</div>

<div id="wmd-preview-section-20">
	<h3 id="الملحقات-plugins">
		الملحقات plugins
	</h3>

	<p>
		بطريقة ما، تعتبر المُلحقات شريان حياة ووردبريس، فهي تحوله إلى كل شيء من منتدى إلى شبكة اجتماعية أو منصة للتجارة الإلكترونية وغيرها باستخدام ضغطة زر واحدة، فالمُلحقات تعطيك تحكمًا كاملًا بجميع جوانب نظام ووردبريس، وتسمح لك بتعديل ما تشاء، وسيساعدك هذا كثيرا عند إنشاء مواقع ووردبريس للعملاء.
	</p>

	<p>
		كما هي الحال مع القوالب، فالمُلحقات تملك أيضا أسواقا وفي العادة يتم إدارتها من نفس الشركات التي تدير أسواق القوالب. يعتبر سوق CodeCanyon على سبيل المثال أكبر سوق للملحقات حيث يملك أكثر من 4000 ملحق متاحة للشراء.
	</p>

	<p>
		على الرغم من أن المبيعات ستكون أقل من القوالب إلا أنه يمكنك ربح الكثير إذا أنشأت ملحقًا جيدًا.
	</p>

	<p>
		يملك موقع ووردبريس <a data-ss1614253417="1" href="https://wordpress.org/plugins/" rel="external nofollow">قسمًا للملحقات المجانية</a> ويحتوي على أكثر من 40000 ملحق، وهو بذلك مصدر كبير للأدوات والإلهام والأمثلة على الشيفرات البرمجية المميزة (والشيفرات البرمجية السيئة للأسف).
	</p>

	<p>
		يمكنك تعلم كيفية إنشاء ملحقات وإضافات ووردبريس في أكاديمية حسوب من خلال سلسلة الدروس <a data-ss1614253417="1" href="https://academy.hsoub.com/search/?tags=%D9%85%D8%AF%D8%AE%D9%84+%D8%A5%D9%84%D9%89+%D8%A8%D8%B1%D9%85%D8%AC%D8%A9+%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA+%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3" rel="">مدخل إلى برمجة إضافات ووردبريس</a>.
	</p>
</div>

<h2 id="-wordpress-org-wordpress-com">
	ما بين WordPress.org و WordPress.com
</h2>

<p>
	لقد أُطلق نظام ووردبريس بطريقتين مختلفتين، حيث كانت الأولى عن طريق <a data-ss1614253417="1" href="http://WordPress.com" rel="external nofollow">WordPress.com</a>؛ أمّا الثّانية، فعبر استخدام <a data-ss1614253417="1" href="http://WordPress.org" rel="external nofollow">WordPress.org</a>، وهذا نظرًا لإمكانيّة احتساب ووردبريس موقعًا للإنترنت، ومنصّة أعمال في آنٍ واحد، حيث يمكنك إنشاء حساب مجّاني في WordPress.com، والحصول على نسخة مُستضافة من نظام ووردبريس لخدمة موقعك، بحيث ستتحمل شركة الاستضافة مسؤوليّة صيانة الخادم وتثبيت ووردبريس عليه، ممّا يوفر عليك بعض العبء، ويتيح لك التّركيز على إنشاء المحتوى.
</p>

<p>
	تجني WordPress.com أرباحها عبر تقاضيها لأموال مقابل ترقيتها للمزايا، فعلى سبيل المثال إذا رغبت في استخدام اسم النّطاق الخاصّ بك في WordPress.com، فستحتاج إلى دفع القليل من الرسوم، وهناك الكثير من الشّركات التي تدفع لمنصّة WordPress.com لأجل استضافة مواقع ووردبريس ضخمة، مثل: <strong>بي بي سي أمريكا</strong> (BBC America)، و<strong>مجلة نيويوركر</strong> (The New Yorker Magazine)، ومدونة <strong>ستار وورز</strong> (Star Wars) الرّسمية.
</p>

<p>
	بسبب حاجة ووردبريس لدعم مختلف أنواع وأحجام المواقع، تمتلك منصّتها العديد من القيود المتعلّقة بتخصيص المواقع على نحو شخصيّ، فهناك عدد محدود من القوالب التي تتحكم بتنسيق ومظهر المواقع، كما يوجد عدد قليل من الإضافات التي تُعزّز من أداء وظائفه؛ أمّا WordPress.org فهو الموقع الرّسمي لنظام إدارة المحتوى ووردبريس الذي تستضيفه بنفسك.
</p>

<p>
	نقصد باستضافة ووردبريس عمليّة تنزيل نسخة من برنامج ووردبريس، وتثبيته على خادم إنترنت، والذي هو بالمقابل عبارة عن حاسب يستخدم برمجيّات خاصّة تسمح له بتوفير الوصول إلى مواقع الإنترنت المُخزّنة به لجميع المستخدمين على الإنترنت، حيث يمكن لهذا الخادم أن يكون مجرّد حاسب عتيق مُلقى في مكان ما بمنزلك، أو قد يكون مركز بيانات متطوّر، ولك حريّة اختيار الخادم المناسب لموقعك حسب تفضيلك، إذ تتيح استضافتك لنظام ووردبريس بنفسك إنشاء موقع إنترنت تمتلك فيه كامل الحريّة في التّحكم؛ بالمقابل، ستقع عليك مسؤوليّة إعداد وتثبيت نظام ووردبريس، وصيانته بنفسك.
</p>

<div id="wmd-preview-section-21">
	<h2 id="rest-api">
		REST <abbr title="Application Programming Interface | واجهة برمجية"><abbr title="Application Programming Interface | واجهة برمجية">API</abbr></abbr>
	</h2>

	<p>
		ستستخدم REST <abbr title="Application Programming Interface | واجهة برمجية"><abbr title="Application Programming Interface | واجهة برمجية">API</abbr></abbr> لاحقا عندما تحترف تطوير القوالب والمُلحقات، ونظريا ستكون قادرا على استخدامها إذا كانت لديك خبرة في البرمجة بلغة أخرى مثل جافا أو روبي.
	</p>

	<p>
		تعتبر REST <abbr title="Application Programming Interface | واجهة برمجية"><abbr title="Application Programming Interface | واجهة برمجية">API</abbr></abbr> جديدة نسبيا وتسمح لك بإنشاء تطبيقات حقيقية بالاعتماد على ووردبريس، وهذا يتضمن تطبيقات أندرويد وأيفون وغيرها.
	</p>

	<p>
		أفضل طريقة لشرح هذه الميزة هي عن طريق مقارنتها بمواقع مثل تويتر أو انستغرام، لا شك أنك قد رأيت تغذية تويتر معروضة على موقع أحدهم، ولإضافة هذه الميزة إلى موقعك لن تحتاج إلى معرفة كيفية عمل نواة شيفرة البرمجية الخاصة بتويتر، كل ما تحتاجه هو القليل من الشيفرات البرمجية التي تقول: "من فضلك استرجع آخر خمسة من تغريداتي." وسيتعامل تويتر مع الباقي وسيرجع لك بيانات آخر خمسة تغريدات التي طلبتها، وبعد ذلك يمكنك استخدام HTML و CSS لعرضها.
	</p>

	<p>
		وهذا بالضبط ما يفعله REST <abbr title="Application Programming Interface | واجهة برمجية"><abbr title="Application Programming Interface | واجهة برمجية">API</abbr></abbr> لووردبريس، يمكنك الاتصال بأي موقع وطلب منه آخر خمسة مشاركات فيها، ويمكنك أيضا القيام بأكثر من ذلك: يمكنك إنشاء/حذف المستخدمين وتعديل الفئات وغيرها (بالطبع، تحتاج إلى الاستيثاق قبل استخدامها)، هذا يعني أنه يمكنك استخدام ووردبريس كمستودع للمعلومات وبناء واجهة أمامية وبنية خلفية باستخدام نظام مختلف تماما.
	</p>
</div>

<div id="wmd-preview-section-22">
	<h2 id="النواة">
		النواة
	</h2>

	<p>
		ساهم في تطوير ووردبريس مجتمع من الآلاف المتطوعين حول العالم، حيث أنه يعمل 471 شخص على الإصدار 4.4 من ووردبريس، والعديد من الأشخاص الآخرين يعملون على جوانب مختلفة من ووردبريس، من الترجمة وتطبيقات الويب إلى الإتاحة (accessibility) والدعم.
	</p>

	<p>
		في الحقيقة، يمكنك الاشتراك معهم الآن، فبينما تحتاج إلى بعض الخبرة للمشاركة في برمجة نواة ووردبريس إلا أنه يمكنك المساهمة في تحديد المشاكل والأخطاء والتأكد منها وتقديم الأفكار في أي وقت باستخدام <a data-ss1614253417="1" href="https://core.trac.wordpress.org/" rel="external nofollow">WordPress Trac</a>، وهو المكان الذي يمكنك من متابعة تطوير شيفرة نواة ووردبريس.
	</p>

	<p>
		إذا وجدت علة (خطأ - bug) يمكنك إرفاقها بالشيفرة المناسبة للتخلص منها، وبعد عدة مراجعات وتدقيقات سيتم استخدام شيفرتك البرمجية إذا كانت مناسبة، وهذه هي أفضل طريقة للمشاركة في تطوير النواة.
	</p>

	<p>
		<img alt="ووردبريس" title="" src="https://academy.hsoub.com/uploads/imageproxy/themeforest.jpg.eb1743a97bc5d8caa18a14ad4da2ecd5.jpg">
	</p>
</div>

<div id="wmd-preview-section-23">
	<h2 id="تطوير-ووردبريس-ماذا-تحتاج-أن-تتعلمه">
		تطوير ووردبريس: ماذا تحتاج أن تتعلمه
	</h2>

	<p>
		يجب أن تعتاد على العمل على مجموعة محددة من الأدوات حتى تتمكن من تطوير ووردبريس. إن عملية التعلم لا تنتهي بالنسبة إلى أي مطور جيد، سوف أعرض عليك هنا حزمة للبداية كما سأريك بعض الأدوات المتقدمة التي قد تحتاج إليها لاحقا عندما تريد أن تتعلم المزيد.
	</p>

	<p>
		الحد الأدنى من المتطلبات لتطوير الووردبريس هي HTML و CSS و PHP، بالإضافة إلى هذه اللغات ستحتاج إلى جافا سكربت و MySQL في مرحلة ما، عندما تتقن هذه اللغات يمكنك الانتقال إلى أشياء أخرى مثل LESS/SASS و Coffeescript و XML و JSON وغيرها، لكن هذه الأشياء لا تعتبر ضرورية لتطوير ووردبريس، لكن إذا عرفتها سيجعل حياتك أسهل كمطور وستوسع آفاقك.
	</p>
</div>

<div id="wmd-preview-section-24">
	<h3 id="html-و-css">
		HTML و CSS
	</h3>

	<p>
		أول لغتين يجب عليك تعلمهما هما <a data-ss1614253417="1" href="https://academy.hsoub.com/programming/html5/" rel="">HTML</a> و <a data-ss1614253417="1" href="https://academy.hsoub.com/programming/css/" rel="">CSS</a>، مهما كانت الشيفرة البرمجية التي تكتبها ومهما كانت اللغة التي تستخدمها فستحتاج حتما إلى HTML عند إرسال صفحات الويب إلى المستخدم وإلى بعض CSS لتصميم وتزيين الصفحة.
	</p>

	<p>
		إن HTML مسؤولة عن إعطاء هيكل المواقع. على المستوى الأساسي، هذا يعني أنك ستقرر ما النص الذي يجب أن يكون عنوانًا وما يجب أن يكون قائمة وما الذي يجب أن يكون في رأس أو أسفل الصفحة. أما في المستوى الأعمق، ستقرر قرارات مهمة حول SEO والتحسين (optimization).
	</p>

	<p>
		يُستخدم CSS لتطبيق أنماط لهيكل HTML، أي أنك ستُعرّف لون النص والروابط والمسافة بين الفقرات ومحاذاة الصورة وألوان الحدود وسمكها وغيرها من العناصر عن طريق استخدام شيفرة CSS. إن CSS تتميز بسهولة تعلمها وبصعوبة إتقانها.
	</p>
</div>

<div id="wmd-preview-section-25">
	<h3 id="php">
		PHP
	</h3>

	<p>
		تحظى PHP بشعبية كبيرة كأشهر لغة سكربتات من جانب الخادوم server-side-، ووفقا للاستطلاع الذي قام به W3Techs، تستخدم PHP في 81.6% من المواقع وهي اللغة التي كُتب بها ووردبريس (وتقريبا أغلب أنظمة إدارة المحتوى الأخرى أيضا) ولذلك فإن معرفة PHP هو أمر ضروري لتطوير ووردبريس.
	</p>

	<p>
		إن معرفتك بـ PHP وحدها، سيجعلك تحصل على أكثر من معرفة بتطوير ووردبريس فقط.
	</p>

	<p>
		إن أهم فرق بين لغات جانب الخادوم عن لغات جانب العميل - مثل HTML - هو أنه يتم معالجتها في الخادوم أولا، ففي HTML، يمكنك كتابة شيفرة برمجية لـ Good Morning وسيرسلها HTML كما هي وسيعرضها على الزوار.
	</p>

	<p>
		أما في لغات جانب الخادوم، فستكتب شيء مشابه لهذا [good [time_of_day، وقبل أن يتم إرسال ذلك الأمر إلى المستخدم، سيعالج الخادوم هذه الأمر حتى يعرف ما يضعه في مكان [time_of_day] حسب الوقت الذي دخلت فيه إلى الموقع، فيمكنك أن ترى "Good day" أو "Good evening".
	</p>

	<p>
		لاحظ أن البيانات التي يستقبلها متصفحك تبقى HTML لكن تمت معالجتها في الخادوم مسبقا، ولاحظ أيضا أن الشيفرة السابقة لم تكن شيفرة PHP بل هي مثال فقط لأعطيك فكرة عن آلية عمل هذه اللغة.
	</p>

	<p>
		كما هو الحال مع جميع لغات البرمجة، فالممارسة والتمرين هي التي تجعلك تبرمج بشكل أفضل، فيمكنك <a href="https://academy.hsoub.com/php/" rel="">تعلم PHP</a> في غضون بضعة أيام لكنك ستجد نفسك أنك لا تملك أية فكرة عن ما الذي تقوم به، لذلك تحتاج إلى تجربة الأشياء وتخريبها وليس الوقوف دون معرفة ما يجري، وكما يقولون الممارسة تولد الإتقان.
	</p>
</div>

<div id="wmd-preview-section-26">
	<h3 id="جافا-سكربت">
		جافا سكربت
	</h3>

	<p>
		ازداد دور جافا سكربت أهمية على الإنترنت، خاصة مع ظهور أدوات مبنية على جافا سكربت مثل <a data-ss1614253417="1" href="https://academy.hsoub.com/programming/javascript/nodejs/" rel="">Node</a> و <a data-ss1614253417="1" href="https://academy.hsoub.com/programming/javascript/angularjs/" rel="">Angular</a>.
	</p>

	<p>
		جافاسكربت تستخدم عادة لإضافة وظائف حيوية للمواقع وللتحميل غير المتزامن.
	</p>

	<p>
		سأعطيك مثال على كل واحد منها.
	</p>

	<p>
		فمثلا لو أردت أن يتم إخفاء نموذج بشكل كامل وأن يظهر ببطء داخل lightbox عندما يضغط المستخدم على زر معين، فيمكنك فعل ذلك باستخدام جافا سكربت بما أنه يمكنه التعامل مع تحريك الرسوم (animation) وربما الوظائف الأخرى، مثل التأكد من أنه تم ملئ النموذج بشكل صحيح قبل إرساله.
	</p>

	<p>
		أما التحميل غير المتزامن فيتم عمله عبر آلية تسمى بـ AJAX، فيمكنك استخدام AJAX للحصول على معلومات من الخادوم وعرضها دون إعادة تحميل الصفحة، وأبسط مثال لذلك هو التمرير اللانهائي (endless scrolling) فعندما يتم تحميل 10 مشاركات وتصل إلى نهاية الصفحة فسيتم عرض 10 مشاركات أخرى وتستمر هكذا.
	</p>

	<p>
		الكثير من المطورين تعلموا جافا سكربت من خلال إطار <a data-ss1614253417="1" href="https://academy.hsoub.com/programming/javascript/jquery/" rel="">jQuery</a>، فهو يُستخدم على نطاق واسع في ووردبريس وفي ملايين المشاريع على الإنترنت، وعلى الرغم من أن هذا الأمر جيد لكن ضع في اعتبارك أن جافا سكربت هو أكثر من مجرد jQuery وإن <a data-ss1614253417="1" href="https://academy.hsoub.com/programming/javascript/" rel="">تعلم جافا سكربت</a> كما هو هي فكرة جيدة.
	</p>
</div>

<div id="wmd-preview-section-27">
	<h3 id="mysql">
		MySQL
	</h3>

	<p>
		إن Mysql هي لغة تُستخدم للوصول والعمل مع البيانات المخزنة في قاعدة البيانات، يستخدم ووردبريس هذه اللغة كثيرا للتعامل مع البيانات، لكن كمطور، لا تحتاج إلى معرفة الكثير لأن ووردبريس يملك مجموعة من الدوال المساعدة. لكن في بعض الحالات الخاصة، قد تحتاج إلى <a data-ss1614253417="1" href="https://academy.hsoub.com/programming/php/wordpress/%D8%AE%D9%85%D8%B3-%D8%B7%D8%B1%D9%82-%D9%84%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D8%A7%D8%B3%D8%AA%D8%B9%D9%84%D8%A7%D9%85%D8%A7%D8%AA-%D9%85%D8%AE%D8%B5%D8%B5%D8%A9-%D9%81%D9%8A-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r144/" rel="">كتابة استعلام قاعدة البيانات بنفسك</a> أو ربما قد ترغب بتحسين شيء في موقعك، لذلك سيفيدك <a data-ss1614253417="1" href="https://academy.hsoub.com/devops/servers/databases/mysql/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D8%AC-%D8%A5%D8%AF%D8%A7%D8%B1%D8%A9-%D9%82%D9%88%D8%A7%D8%B9%D8%AF-%D8%A7%D9%84%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA-mysql-r28/" rel="">تعلم أساسيات MySQL</a>.
	</p>

	<p>
		إن العمل مع قواعد البيانات واضح للغاية، فالجدول في قاعدة البيانات يشبه كثيرا جداول بيانات Microsoft Excel، فكل عمود يملك عنوانًا وبيانات مخزنة في الأسطر، ونستخدم MySQL لإضافة وحذف وتعديل واسترجاع البيانات، ربما ترغب بكتابة استعلام MySQL يرجع لك جميع المشاركات التي تحتوي على كلمة "awesome" ولديها أكثر من 8 تعليقات، أو قد ترغب أيضا بإيجاد جميع المستخدمين الذين يملكون اسم "Daniel".
	</p>

	<p>
		مرة أخرى، إن كتابة شيفرة MySQL خام في ووردبريس هو أمر نادر، لكنه يحدث في بعض الأحيان، لذلك فإن فهم كيفية عمل اللغة سيساعدك على كتابة شيفرات أفضل بشكل عام
	</p>
</div>

<div id="wmd-preview-section-28">
	<h2 id="أدوات-متقدمة">
		أدوات متقدمة
	</h2>

	<p>
		بمجرد أن تتعود على الأقل على استخدام ثلاثة اللغات الأساسية - HTML و CSS و PHP - يمكنك البدء باكتشاف العديد من الأدوات المساعدة، واحدة من الأشياء الأولى التي يميل الناس إلى تعلمها هي LESS و/أو <a data-ss1614253417="1" href="https://academy.hsoub.com/programming/css/sass/" rel="">SASS</a>، كلاهما "مجموعات موسّعة" (Superset) لـ CSS، أي أن أي شيفرة CSS صحيح تعتبر صحيحة في شيفرة LESS و SASS، وتكمن أهمية إضافة هاتين اللغتين هو إمكانية استخدام متغيرات ودوال و غيرها في CSS، والذي هو غير ممكن بشكل افتراضي.
	</p>

	<p>
		إن أدوات البناء (Build tools) هو شيء سترغب في اكتشافه عند مرحلة معينة، أفضلها Gulp و Grunt فهذان يمكنهما مراقبة تعديلات الملفات وتنفيذ مختلف المهام عند استيفاء المتطلبات، فعلى سبيل المثال، في أي وقت تعدل فيه ملف SASS يمكنك ترجمته تلقائيا إلى CSS وحفظه إلى ملف معين، أو يمكنك تحسين الصور أو دمج الملفات أو تحميل الحزم الخارجية فجميع المهام الأخرى يمكنك أن تفعلها باستخدام هذه الأدوات.
	</p>

	<p>
		سطر الأوامر أو الطرفية (terminal) هو شيء يجب أن تلقي نظرة عليه. نعم إن استخدام سطر الأوامر قد يبدو مخيفا لكنه ليس كذلك، فبمجرد كتابة بضعة أوامر يمكنك حفظ الكثير من الوقت، فسكربت/أداة مثل WP-CLI يمكنه تثبيت ووردبريس في بضعة ثواني، بما في ذلك تثبيت القوالب والمُلحقات والمحتويات للتجربة والتي لو قمت بها بشكل يدوي ستتطلب الكثير من الوقت والجهد.
	</p>

	<p>
		إن أنظمة االتّحكّم في الإصدارات (Version control) هي من الأدوات المفيدة للغاية فلن تعرف حاجتك إليها إلا لو استخدمتها، فعلى الرغم من أنها وُضعت أصلا للعمل على نفس الشيفرة البرمجية في مجموعات إلا أنه يمكنك استخدامها كحل لإدارة المشاريع والمشاكل والنسخ الاحتياطي في نفس الوقت. ويعتبر كل من <a data-ss1614253417="1" href="https://academy.hsoub.com/devops/servers/%D8%AA%D9%86%D8%B5%D9%8A%D8%A8-%D9%88%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-subversion-%D9%83%D9%86%D8%B8%D8%A7%D9%85-%D8%A5%D8%AF%D8%A7%D8%B1%D8%A9-%D8%A5%D8%B5%D8%AF%D8%A7%D8%B1%D8%A7%D8%AA-%D8%B9%D9%84%D9%89-%D8%A3%D9%88%D8%A8%D9%86%D8%AA%D9%88-r201/" rel="">SVN</a> و <a data-ss1614253417="1" href="https://academy.hsoub.com/programming/workflow/git/" rel="">Git</a> الأشهر على الإطلاق، لكن بالنسبة لي، أعتبر أن Git أفضل نظرا لأنه يعمل بشكل أفضل وبسبب Github الذي يوفر خدمة استضافة مستودعات Git على الإنترنت.
	</p>
</div>

<div id="wmd-preview-section-29">
	<h2 id="ووردبريس-بوابتك-إلى-عالم-البرمجة">
		ووردبريس: بوابتك إلى عالم البرمجة
	</h2>

	<p>
		إن أفضل شيء بالنسبة إلى ووردبريس أنه يمكن أن يكون مدخلا لتعلم مهارات تطوير ويب ولغات أخرى.
	</p>

	<p>
		ولقد خضت هذه التجربة شخصيا، فلقد تعلمت أولا البرمجة الموجهة في PHP ثم تعلمت <a data-ss1614253417="1" href="https://academy.hsoub.com/programming/php/laravel/" rel="">إطار عمل Laravel</a> وأدوات البناء ثم <a data-ss1614253417="1" href="https://academy.hsoub.com/programming/css/sass/" rel="">LESS/SASS</a> وأدوات سطر الأوامر وغيرها الكثير. ولقد خضت أيضا في غمار native app باستخدام <a data-ss1614253417="1" href="https://academy.hsoub.com/programming/c-sharp/" rel="">#C</a> وغيرها من اللغات.
	</p>

	<p>
		بمجرد معرفتك بكيفية عمل كل شيء، ستتعلم المزيد عند إنشاء مشاريع جديدة وكبيرة وكل شيء سيصبح أسهل، فبعد <a data-ss1614253417="1" href="https://academy.hsoub.com/programming/php/%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D9%83%D8%A7%D8%A6%D9%86%D9%8A%D8%A9-%D8%A7%D9%84%D8%AA%D9%88%D8%AC%D9%87-object-oriented-programming-%D9%81%D9%8A-php-r316/" rel="">البرمجة كائنية التّوجّه في PHP</a> لن تبذل الكثير من الجهد في <a data-ss1614253417="1" href="https://academy.hsoub.com/search/?tags=%D8%AA%D8%B9%D9%84%D9%85+%D8%B3%D9%8A+%D8%B4%D8%A7%D8%B1%D8%A8" rel="">تعلم #C</a> لأن دماغك سيتعود على منطقه بطريقة مشابه لتعلم قيادة الشاحنات بعد تعلمك قيادة السيارات، فعلى الرغم من وجود الكثير من الاختلافات لكن بمجرد أن يكون لديك بعض الأساسيات سيسهل عليك التّحكمّ فيه.
	</p>
</div>

<div id="wmd-preview-section-30">
	<h2 id="خاتمة">
		خاتمة
	</h2>

	<p>
		ها قد عرفت الآن ما الذي تحتاجه للبدء في تطوير موقع ووردبريس، وقد تشعر بالإرباك، لكن لا تقلق، فالجميع سيشعر بذلك في هذه المرحلة.
	</p>

	<p>
		<strong>تذكّر أمرًا</strong>: من المهم أن لا تثبط عزيمتك، فجميع المبرمجين بدؤوا من مكان ما، فالكثير منهم كان سيئا للغاية عندما بدأ، يصارع لفهم المفاهيم الجديدة وشعر بالإحباط، لكنهم لم يستسلموا وكانوا دائما يدفعون أنفسهم للتّعلّم وهذا ما يُميّز المبرمج الجيد من السيئ.
	</p>

	<p>
		ترجمة -وبتصرف- للمقال: <a data-ss1614253417="1" href="http://premium.wpmudev.org/blog/wordpress-development-beginners-getting-started/" rel="external nofollow">WordPress Development for Beginners: Getting Started</a> لصاحبه Daniel Pataki والمقال <a data-ss1614253417="1" href="https://wordpress.org/support/article/wordpress-org-and-wordpress-com/" rel="external nofollow">WordPress.org and WordPress.com</a> من موقع wordpress.org.
	</p>

	<p>
		حقوق الصورة البارزة: <a data-ss1614253417="1" href="http://www.freepik.com/free-vector/web-elements_797716.htm" rel="external nofollow">Designed by Freepik</a>.
	</p>
</div>
]]></description><guid isPermaLink="false">325</guid><pubDate>Thu, 05 May 2016 08:40:00 +0000</pubDate></item><item><title>&#x62A;&#x62E;&#x635;&#x64A;&#x635; (&#x623;&#x648; &#x625;&#x632;&#x627;&#x644;&#x629;) &#x634;&#x631;&#x64A;&#x637; &#x623;&#x62F;&#x648;&#x627;&#x62A; &#x627;&#x644;&#x625;&#x62F;&#x627;&#x631;&#x629; &#x641;&#x64A; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D8%AA%D8%AE%D8%B5%D9%8A%D8%B5-%D8%A3%D9%88-%D8%A5%D8%B2%D8%A7%D9%84%D8%A9-%D8%B4%D8%B1%D9%8A%D8%B7-%D8%A3%D8%AF%D9%88%D8%A7%D8%AA-%D8%A7%D9%84%D8%A5%D8%AF%D8%A7%D8%B1%D8%A9-%D9%81%D9%8A-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r319/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2016_04/wordpress-admin-toolbar.png.17a5f571ceb484e22c28aa479076042a.png" /></p>
<div id="wmd-preview-section-9">
	<p dir="rtl">
		شريط أدوات الإدارة في ووردبريس هو ذاك الشريط الرفيع الأسود التي يظهر في أعلى الصفحة في موقعك، ويحتوي على قوائم وروابط تُشير عادةً إلى صفحاتٍ معيّنة في لوحة التحكم مثل تعديل المنشورات، وصفحة حساب المستخدم، وتخصيص القوالب والمزيد.
	</p>

	<p dir="rtl" style="text-align: center;">
		<img alt="wordpress-admin-toolbar.png" class="ipsImage ipsImage_thumbnailed" data-fileid="15431" data-unique="0iu64k32m" src="https://academy.hsoub.com/uploads/monthly_2016_04/wordpress-admin-toolbar.png.c9e10809f044db4e02c317579d63c0f2.png"></p>

	<p dir="rtl">
		بغض النظر عن الميزات المفيدة لشريط الأدوات، لكن قد يصبح مزعجًا وخصيصًا عندما لا تريد منح جميع المستخدمين وصولًا إلى لوحة التحكم، أو لأنك لا تحب وجود مستطيل أسود أثناء تصفحك لموقعك.
	</p>

	<p dir="rtl">
		لكن شريط الأدوات هو جزءٌ مهم لمدير ووردبريس ويمكن أن يكون مفيدًا جدًا بعد تخصيصه بشكلٍ ملائم لكي يوفر وصولًا سريعًا إلى أقسام الموقع وإلى معلومات محددة.
	</p>

	<p dir="rtl">
		سأريك كيف تُدير شريط أدوات ووردبريس، عبر إزالته لمستخدمين معينين، أو إضافة روابط وقوائم جديدة، أو تخصيص مظهره.
	</p>

	<p dir="rtl" style="text-align: center;">
		<a class="ipsAttachLink ipsAttachLink_image" data-fileid="15427" href="https://academy.hsoub.com/uploads/monthly_2016_04/4-1-default_toolbar_full.png.97451ff9a64571d63434c66184b02b1c.png" rel=""><img alt="4-1-default_toolbar_full.png" class="ipsImage ipsImage_thumbnailed" data-fileid="15427" data-unique="90frc0z0e" src="https://academy.hsoub.com/uploads/monthly_2016_04/4-1-default_toolbar_full.thumb.png.80b564c8031e3eff6ccf72b3e2bd5b33.png"></a>
	</p>

	<h2 dir="rtl">
		إزالة شريط أدوات الإدارة
	</h2>

	<p dir="rtl">
		قد تود في بعض الأحيان أن تُزيل شريط الأدوات من واجهة موقعك، إذ تستطيع إخفاءه لجميع المستخدمين أو لمستخدمين أولي دورٍ (role) محدد. السطر الآتي عندما تُضيفه إلى ملف <span style="font-family:courier new,courier,monospace;">functions.php</span> (ولا تنسَ أن تستعمل <a href="https://academy.hsoub.com/programming/php/wordpress/%D9%83%D9%8A%D9%81-%D8%AA%D9%86%D8%B4%D8%A6-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D9%81%D8%B1%D8%B9%D9%8A-r107/" rel="">قالبًا فرعيا child theme</a>) سيحذف شريط الأدوات لجميع مستخدمي الموقع:
	</p>

	<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5930_18">
<span class="pun">&lt;?</span><span class="pln">php show_admin_bar</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">false</span><span class="pln"> </span><span class="pun">);</span><span class="pln"> </span><span class="pun">?&gt;</span></pre>

	<p dir="rtl">
		يجب على الدالة<span style="font-family:courier new,courier,monospace;"> show_admin_bar</span> أن تستدعى مباشرةً عند تحميل الإضافة ولا حاجة إلى استدعائها من دالة مرتبطة (hooked) بالحدث (action) المسمى <span style="font-family:courier new,courier,monospace;">init</span>.
	</p>

	<p dir="rtl">
		الحالة الأكثر شيوعًا هي إخفاء شريط الأدوات بناءً على امتيازات أو دور المستخدم. ستخفي الشيفرة الآتية شريط الأدوات لكل المستخدمين ما عدا المدراء والمحررين:
	</p>

	<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_6803_7">
<span class="pun">&lt;?</span><span class="pln">php

</span><span class="com">/**
* Remove WordPress Toolbar for subscribers
*/</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> myplugin_remove_admin_bar</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
 
    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln"> current_user_can</span><span class="pun">(</span><span class="pln"> </span><span class="str">'publish_posts'</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        show_admin_bar</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">false</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

add_action</span><span class="pun">(</span><span class="pln"> </span><span class="str">'plugins_loaded'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'myplugin_remove_admin_bar'</span><span class="pln"> </span><span class="pun">);</span></pre>

	<p dir="rtl">
		ذكرتُ قبل قليل أنَّه لا يُشترَط أن تستدعى الدالة <span style="font-family:courier new,courier,monospace;">show_admin_bar</span> عبر دالة مرتبطة بحدثٍ ما. ولهذا قد تتساءل لماذا أضفناها إلى الحدث <span style="font-family:courier new,courier,monospace;">plugins_loaded</span>؟ إن لم نفعل ذلك في هذه الحالة، فستُظهِر ووردبريس رسالة الخطأ الآتية:
	</p>

	<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_6803_9">
<span class="pln">Fatal error: Call to undefined function wp_get_current_user()</span></pre>

	<p dir="rtl">
		أما لو كنتَ تستدعي الدالة<span style="font-family:courier new,courier,monospace;"> current_user_can()‎</span> من داخل ملف <span style="font-family:courier new,courier,monospace;">functions.php</span> في قالبٍ ما، فعليك أن تربط (hook) تلك الدالة بحدث <span style="font-family:courier new,courier,monospace;">after_setup_theme</span>.
	</p>

	<p dir="rtl">
		هذا المثال مشابه كثيرًا للمثال السابق إلا أنَّه يعمل في القوالب:
	</p>

	<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_6803_11">
<span class="pun">&lt;?</span><span class="pln">php

</span><span class="com">/**
* Remove WordPress Toolbar for all users except admins and editors
*
*/</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> mytheme_remove_admin_bar</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln"> current_user_can</span><span class="pun">(</span><span class="pln"> </span><span class="str">'publish_posts'</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        show_admin_bar</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">false</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

add_action</span><span class="pun">(</span><span class="pln"> </span><span class="str">'after_setup_theme'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'mytheme_remove_admin_bar'</span><span class="pln"> </span><span class="pun">);</span></pre>

	<p dir="rtl">
		إذا أردت أن تكون الشيفرة السابقة قابلة لإعادة الاستخدام، فمن المفضل ربط الدالة إلى الحدث<span style="font-family:courier new,courier,monospace;"> after_setup_theme</span> دائمًا.
	</p>

	<p dir="rtl">
		منذ الإصدار 3.1، وفَّرَت ووردبريس المُرشِّح (<span style="font-family:courier new,courier,monospace;">show_admin_bar </span>(filter، لذلك أصبحت لدينا طريقة أخرى لأداء نفس المهمة. فلو أردنا مثلًا إخفاء شريط الأدوات من جميع المستخدمين بسطرٍ وحيد:
	</p>

	<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5930_29">
<span class="pun">&lt;?</span><span class="pln">php add_filter</span><span class="pun">(</span><span class="pln"> </span><span class="str">'show_admin_bar'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'__return_false'</span><span class="pln"> </span><span class="pun">);</span><span class="pln"> </span><span class="pun">?&gt;</span></pre>

	<p dir="rtl">
		وهو مماثل تمامًا للأسطر الآتية:
	</p>

	<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_6803_13">
<span class="pun">&lt;?</span><span class="pln">php

</span><span class="com">/**
* Remove WordPress Toolbar for all users
*
*/</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> myplugin_remove_admin_bar</span><span class="pun">(){</span><span class="pln">
  
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

add_filter</span><span class="pun">(</span><span class="pln"> </span><span class="str">'show_admin_bar'</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="str">'myplugin_remove_admin_bar'</span><span class="pln"> </span><span class="pun">);</span></pre>

	<p dir="rtl">
		يمكنك أيضًا إظهار أو إخفاء شريط الأدوات بناءً على امتيازات المستخدم:
	</p>

	<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_6803_15">
<span class="pun">&lt;?</span><span class="pln">php

</span><span class="com">/**
* Remove WordPress Toolbar for users not allowed to publish posts
*
* @param bool $show_admin_bar Whether the admin bar should be shown
*/</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> myplugin_remove_admin_bar</span><span class="pun">(</span><span class="pln"> $show_admin_bar </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

    </span><span class="kwd">if</span><span class="pun">(</span><span class="pln"> current_user_can</span><span class="pun">(</span><span class="pln"> </span><span class="str">'publish_posts'</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">){</span><span class="pln">
        </span><span class="kwd">return</span><span class="pln"> $show_admin_bar</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

add_filter</span><span class="pun">(</span><span class="pln"> </span><span class="str">'show_admin_bar'</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="str">'myplugin_remove_admin_bar'</span><span class="pln"> </span><span class="pun">);</span></pre>

	<p dir="rtl">
		سيَظهَر شريط الأدوات -في المثال السابق- إلى المدراء والمحررين فقط (الذين يستطيعون النشر <span style="font-family:courier new,courier,monospace;">publish_posts</span>).
	</p>

	<p dir="rtl">
		هذا كل ما عليك معرفته إن أحببت إزالة الشريط، لكن ماذا لو أردت أن تستخدم شريط الأدوات لإضافة ميزاتٍ جديدةٍ إليه؟
	</p>

	<h2 dir="rtl">
		تخصيص شريط الأدوات
	</h2>

	<p dir="rtl">
		الصنف<span style="font-family:courier new,courier,monospace;"> WP_Admin_Bar</span> يتحكم في شريط الأدوات، وعبره نستطيع إضافة أو حذف عناصر القائمة أو مجموعات من العناصر.
	</p>

	<p dir="rtl">
		سنستخدم الدوال الثلاث الآتية في أمثلتنا القادمة:
	</p>

	<ul dir="rtl">
<li>
			<span style="font-family:courier new,courier,monospace;">()add_node</span>
		</li>
		<li>
			<span style="font-family:courier new,courier,monospace;">()add_group</span>
		</li>
		<li>
			<span style="font-family:courier new,courier,monospace;">get_node()‎</span>
		</li>
	</ul>
<p dir="rtl">
		تُعرَّف القوائم الافتراضية في ملف ‎<span style="font-family:courier new,courier,monospace;">/wp-includes/admin-bar.php</span>، وبعض تلك القوائم متوفرة لجميع المستخدمين الذين سجلوا دخولهم، مثل قائمة "شعار ووردبريس" (التي فيها بعض الروابط التعليمية)، وقائمة "حسابي (التي تُظهِر بعض الروابط المتعلقة بالمستخدم الحالي)، وقائمةٌ باسم الموقع (التي توفر روابط سريعة للوحة التحكم).
	</p>

	<p dir="rtl" style="text-align: center;">
		<img alt="4-2-site_name_menu.png" class="ipsImage ipsImage_thumbnailed" data-fileid="15428" data-unique="7em5r6sib" src="https://academy.hsoub.com/uploads/monthly_2016_04/4-2-site_name_menu.png.bb1980d6ac8c6ad02e16f332b901866a.png"></p>

	<p dir="rtl">
		لكن ووردبريس تعطينا القدرة على إضافة قوائم مخصصة وروابط إضافية ومعلومات نصية وحقول للنماذج (forms). لن أشرح هنا طريقة إضافة العناصر إلى شريط الأدوات، لكنني سأريك مثالين عمليين لكيفية تخصيص الشريط، وسأبدأ بتحديثٍ بسيطٍ لقائمة "حسابي".
	</p>

	<h2 dir="rtl">
		كيفية إضافة عناصر جديدة إلى قائمة موجودة مسبقا
	</h2>

	<p dir="rtl">
		عندما يكون هدفنا هو إضافة عناصر جديدة إلى شريط الأدوات بناءً على امتيازات المستخدم، فعلينا تمرير مُعامل (argument) إلى الدالة التي ستُستدعى ألا وهو نسخةٌ من كائن <span style="font-family:courier new,courier,monospace;">WP_Admin_Bar</span>.
	</p>

	<p dir="rtl">
		يمكن أن ترتبط الدالة بالحدث <span style="font-family:courier new,courier,monospace;">admin_bar_menu</span> كما هو موضَّح في المثال الآتي:
	</p>

	<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_5930_35">
<span class="pun">&lt;?</span><span class="pln">php

</span><span class="kwd">function</span><span class="pln"> myplugin_customize_toolbar</span><span class="pun">(</span><span class="pln"> $wp_admin_bar </span><span class="pun">){</span><span class="pln">

    </span><span class="com">// your code here</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

add_action</span><span class="pun">(</span><span class="pln"> </span><span class="str">'admin_bar_menu'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'myplugin_customize_toolbar'</span><span class="pun">,</span><span class="pln"> </span><span class="lit">999</span><span class="pln"> </span><span class="pun">);</span></pre>

	<p dir="rtl">
		ذكرتُ سابقًا في هذه المقالة أننا نستطيع بناء قوائم جديدة بالإضافة إلى إضافة روابط إلى قوائم موجودة مسبقًا. سنتيح للمستخدم -في المثال الآتي- رابطًا سريعًا إلى موقعه الإلكتروني وذلك بإضافة عقدة (node) جديدة إلى قائمة "حسابي".
	</p>

	<p dir="rtl">
		عندما يتم تحميل الملف <span style="font-family:courier new,courier,monospace;">admin-bar.php</span>، فستُنشَأ مجموعةٌ جديدةٌ من العقد (nodes) باسم <span style="font-family:courier new,courier,monospace;">user-actions </span>التي ستُضاف إلى قائمة<span style="font-family:courier new,courier,monospace;"> my-account</span>، هذه المجموعة هي المجموع الرئيسية التي ستُضاف إليها أيّة روابط لتظهر في تلك القائمة الفرعية. وظيفة الشيفرة الآتية هي إضافة رابط إلى المجموعة:
	</p>

	<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_6803_17">
<span class="pun">&lt;?</span><span class="pln">php

</span><span class="com">/**
* Customize WordPress Toolbar
*
* @param obj $wp_admin_bar An instance of the global object WP_Admin_Bar
*/</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> myplugin_customize_toolbar</span><span class="pun">(</span><span class="pln"> $wp_admin_bar </span><span class="pun">){</span><span class="pln">
    
    $user </span><span class="pun">=</span><span class="pln"> wp_get_current_user</span><span class="pun">();</span><span class="pln">
  
    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> $user </span><span class="kwd">instanceof</span><span class="pln"> WP_User </span><span class="pun">)</span><span class="pln"> </span><span class="pun">){</span><span class="pln">
        </span><span class="kwd">return</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">

    $my_account </span><span class="pun">=</span><span class="pln"> $wp_admin_bar</span><span class="pun">-&gt;</span><span class="pln">get_node</span><span class="pun">(</span><span class="pln"> </span><span class="str">'my-account'</span><span class="pln"> </span><span class="pun">);</span><span class="pln">

    </span><span class="kwd">if</span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln"> empty</span><span class="pun">(</span><span class="pln"> $user</span><span class="pun">-&gt;</span><span class="pln">user_url </span><span class="pun">)</span><span class="pln"> </span><span class="pun">&amp;&amp;</span><span class="pln"> $my_account </span><span class="pun">){</span><span class="pln">
        $wp_admin_bar</span><span class="pun">-&gt;</span><span class="pln">add_node</span><span class="pun">(</span><span class="pln"> array</span><span class="pun">(</span><span class="pln">
            </span><span class="str">'parent'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'user-actions'</span><span class="pun">,</span><span class="pln">
            </span><span class="str">'id'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'user-url'</span><span class="pun">,</span><span class="pln">
            </span><span class="str">'title'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'&lt;span class="user-url"&gt;'</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> __</span><span class="pun">(</span><span class="pln"> </span><span class="str">'My Website'</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="str">'&lt;/span&gt;'</span><span class="pun">,</span><span class="pln">
            </span><span class="str">'href'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> esc_url</span><span class="pun">(</span><span class="pln"> $user</span><span class="pun">-&gt;</span><span class="pln">user_url </span><span class="pun">)</span><span class="pln">
        </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

add_action</span><span class="pun">(</span><span class="pln"> </span><span class="str">'admin_bar_menu'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'myplugin_customize_toolbar'</span><span class="pun">,</span><span class="pln"> </span><span class="lit">999</span><span class="pln"> </span><span class="pun">);</span></pre>

	<p dir="rtl">
		في البداية، حصلنا على كائن<span style="font-family:courier new,courier,monospace;"> ‎‎$current_user‎ </span>ثم تحققنا أنَّه نسخةٌ من صنف <span style="font-family:courier new,courier,monospace;">WP_User</span>، ثم حصلنا على كائن العقدة<span style="font-family:courier new,courier,monospace;"> my-account</span>، الذي يُشير إلى قائمة "حسابي" الموجودة على الجانب الأيسر من شريط الأدوات (أو الجانب الأيمن إن لم تكن تستخدم النسخة العربية من ووردبريس). في النهاية نتحقق من وجود الحقل<span style="font-family:courier new,courier,monospace;"> user_url </span>وتوفر كائن العقدة، ثم سنضيف<span style="font-family:courier new,courier,monospace;"> user-url</span> إلى القائمة.
	</p>

	<p dir="rtl">
		الدالة السابقة ستولد شيفرة <a href="https://wiki.hsoub.com/HTML" rel="external">HTML </a>الآتية:
	</p>

	<pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_5930_39">
<span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"wp-admin-bar-user-url"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ab-item"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"http://example.com"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"user-url"</span><span class="tag">&gt;</span><span class="pln">My Website</span><span class="tag">&lt;/span&gt;</span><span class="pln">
    </span><span class="tag">&lt;/a&gt;</span><span class="pln">
</span><span class="tag">&lt;/li&gt;</span></pre>

	<p dir="rtl">
		القائمة الناتجة موضحة في الصورة الآتية:
	</p>

	<p dir="rtl" style="text-align: center;">
		<img alt="4-3-my_account.png" class="ipsImage ipsImage_thumbnailed" data-fileid="15429" data-unique="fsc5ir4na" src="https://academy.hsoub.com/uploads/monthly_2016_04/4-3-my_account.png.2b495918b8c96a10f6f83c801647f8d7.png"></p>

	<h2 dir="rtl">
		مثال متقدم: قوائم شرطية، وأنواع مقالات مخصصة والمزيد
	</h2>

	<p dir="rtl">
		تتوفر بعض قوائم شريط الأدوات في صفحاتٍ معيّنة فقط، على سبيل المثال، قائمة "تحرير المقالة" (Edit post) التي توفر رابطًا سريعًا لتعديل صفحة المنشور (post) أو الفئة (taxonomy) الحالية تظهر فقط في صفحات المنشورات وأرشيفات الفئات.
	</p>

	<p dir="rtl">
		وقد يوحي ما سبق لنا بفكرةً ألا وهي إظهار عناصر القائمة في شروطٍ معينة، الشرط في المثال الآتي يعتمد على امتيازات المستخدم.
	</p>

	<p dir="rtl">
		قد نود إظهار قائمة لمحرري الموقع تحتوي على مجموعة من الروابط التي تُشير إلى صفحات في لوحة التحكم التي تحتوي على المنشورات التي تنتظر النشر (رابط لكل نوع من أنواع المنشورات). ستستفيد المواقع التي فيها أكثر من محرر كثيرًا من مثل هكذا قائمة، وذلك عندما يكتب المستخدمون مقالاتٍ (أو منشورات مخصصة) متوقعين أن تتم مراجعتها للنشر.
	</p>

	<p dir="rtl">
		لنعد الآن إلى دالتنا ولنضف الشيفرة الآتية:
	</p>

	<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_6803_19">
<span class="pun">&lt;?</span><span class="pln">php

</span><span class="com">/**
* Customize WordPress Toolbar
*
* @param obj $wp_admin_bar An instance of the global object WP_Admin_Bar
*/</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> myplugin_customize_toolbar</span><span class="pun">(</span><span class="pln"> $wp_admin_bar </span><span class="pun">){</span><span class="pln">

    $user </span><span class="pun">=</span><span class="pln"> wp_get_current_user</span><span class="pun">();</span><span class="pln">

    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> $user </span><span class="kwd">instanceof</span><span class="pln"> WP_User </span><span class="pun">)</span><span class="pln"> </span><span class="pun">){</span><span class="pln">
        </span><span class="kwd">return</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">

    $my_account </span><span class="pun">=</span><span class="pln"> $wp_admin_bar</span><span class="pun">-&gt;</span><span class="pln">get_node</span><span class="pun">(</span><span class="pln"> </span><span class="str">'my-account'</span><span class="pln"> </span><span class="pun">);</span><span class="pln">

    </span><span class="com">// Add a custom link to My Account menu</span><span class="pln">
    </span><span class="kwd">if</span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln"> empty</span><span class="pun">(</span><span class="pln"> $user</span><span class="pun">-&gt;</span><span class="pln">user_url </span><span class="pun">)</span><span class="pln"> </span><span class="pun">&amp;&amp;</span><span class="pln"> $my_account </span><span class="pun">){</span><span class="pln">
        $wp_admin_bar</span><span class="pun">-&gt;</span><span class="pln">add_node</span><span class="pun">(</span><span class="pln"> array</span><span class="pun">(</span><span class="pln">
            </span><span class="str">'parent'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'user-actions'</span><span class="pun">,</span><span class="pln">
            </span><span class="str">'id'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'user-url'</span><span class="pun">,</span><span class="pln">
            </span><span class="str">'title'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'&lt;span class="user-url"&gt;'</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> __</span><span class="pun">(</span><span class="pln"> </span><span class="str">'My Website'</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="str">'&lt;/span&gt;'</span><span class="pun">,</span><span class="pln">
            </span><span class="str">'href'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> esc_url</span><span class="pun">(</span><span class="pln"> $user</span><span class="pun">-&gt;</span><span class="pln">user_url </span><span class="pun">)</span><span class="pln">
        </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
  
    </span><span class="kwd">if</span><span class="pun">(</span><span class="pln"> current_user_can</span><span class="pun">(</span><span class="pln"> </span><span class="str">'editor'</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">){</span><span class="pln">

        </span><span class="com">// Add a new node to the Toolbar</span><span class="pln">
        </span><span class="com">// The link points to the pending posts admin page</span><span class="pln">
        $wp_admin_bar</span><span class="pun">-&gt;</span><span class="pln">add_node</span><span class="pun">(</span><span class="pln"> array</span><span class="pun">(</span><span class="pln">
            </span><span class="str">'id'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'editor-menu'</span><span class="pun">,</span><span class="pln">
            </span><span class="str">'title'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'&lt;span class="ab-icon"&gt;&lt;/span&gt;&lt;span class="ab-label"&gt;'</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> __</span><span class="pun">(</span><span class="pln"> </span><span class="str">'Pending posts'</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="str">'&lt;/span&gt;'</span><span class="pun">,</span><span class="pln">
            </span><span class="str">'href'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> admin_url</span><span class="pun">(</span><span class="pln"> </span><span class="str">'edit.php?post_status=pending'</span><span class="pln"> </span><span class="pun">)</span><span class="pln">
         </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">

        </span><span class="com">// Add group of links</span><span class="pln">
        $wp_admin_bar</span><span class="pun">-&gt;</span><span class="pln">add_group</span><span class="pun">(</span><span class="pln"> array</span><span class="pun">(</span><span class="pln"> </span><span class="str">'parent'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'editor-menu'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'id'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'editor-actions'</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">

        </span><span class="com">// Get post types</span><span class="pln">
        $cpts </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="pln">array</span><span class="pun">)</span><span class="pln"> get_post_types</span><span class="pun">(</span><span class="pln"> array</span><span class="pun">(</span><span class="pln"> </span><span class="str">'show_in_admin_bar'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">),</span><span class="pln"> </span><span class="str">'objects'</span><span class="pln"> </span><span class="pun">);</span><span class="pln">

        </span><span class="kwd">foreach</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> $cpts </span><span class="kwd">as</span><span class="pln"> $cpt </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln"> current_user_can</span><span class="pun">(</span><span class="pln"> $cpt</span><span class="pun">-&gt;</span><span class="pln">cap</span><span class="pun">-&gt;</span><span class="pln">publish_posts </span><span class="pun">)</span><span class="pln"> </span><span class="pun">)</span><span class="pln">
                </span><span class="kwd">continue</span><span class="pun">;</span><span class="pln">

        </span><span class="com">// Get pending posts and post types</span><span class="pln">
        $posts </span><span class="pun">=</span><span class="pln"> get_posts</span><span class="pun">(</span><span class="pln"> array</span><span class="pun">(</span><span class="pln"> </span><span class="str">'post_type'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> $cpt</span><span class="pun">-&gt;</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> </span><span class="str">'post_status'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'pending'</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
        $num </span><span class="pun">=</span><span class="pln"> count</span><span class="pun">(</span><span class="pln"> $posts </span><span class="pun">);</span><span class="pln">
        $title </span><span class="pun">=</span><span class="pln"> $num </span><span class="pun">.</span><span class="pln"> </span><span class="str">' '</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> $cpt</span><span class="pun">-&gt;</span><span class="pln">label</span><span class="pun">;</span><span class="pln">

        </span><span class="com">// Add a new link for each post type</span><span class="pln">
        $wp_admin_bar</span><span class="pun">-&gt;</span><span class="pln">add_node</span><span class="pun">(</span><span class="pln"> array</span><span class="pun">(</span><span class="pln">
            </span><span class="str">'parent'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'editor-actions'</span><span class="pun">,</span><span class="pln">
            </span><span class="str">'id'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="str">'edit-'</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> $cpt</span><span class="pun">-&gt;</span><span class="pln">name</span><span class="pun">,</span><span class="pln">
            </span><span class="str">'title'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> $title</span><span class="pun">,</span><span class="pln">
            </span><span class="str">'href'</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> admin_url</span><span class="pun">(</span><span class="pln"> </span><span class="str">'edit.php?post_status=pending&amp;post_type='</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> $cpt</span><span class="pun">-&gt;</span><span class="pln">name </span><span class="pun">)</span><span class="pln">
         </span><span class="pun">)</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

add_action</span><span class="pun">(</span><span class="pln"> </span><span class="str">'admin_bar_menu'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'myplugin_customize_toolbar'</span><span class="pun">,</span><span class="pln"> </span><span class="lit">999</span><span class="pln"> </span><span class="pun">);</span></pre>

	<p dir="rtl">
		أولًا تحققنا إن كان المستخدم الحالي محررًا، فإن كان الأمر كذلك، فستُضاف القائمة الرئيسية <span style="font-family:courier new,courier,monospace;">editor-menu</span>، ثم سنضيف المجموعة <span style="font-family:courier new,courier,monospace;">editor-actions</span> مع ضبط أنها ستكون قائمة فرعية للقائمة الرئيسية <span style="font-family:courier new,courier,monospace;">editor-menu</span>.
	</p>

	<p dir="rtl">
		هنا يأتي الجانب المسلي: الدالة <span style="font-family:courier new,courier,monospace;">get_post_types</span> تولد مصفوفة بكائنات أنواع المنشورات المخصصة ثم سنتحقق إن كان المستخدم الذي سجل دخوله له امتيازات التحرير على كل نوع منشورات مخصص (أي أنَّ المستخدم قادر على نشر المنشورات <span style="font-family:courier new,courier,monospace;">publish_posts</span>) ثم سنحصل على مصفوفة لكل المنشورات التي تنتظر النشر في نوع المنشورات المخصص ونحصي عددهم.
	</p>

	<p dir="rtl" style="text-align: center;">
		<img alt="4-4-editor_menu.png" class="ipsImage ipsImage_thumbnailed" data-fileid="15430" data-unique="f72ap766f" src="https://academy.hsoub.com/uploads/monthly_2016_04/4-4-editor_menu.png.8d740eb2d1d0f648b3aec17245e6f23f.png"></p>

	<p dir="rtl">
		في النهاية، سنضيف عقدة (أو عنصر) إلى مجموعة<span style="font-family:courier new,courier,monospace;"> editor-actions</span>. وسيُشير كل رابط في تلك المجموعة إلى صفحة تحرير المنشورات التي تنتظر النشر.
	</p>

	<p dir="rtl">
		وإذا أردت أن تخصص طريقة عرض القائمة بإضافة أيقونة من مجموعة، فأضف الشيفرة الآتية إلى إضافتك (plugin) أو إلى ملف <span style="font-family:courier new,courier,monospace;">functions.php</span>:
	</p>

	<pre class="ipsCode prettyprint lang-php prettyprinted" id="ips_uid_6803_21">
<span class="pun">&lt;?</span><span class="pln">php

</span><span class="com">/**
* Prints style element
*/</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> myplugin_custom_css</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  
    $output </span><span class="pun">=</span><span class="pln"> </span><span class="str">'&lt;style&gt; wpadminbar wp-admin-bar-editor-menu .ab-icon:before { content: "\f322"; top: 2px; } &lt;/style&gt;'</span><span class="pun">;</span><span class="pln">
    echo $output</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

add_action</span><span class="pun">(</span><span class="pln"> </span><span class="str">'wp_head'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'myplugin_custom_css'</span><span class="pln"> </span><span class="pun">);</span></pre>

	<p dir="rtl">
		ربطنا الدالة السابقة إلى الحدث المسمى<span style="font-family:courier new,courier,monospace;"> wp_head</span> التي -أي الدالة- ستطبع عنصر <span style="font-family:courier new,courier,monospace;">&lt;style&gt;</span> في ترويسة (head) الصفحة. أعلم أنَّ هذه ليست أفضل طريقة عند تضمين ملفات الأنماط في مستند، لكننا نضيف هنا سطرًا وحيدًا، ولن يكون تحميل ملف CSS كامل خيارًا عمليًا.
	</p>

	<p dir="rtl">
		لكن إن كنت تريد أن يبدو شريط الأدوات كباقي موقعك، فعليك أن تعيد تعريف الأنماط الموجودة في <span style="font-family:courier new,courier,monospace;">‎/wp-includes/css/admin-bar.css </span>ثم تُضمِّن الأنماط الخاصة بك.
	</p>

	<h2 dir="rtl">
		الخلاصة
	</h2>

	<p dir="rtl">
		إذا تركت شريط الأدوات كما هو، فقد يبدو لك غير ضروري وأنَّه شيءٌ قبيحٌ قابعٌ في أعلى صفحات موقعك، لكن إن فكرت في إمكانية الاستفادة منه بعد تخصيصه، فسيصبح أداةً مهمةً ومفيدةً ومرنةً، سواءً لمالكي الموقع أو للمستخدمين الذين يشاركون به.
	</p>

	<p dir="rtl">
		هل تستخدم شريط الأدوات في مواقعك؟ هل أضفت قوائم جديدة أو وظائف متقدمة له من قبل؟ هل لديك أيّة أفكار أحببت تطبيقها عليه لكن لم تفعل ذلك بعد؟ شاركنا بذلك في التعليقات.
	</p>

	<p dir="rtl">
		ترجمة -وبتصرّف- للمقال <a href="http://premium.wpmudev.org/blog/wordpress-admin-toolbar/" rel="external nofollow">Customizing (or Removing) the WordPress Admin Toolbar</a> لصاحبه Carlo Daniele.
	</p>
</div>]]></description><guid isPermaLink="false">319</guid><pubDate>Sat, 30 Apr 2016 07:47:00 +0000</pubDate></item><item><title>&#x645;&#x62F;&#x62E;&#x644; &#x625;&#x644;&#x649; &#x628;&#x631;&#x645;&#x62C;&#x629; &#x625;&#x636;&#x627;&#x641;&#x627;&#x62A; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r123/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2017_06/59502af7260b5_introtowordpressplugins.png.6951416aae61f9c0047e7d701c6f3337.png" /></p>

<p dir="rtl">
	هل ترغب في تعلّم برمجة إضافات ووردبريس؟ هذه السّلسلة أُعدّت خصّيصًا لك.
</p>

<p dir="rtl" style="text-align: center;">
	<img class="ipsImage ipsImage_thumbnailed" data-fileid="23815" data-unique="j72rvi40z" src="https://academy.hsoub.com/uploads/monthly_2017_06/59502b0622d6a_introtowordpressplugins.png.f238ba3941825df8592ca628d0ad77eb.png" alt="intro to wordpress plugins.png"></p>

<p dir="rtl">
	سنتعرف في هذه السّلسلة على كل ما تحتاجه لتطوير أوّل إضافة لك على ووردبريس، وفق النّهج التّالي:
</p>

<p dir="rtl">
	1. <a href="https://academy.hsoub.com/code/php/wordpress/%D9%85%D9%8F%D9%82%D8%AF%D9%91%D9%85%D8%A9-%D8%A5%D9%84%D9%89-%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA-wordpress-r38/" rel="">مُقدّمة إلى برمجة إضافات </a><a href="https://academy.hsoub.com/code/php/wordpress/%D9%85%D9%8F%D9%82%D8%AF%D9%91%D9%85%D8%A9-%D8%A5%D9%84%D9%89-%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA-wordpress-r38/" rel="">Wordpress</a>: ستتعرّف في هذا المقال على ماهية إضافات ووردبريس، الأسباب التي تدفعك إلى إنشاء إضافة، وكيف تبني أوّل إضافية بسيطة.
</p>

<p dir="rtl">
	2. <a href="https://academy.hsoub.com/programming/php/wordpress/%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D8%A7%D9%84%D8%AE%D9%8F%D8%B7%D9%91%D8%A7%D9%81%D8%A7%D8%AA-hooks-r40/" rel="">برمجة إضافات ووردبريس: الخُطّافات (Hooks) </a>: في هذا المقال ستتعرّف على مفهوم الخّطافات في ووردبريس والتي تعد من أهم الخصائص التي يوفرها ووردبريس والتي جعلته مرنًا وقابل للتمدد بصورة قل أن تجد لها نظيرًا في برمجيات الويب.
</p>

<p dir="rtl">
	3. <a href="https://academy.hsoub.com/code/php/wordpress/%D8%A7%D8%B3%D8%AA%D9%82%D8%A8%D8%A7%D9%84-%D9%88%D8%AD%D9%81%D8%B8-%D8%AE%D9%8A%D8%A7%D8%B1%D8%A7%D8%AA-%D9%88%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA-%D8%A7%D9%84%D8%A5%D8%B6%D8%A7%D9%81%D8%A9-%D9%85%D9%86-%D8%AE%D9%84%D8%A7%D9%84-%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84-%D9%85%D8%B9-setting-api-%D9%88options-api-r43/" rel="">استقبال وحفظ خيارات </a><a href="https://academy.hsoub.com/code/php/wordpress/%D8%A7%D8%B3%D8%AA%D9%82%D8%A8%D8%A7%D9%84-%D9%88%D8%AD%D9%81%D8%B8-%D8%AE%D9%8A%D8%A7%D8%B1%D8%A7%D8%AA-%D9%88%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA-%D8%A7%D9%84%D8%A5%D8%B6%D8%A7%D9%81%D8%A9-%D9%85%D9%86-%D8%AE%D9%84%D8%A7%D9%84-%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84-%D9%85%D8%B9-setting-api-%D9%88options-api-r43/" rel="">(وبيانات</a><a href="https://academy.hsoub.com/code/php/wordpress/%D8%A7%D8%B3%D8%AA%D9%82%D8%A8%D8%A7%D9%84-%D9%88%D8%AD%D9%81%D8%B8-%D8%AE%D9%8A%D8%A7%D8%B1%D8%A7%D8%AA-%D9%88%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA-%D8%A7%D9%84%D8%A5%D8%B6%D8%A7%D9%81%D8%A9-%D9%85%D9%86-%D8%AE%D9%84%D8%A7%D9%84-%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84-%D9%85%D8%B9-setting-api-%D9%88options-api-r43/" rel="">) الإضافة</a>: سنتعرف في هذا الدّرس على أنسب الطّرق لحفظ الخيارات العامةللإضافة، وكيفيّة إضافة صفحة إعدادات Settings Page في لوحة التحكم تمكن المستخدم من إدخال وتعديل الخيارات الخاصة بالإضافة
</p>

<p dir="rtl">
	4. <a href="https://academy.hsoub.com/code/php/wordpress/%D9%86%D8%B8%D8%B1%D8%A9-%D8%B4%D8%A7%D9%85%D9%84%D8%A9-%D8%B9%D9%84%D9%89-%D9%82%D8%A7%D8%B9%D8%AF%D8%A9-%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r69/" rel="">نظرة شاملة على قاعدة بيانات ووردبريس</a>: في هذا المقال ستتعرّف على جداول قاعدة بيانات ووردبريس ودور كل جدول بالإضافة لأهم محتوياته وارتباطه بالجداول الأخرى، بالإضافة إلى ذكر بعض الطرق التي يوفرها ووردبريس للتعامل مع البيانات.
</p>

<ol></ol>
<p dir="rtl">
	 
</p>

<p dir="rtl">
	الآن وبعد أن كوّنت صورة واضحة على كيفية برمجة إضافة ووردبريس، نختم السّلسلة بمثال عملي:
</p>

<p dir="rtl">
	5. <a href="https://academy.hsoub.com/code/php/wordpress/%D9%85%D8%AB%D8%A7%D9%84-%D8%B9%D9%85%D9%84%D9%8A-%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D8%A5%D8%B6%D8%A7%D9%81%D8%A9-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D8%A7%D9%84%D8%AC%D8%B2%D8%A1-%D8%A7%D9%84%D8%A3%D9%88%D9%91%D9%84-r102/" rel="">مثال عملي لبرمجة إضافة ووردبريس</a><a href="https://academy.hsoub.com/code/php/wordpress/%D9%85%D8%AB%D8%A7%D9%84-%D8%B9%D9%85%D9%84%D9%8A-%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D8%A5%D8%B6%D8%A7%D9%81%D8%A9-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D8%A7%D9%84%D8%AC%D8%B2%D8%A1-%D8%A7%D9%84%D8%A3%D9%88%D9%91%D9%84-r102/" rel="">- الجزء الأوّل</a>
</p>

<p dir="rtl">
	6. <a href="https://academy.hsoub.com/code/php/wordpress/%D9%85%D8%AB%D8%A7%D9%84-%D8%B9%D9%85%D9%84%D9%8A-%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D8%A5%D8%B6%D8%A7%D9%81%D8%A9-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D8%A7%D9%84%D8%AC%D8%B2%D8%A1-%D8%A7%D9%84%D8%AB%D9%91%D8%A7%D9%86%D9%8A-r113/" rel="">مثال عملي لبرمجة إضافة ووردبريس</a><a href="https://academy.hsoub.com/code/php/wordpress/%D9%85%D8%AB%D8%A7%D9%84-%D8%B9%D9%85%D9%84%D9%8A-%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D8%A5%D8%B6%D8%A7%D9%81%D8%A9-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D8%A7%D9%84%D8%AC%D8%B2%D8%A1-%D8%A7%D9%84%D8%AB%D9%91%D8%A7%D9%86%D9%8A-r113/" rel="">- الجزء الثّاني</a>
</p>
]]></description><guid isPermaLink="false">123</guid><pubDate>Fri, 01 Jan 2016 00:06:00 +0000</pubDate></item><item><title>&#x645;&#x644;&#x641;&#x627;&#x62A; &#x627;&#x644;&#x642;&#x627;&#x644;&#x628; &#x648;&#x627;&#x644;&#x62A;&#x646;&#x633;&#x64A;&#x642; &#x641;&#x64A; &#x642;&#x627;&#x644;&#x628; Underscores &#x644;&#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D9%85%D9%84%D9%81%D8%A7%D8%AA-%D8%A7%D9%84%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D8%A7%D9%84%D8%AA%D9%86%D8%B3%D9%8A%D9%82-%D9%81%D9%8A-%D9%82%D8%A7%D9%84%D8%A8-underscores-%D9%84%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r185/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2015_10/_underscore.png.cc09ce48726a042b11e579a8f3bcdaf1.png" /></p>

<p id="ملفات-القالب-وملفات-التنسيق-في-قالب-underscores">تعرفنا في <a href="https://academy.hsoub.com/programming/php/wordpress/%D8%AA%D8%B9%D8%B1%D9%81-%D8%B9%D9%84%D9%89-%D9%85%D9%84%D9%81%D8%A7%D8%AA-%D8%A7%D9%84%D9%88%D8%B8%D8%A7%D8%A6%D9%81-functions-%D9%81%D9%8A-%D9%82%D8%A7%D9%84%D8%A8-underscores-%D9%84%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r167/">المقال السابق</a> على ملفات الوظائف في قالب Underscores بشئ من التفصيل وفي هذا المقال سنلقي نظرة على <strong>ملفات العرض</strong> وهي ملفات القالب التي يستخدمها ووردبريس لعرض محتويات الموقع في مختلف الصفحات وكذلك ملفات التنسيق.</p><p style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_10/_underscore.png.58d0c2848e69bb25cfb092dcde21bc8e.png"><img data-fileid="5618" class="ipsImage ipsImage_thumbnailed" alt="_underscore.thumb.png.fd70a82f085f7345a3" src="https://academy.hsoub.com/uploads/monthly_2015_10/_underscore.thumb.png.fd70a82f085f7345a300618e0874e5cb.png"></a></p><p>لكن دعنا في البداية نلقي نراجع بصورة سريعة مفهوم ملفات القالب وكذلك هرمية القالب.</p><h2 id="ملفات-القالب-وهرمية-القالب">ملفات القالب وهرمية القالب</h2><p>ملفات القالب <a rel="external nofollow" href="https://developer.wordpress.org/themes/basics/template-files/">Template files</a> هي عبارة عن ملفات قابلة لإعادة الإستخدام Reusable يستخدمها ووردبريس لتوليد صفحات الموقع المختلفة. بعض هذه الملفات (مثل ملف الترويسة <span style="font-family:courier new,courier,monospace;"><code>header.php</code></span> وملف التذييل <span style="font-family:courier new,courier,monospace;"><code>footer.php</code></span>) تستخدم في جميع صفحات الموقع تقريبا، وبعضها مثل ملف <span style="font-family:courier new,courier,monospace;"><code>single.php</code></span> وملف <span style="font-family:courier new,courier,monospace;"><code>index.php</code> </span>تستخدم في حالات معينة فقط (مثلا الصفحة الرئيسية، أو صفحة عرض المقال).</p><p>يتبع ووردبريس نظام معين لتحديد ملف القالب الذي سيتم إستخدامه في الصفحة الحالية ويقوم بتحميله عند طلب الصفحة ليستخدم في عرضها. هذا النظام يمكن أن نسميه <a rel="external nofollow" href="http://wphierarchy.com/">هرمية القالب في ووردبريس WordPress Template Hierarchy</a>.</p><p>وفقا لهرمية القالب فإن الملفات الموجودة في القالب قد تختلف من قالب لأخر (وهو ما يحدث عادة) ولكن هنالك ملفات أساسية موجودة في أغلب القوالب، وقالب Underscores بدوره يحتوي على هذه الملفات الأساسية، ويمكنك بالطبع إضافة المزيد من ملفات القالب على حسب المشروع الذي تقوم بتطويره وكذلك يمكنك الإستغناء عن بعضها.</p><h2 id="ملفات-القالب-في-قالب-underscores">ملفات القالب في قالب Underscores</h2><h3 id="ملف-الترويسة-headerphp">ملف الترويسة <code>header.php</code></h3><p>هذا الملف من الملفات التي يتم إستخدامها في جميع ملفات القالب الأخرى تقريبا حيث يحتوي على ترويسة الموقع اي بداية وسم <code>html</code> ووسم <code>head</code> وكذلك بداية وسم <code>body</code>، ويحتوي أيضا على عنوان ووصف الموقع وكذلك القائمة الرئيسية للموقع.</p><p>من الأمور والممارسات الجيدة التي يمكن ملاحظتها في هذا الملف:</p><ul><li>إستخدام الدالة <a rel="external nofollow" href="https://codex.wordpress.org/Function_Reference/language_attributes">language_attributes</a> داخل وسم html وهي عبارة عن دالة يوفرها ووردبريس وتعرض خصائص اللغة لوسم html وهي خاصية dir وكذلك خاصية lang وهي مفيدة جدا في حالة تطوير الموقع بأكثر من لغة حيث تقوم بجلب إتجاه اللغة الحالية تلقائيا وكذلك اللغة نفسها.</li><li>إستخدام الدالة <a rel="external nofollow" href="https://codex.wordpress.org/Function_Reference/wp_head">wp_head</a> قبل إغلاق وسم head وهي دالة مهمة جدا يستخدمها ووردبريس في عدة امور وتعتمد عليها مجموعة كبيرة من الإضافات لذلك إذا لم تقم بمناداتها في هذا المكان فقد تتفاجأ بأن كثير من الإضافات لا تعمل في موقعك وكذلك لن يتمكن ووردبريس من ربط ملفات التنسيق والجافا إسكربت في ترويسة الموقع. وفي الحقيقة هي مسئولة من من <a rel="external nofollow" href="https://codex.wordpress.org/Plugin_API/Action_Reference/wp_head">اداة الحدث</a> وبالتالي مناداة أي دالة مرتبطة به.</li><li>إستخدام الدالة <a rel="external nofollow" href="https://codex.wordpress.org/Function_Reference/body_class">body_class</a> داخل وسم body والتي تقوم بإخراج كلاسات CSS للصفحة الحالية على حسب الصفحة نفسها، فمثلا في ستجد كلاس home في الصفحة الرئيسية وكلاس blog في صفحة المقالات وغيرها من الكلاسات المفيدة والتي تعينك في تنسيق الموقع إعتمادا على الصفحة نفسها.</li></ul><p>يتم تضمين هذا الملف في بقية ملفات القالب من خلال الدالة <a rel="external nofollow" href="https://codex.wordpress.org/Function_Reference/get_header"><code>get_header</code></a>.</p><h3 id="ملف-الفوتر-footerphp">ملف الفوتر <code>footer.php</code></h3><p>مثل ملف الهيدر فإن ملف الفوتر يتم إستخدامه في جميع ملفات القالب الأخرى تقريبا، حيث يحتوي على وسم الإغلاق لكل من html وكذلك body ويحتوي أيضا على الدالة <a rel="external nofollow" href="https://codex.wordpress.org/Function_Reference/wp_footer"><code>wp_footer</code></a> والتي يتم مناداتها قبل إغلاق وسم body مباشرة ومهمتها مشابهة لمهمة الدالة <code>wp_head</code> التي ذكرناها اعلاه إلا أن هذه الدالة مرتبطة بالحدث <a rel="external nofollow" href="https://codex.wordpress.org/Plugin_API/Action_Reference/wp_footer"><code>wp_footer</code></a> وهي بنفس أهمية <code>wp_head</code> وعليك دوما التأكد من أن قالبك يحتوي على كليهما في جميع صفحات الموقع.</p><h3 id="ملف-المقالات-الصفحة-الرئيسية-indexphp">ملف المقالات (الصفحة الرئيسية) <code>index.php</code></h3><p>هذا الملف يستخدم لعرض الصفحة الرئيسية للموقع، أو بصورة أدق صفحة المقالات (لانه يمكنك إستخدام صفحة ثابتة لرئيسية الموقع وعرض المقالات في صفحة اخرى غير الصفحة الرئيسية وهو ما يمكنك التحكم به من خلال إعدادات القراءة في لوحة تحكم ووردبريس).</p><p>مهمة هذا الملف هو عرض جميع المقالات في الموقع وبالتالي فإن الحلقة Loop في هذا الملف تجلب بصورة تلقائية جميع المقالات، وما يمكن ملاحظته في هذا الملف:</p><ul><li>يتم تضمين ترويسة الموقع (ملف الترويسة) من خلال إستخدام الدالة<span style="font-family:courier new,courier,monospace;"> <code>get_header</code></span> كما أسلفنا.</li><li>يتم إستخدام الدالة <a rel="external nofollow" href="https://codex.wordpress.org/Function_Reference/get_template_part"><code>get_template_part</code></a> مع الدالة <a rel="external nofollow" href="https://codex.wordpress.org/Function_Reference/get_post_format"><code>get_post_format</code></a> لتضمين ملف الcontent المناسب من داخل مجلد template-parts على حسب بنية المقال بالصورة التالية:</li></ul><pre data-pbcklang="" data-pbcktabsize="" class="ipsCode prettyprint">get_template_part( 'template-parts/content', get_post_format() );</pre><p>فمثلا عندما تكون بنية المقال إقتباس quote سيتم تحميل ملف <span style="font-family:courier new,courier,monospace;"><code>content-quote.php</code></span> من داخل مجلد <span style="font-family:courier new,courier,monospace;"><code>template-part</code></span>، وهذا في حالة كان الملف <span style="font-family:courier new,courier,monospace;"><code>content-quote.php</code></span> موجودا وإذا لم يكن موجود فإن الدالة<span style="font-family:courier new,courier,monospace;"> </span><code><span style="font-family:courier new,courier,monospace;">get_template_part</span> </code>تقوم تلقائيا بتضمين الملف <span style="font-family:courier new,courier,monospace;"><code>content.php</code></span> وهذه إحدى مميزات الدالة <span style="font-family:courier new,courier,monospace;"><code>get_template_part</code></span>.</p><p>وكما سترى فإن هذه الدالة مستخدمة في عدد من ملفات القالب لجلب الأجزاء الموجودة في مجلد <span style="font-family:courier new,courier,monospace;"><code>template-parts</code></span> وبهذه الطريقة تصبح ملفات القالب أكثر تنظيما وتصبح الشيفرة البرمجية مقرؤة بصورة أكبر.</p><h3 id="ملف-المقال-المفرد-singlephp">ملف المقال المفرد <code>single.php</code></h3><p>كما هو معلوم لديك فإن ووردبريس يستخدم هذا الملف لعرض المقال المفرد وقد يستخدمه أيضا لعرض صفحة التفاصيل لأنواع المقالات المخصصة الأخرى في بعض الأحيان وفق هرمية القالب التي أشرنا إليها سابقا.</p><p>ما يمكن ملاحظته في هذا القالب هو إستخدام الدالة<span style="font-family:courier new,courier,monospace;"> <code>get_template_part</code></span> داخل الحلقة لجلب ملف تفاصيل المقال المفرد وبعد ذلك يتم إستدعاء الدالة <span style="font-family:courier new,courier,monospace;"><code>the_post_navigation</code></span> التي تم تعريفها في ملف<span style="font-family:courier new,courier,monospace;"> <code>template-tags.php</code></span> لعرض المقال السابق والمقال التالي لهذا المقال في حالة وجودهما.</p><p>بعد ذلك يتم التحقق من إذا ما كانت التعليقات مفتوحة لهذا المقال وفي هذه الحالة يتم جلب ملف <span style="font-family:courier new,courier,monospace;"><code>comments.php</code></span> والذي يحتوي نموذج التعليقات وأيضا يعرض التعليقات السابقة في حالة وجودها.</p><p>وأخيرا يتم جلب ملف <span style="font-family:courier new,courier,monospace;"><code>sidebar.php</code></span> من خلال الدالة <a rel="external nofollow" href="https://developer.wordpress.org/reference/functions/get_sidebar/"><code>get_sidebar</code></a> التي يوفرها ووردبريس، وكذلك يتم جلب ملف الفوتر.</p><h3 id="ملف-الصفحة-المفردة-pagephp">ملف الصفحة المفردة <code>page.php</code></h3><p>هذا الملف شبه مطابق للملف السابق، فقط داخل الحلقة يتم جلب ملف<span style="font-family:courier new,courier,monospace;"> <code>content-page.php</code></span> بدلا عن ملف <span style="font-family:courier new,courier,monospace;"><code>content-single.php</code></span>.</p><h3 id="ملف-الشريط-الجانبي-sidebarphp">ملف الشريط الجانبي <code>sidebar.php</code></h3><p>في هذا الملف يتم التحقق من وجود أي ودجات نشطة في الشريط الجانبي Sidebar المسمى <code>sidebar-1</code> وذلك من خلال الدالة <a rel="external nofollow" href="https://developer.wordpress.org/reference/functions/is_active_sidebar/"><code>is_active_sidebar</code></a> وفي حالة لم يكن هنالك ودجات نشطة يتم الخروج من الملف وإلا سيتم جلب محتويات الشريط الجاني من خلال الدالة <a rel="external nofollow" href="https://developer.wordpress.org/reference/functions/dynamic_sidebar/"><code>dynamic_sidebar</code></a> والتي تستقبل معرف الشريط الجانبي لجلبه.</p><h3 id="ملف-الأرشيف-archivephp">ملف الأرشيف <code>archive.php</code></h3><p>كما هو معلوم وفق هرمية القالب يتم إستخدام هذا الملف لعرض أرشيف التصنيفات والشهور والكاتب وعموما أي أرشيف إذا لم يكن لديه ملف أرشيف خاص به (مثلا في حالة وجود ملف <span style="font-family:courier new,courier,monospace;"><code>category.php</code></span> فحينها سيتم إستخدامه لعرض أرشيف التصنيف ولا يتم إستخدام ملف <span style="font-family:courier new,courier,monospace;"><code>archive.php</code></span> لأرشيف التصنيف).</p><p>نلاحظ أنه في البداية وقبل الدخول الى الحلقة يتم إستخدام الدالتين <a rel="external nofollow" href="https://developer.wordpress.org/reference/functions/the_archive_title/"><code>the_archive_title</code></a> و <a rel="external nofollow" href="https://developer.wordpress.org/reference/functions/the_archive_description/"><code>the_archive_description</code></a> لجلب عنوان ووصف الأرشيف على التوالي، وبعد ذلك تجد بقية الملف مشابه لملفات <span style="font-family:courier new,courier,monospace;"><code>single.php</code></span> و<span style="font-family:courier new,courier,monospace;"><code>page.php</code></span> طبعا مع إختلاف الملف content الذي يتم جلبه حيث يتم جلبه هاهنا وفق تنسيق المقال كما في ملف <span style="font-family:courier new,courier,monospace;"><code>index.php</code></span>.</p><p>ونلاحظ فرق أخر في هذا الملف وهو أنه في حالة لم يكن هنالك محتويات في الأرشيف الحالي يتم جلب ملف <span style="font-family:courier new,courier,monospace;"><code>content-none.php</code></span> والذي في هذه الحالة يخرج رسالة للزائر تفيده بأنه لا يمكن إيجاد المحتوى المطلوب بالإضافة لنموذج البحث.</p><p>وقبل ذلك وبعد نهاية الحلقة يتم إستدعاء الدالة <a rel="external nofollow" href="https://developer.wordpress.org/reference/functions/the_posts_navigation/"><code>the_posts_navigation</code></a> التي تم تعريفها في ملف <span style="font-family:courier new,courier,monospace;"><code>template-tags.php</code></span> والتي تعرض روابط التنقل بين المقالات (الصفحة السابقة والصفحة التالية).</p><h3 id="ملف-البحث-searchphp">ملف البحث <code>search.php</code></h3><p>في بداية هذا الملف وقبل الدخول الى الحلقة يتم عرض عنوان يشير الى كلمة البحث (يمكن ان يترجم إلى نتائج البحث عن: "كلمات البحث") حيث يتم الوصول الى الكلمة التي بحث عنها المستخدم من خلال الدالة <a rel="external nofollow" href="https://developer.wordpress.org/reference/functions/get_search_query/"><code>get_search_query</code></a> التي يوفرها ووردبريس.</p><p>بعد ذلك يتم عرض نتائج البحث في حالة وجودها من خلال إستدعاء ملف<span style="font-family:courier new,courier,monospace;"> <code>content-search.php</code></span> وفي حالة عدم وجود نتائج مطابقة يتم إستدعاء الملف <span style="font-family:courier new,courier,monospace;"><code>content-none.php</code></span> والذي في هذه الحالة يعرض رسالة للزائر تفيده بأنه لم يتم إيجاد نتائج مطابقة وتقترح عليه إستخدام كلمات أخرى في البحث ويرفق له نموذج البحث.</p><h3 id="ملف-الخطأ404php">ملف الخطأ <code>404.php</code></h3><p>يستخدم هذا الملف لعرض صفحة الخطأ المشهورة 404 وفي قالب underscores تم برمجته بحيث يقدم فائدة كبيرة للمستخدم حيث أنه بالإضافة لعنوان الصفحة ورسالة الخطأ يقوم بعرض نموذج البحث، وودجت أخر المقالات، والتصنيفات الأكثر إستخداما في المدونة، والأرشيف الشهري للمدونة، بالإضافة لسحابة الوسوم.</p><h3 id="ملف-التعليقات-commentsphp">ملف التعليقات <code>comments.php</code></h3><p>يستخدم هذا الملف لعرض التعليقات السابقة ونموذج التعليقات لكل من الصفحات والمقالات في حالة كانت التعليقات مفتوحة للمقال المعين.<br>وربما نخصص لطريقة برمجة ملف التعليقات في ووردبريس مقالا مفردا لنتعرف على أهم الدوال التي يوفرها ووردبريس للتعليفات وطريقة إستخدامها، وحاليا يمكنك إستخدام هذا الملف كما هو في قالبك مع التعديل على التنسيق بما يتناسب مع تصميم القالب.</p><h2 id="ملفات-التنسيق-في-قالب-undescores">ملفات التنسيق في قالب Undescores</h2><p>لا يجبرك قالب Underscores على إستخدام ملفات التنسيق الموجودة فيه ويمكنك بكل بساطة مسحها أو مسح محتوياتها والبدء بكاتبة شيفراتك الخاصة، لكنه يوفر لك بعض الأمور الأساسية المهمة في تنسيق قوالب ووردبريس لتبني عليها كما سنرى.</p><h3 id="ملف-stylecss">ملف style.css</h3><p>كما هو معلوم فإن هذا الملف من الملفات الأساسية التي لا بد من وجودها في أي قالب ووردبريس ليعمل حيث يستخدم ووردبريس الترويسة الموجودة في هذا القالب والمكتوبة كتعليق ليأخذ منها معلومات القالب التي سيعرضها في لوحة التحكم لذلك لابد من إرفاق هذا القالب وكتابة هذه المعلومات في أي قالب ووردبريس، لكنك غير مجبر على كتابة تنسيقات القالب في هذا الملف ولا ربطه في ترويسة الموقع (من خلال إستخدام الدالة <span style="font-family:courier new,courier,monospace;"><code>wp_enqueue_style</code></span> كما أشرنا لذلك في المقال السابق) ولكن يحسن بك أن تستخدمه ما دام ليس هنالك مانع يمنعك من إستخدامه.</p><p>بعد ترويسة هذا الملف تلاحظ وجود تعليق طويل هو عبارة عن جدول لمحتويات الملف، وهذه من الأشياء التي يمكنك تعلمها من قالب Underscores ليسهل فهم ملف التنسيق والوصول لأي جزء فيه فيما بعد بسرعة أكبر.</p><p>وكما هو ملاحظ في جدول المحتويات فإن هذا الملف يحتوي مسبقا على الأمور الأساسية في تنسيقات CSS حيث يحتوي على Normalize لعناصر html وتنسيقات الخطوط والعناصر والنماذج وهذه الثلاثة الأخيرة يمكنك تعديلها بما يتناسب معك.</p><p>بعد ذلك يحتوي على تنسيقات التنقل وتنقسم الى الروابط والقائمة، وفي تنسيقات القائمة ستجد بعد الأصناف المعدة مسبقا لتضيف عليها تنسيقات القائمة (وفق الصنف الذي تم كتابته في القائمة في ملف <span style="font-family:courier new,courier,monospace;"><code>header.php</code></span>)وبعض التنسيقات الأساسية التي تجدها مكتوبة بل إن القائمة معدة مسبقا للعمل في الأجهزة الصغيرة من خلال توفير تنسيقات مختلفة لهذه الأجهزة من خلال Media queries وهنالك أيضا ملف<span style="font-family:courier new,courier,monospace;"> <code>navigation.js</code> </span>المسئول عن إضافة وحذف بعض الأصناف على حسب عرض الجهاز المستخدم لتصفح الموقع وهذا يعني أن القائمة شبه جاهزة لديك وعليك فقط إضافة القليل من الشيفرات لتتناسب مع تنسيق القالب الخاص بك.<br>بعد ذلك يحتوي الملف على تنسيقات خاصة بإمكانية الوصول والمحازاة وتنظيف الfloat، وبعدها بعض التنسيقات الخاصة بالودجات.</p><p>وبعدها تسنيقات المحتويات (الصفحات والمقالات والتعليقات) وتلاخظ فيها إستخدام بعض الأصناف التي يولدها ووردبريس سواء في وسم body أو وسم المقال نفسه من خلال الدالتين <span style="font-family:courier new,courier,monospace;"><code>body_class</code></span> و <span style="font-family:courier new,courier,monospace;"><code>post_class</code></span> على التوالي، وبعدها تنسيقات خاصة بـ Infinite scroll في إضافة Jetpack.</p><p>بعد ذلك هنالك التنسيقات الخاصة بالميديا وهذه التنسيقات مفيدة لمعرفة الأصناف التي يولدها ووردبريس مع الميديا مثل Caption الخاص بالصور والمعرض Gallery.</p><h3 id="ملف-التنسيق-لللغات-من-اليمين-للشمال-rtlcss">ملف التنسيق لللغات من اليمين للشمال <code>rtl.css</code></h3><p>في حالة كانت لغة العرض للموقع تتبع التنسيق من اليمين للشمال مثل اللغة العربية يقوم ووردبريس تلقائيا بربط الملف المسمى <span style="font-family:courier new,courier,monospace;"><code>rtl.css</code></span> في ترويسة الموقع في حالة وجوده في القالب، بالتالي يحسن وضع التنسيقات المختصة بهذه اللغات في هذا الملف حيث أن ووردبريس يقوم بربطه بعد ملف <span style="font-family:courier new,courier,monospace;">style.css</span> وهذا يعني أن التنسيقات في هذا الملف سيكون لها أولوية للتنسيقات المشابهة في ملف <span style="font-family:courier new,courier,monospace;">style.css</span> كما هو معلوم في لغة CSS.</p><h2>خاتمة</h2><p>كما تلاحظ فإن ملفات العرض (ملفات القالب) في قوالب ووردبريس تعتمد بصورة كبيرة على فهم هرمية القالب والحلقة وكذلك معرفة وسوم القالب التي يوفرها ووردبريس ومنها الوسوم الشرطية وقد تحتاج أيضا لإنشاء دوال أخرى لإستخدامها ورأينا أنه من المهم أيضا معرفة الأصناف التي يولدها ووردبريس لتستطيع الإستفادة منها في تنسيق القالب وفق الصفحة والمقال وتنسيق طريقة عرض الميديا.</p><p>بهذا نكون وصلنا لختام هذه السلسلة التي ألقينا فيها نظرة سريعة على ملفات قالب Underscores بشيء من التفصيل وتعلمنا منه بعض الأمور المفيدة في تطوير قوالب وودربريس.</p>
]]></description><guid isPermaLink="false">185</guid><pubDate>Wed, 07 Oct 2015 00:09:01 +0000</pubDate></item><item><title>&#x643;&#x64A;&#x641;&#x64A;&#x629; &#x625;&#x646;&#x634;&#x627;&#x621; &#x642;&#x633;&#x645; &#x644;&#x644;&#x645;&#x648;&#x627;&#x636;&#x64A;&#x639; &#x627;&#x644;&#x645;&#x645;&#x64A;&#x632;&#x629; &#x639;&#x644;&#x649; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D9%82%D8%B3%D9%85-%D9%84%D9%84%D9%85%D9%88%D8%A7%D8%B6%D9%8A%D8%B9-%D8%A7%D9%84%D9%85%D9%85%D9%8A%D8%B2%D8%A9-%D8%B9%D9%84%D9%89-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r184/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2015_10/wordpress-featured-posts.png.1a62d5047065a0155fbb52f85a186098.png" /></p>

<p dir="rtl">يعد ووردبريس من أحد أكثر نظم إدارة المحتوى (CMS) قوة. فهو يتميز بإمكانية تعديله وتطوعيه حسب رغبتك. كما يمنحك القدرة على إضافة الميّزات والتعديل على التصاميم وكذلك إضافة قسم للمواضيع المميزة في غضون دقائق معدودة.</p><p dir="rtl" style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_10/wordpress-featured-posts.png.86bcf2661f433de582e55512da1fb329.png"><img data-fileid="5560" class="ipsImage ipsImage_thumbnailed" alt="wordpress-featured-posts.thumb.png.9697e" src="https://academy.hsoub.com/uploads/monthly_2015_10/wordpress-featured-posts.thumb.png.9697e11058cc0464785e2ccd0f22d8fb.png"></a></p><p dir="rtl">بإمكانك مشاهدة العديد من الخصائص الموجودة في قائمة الودجات Widgets مثل التصنيفات، آخر المواضيع والأرشيف. ولكن ماذا لو أردّت أن تسلط الضوء على بعض المقالات المميزة ليشاهدها القراء على موقعك.</p><p dir="rtl">تسمّى هذه الخاصّية عادة بـقسم المواضيع المميزة أو المواضيع ذات المحتوى المميز. بإمكانك أن تجد هذه الإضافة Plugin بسهولة في قسم تحميل أدوات ووردبريس. ولكن من الجيّد أنه بإمكانك أن تضيفها يدويًا باستخدام بعض الشيفرات والدوال Functions.</p><p dir="rtl"><strong>مُلاحظة</strong>: لا يركّز هذا الدرس على التصميم الخاص بقسم المواضيع المميزة، بل ينصب التركيز على الجانب التطبيقي لعملية إنشاء القسم وعرضه، ولك كامل الحرية في تغيير تنسيقات CSS لتعديل التصميم وتشكيله حسب رغبتك.</p><p dir="rtl">المتطلبات اللازمة لإكمال الدرس:</p><ul dir="rtl"><li><a rel="external nofollow" href="https://ar.wordpress.org/">تحميل</a> وتثبيت ووردبريس.</li><li>الخبرة الكافية بـ <a rel="external nofollow" href="http://codex.wordpress.org/">Wordpress Codex</a> و <a rel="external nofollow" href="http://php.net/">PHP</a>.</li><li>الوقت و الصبر.</li></ul><p dir="rtl">ما الذي ستقوم ببنائه:</p><p dir="rtl" style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_10/001-screenshot.jpg.df3b9e994ca2e26cad07f06ff0af8a04.jpg"><img data-fileid="5554" class="ipsImage ipsImage_thumbnailed" alt="001-screenshot.thumb.jpg.89c1736e14374a5" src="https://academy.hsoub.com/uploads/monthly_2015_10/001-screenshot.thumb.jpg.89c1736e14374a59333bb9c70589ecdb.jpg"></a></p><p dir="rtl"><a class="ipsAttachLink" href="https://academy.hsoub.com/applications/core/interface/file/attachment.php?id=5558">قم بتحميل النسخة النهائية من هنا</a></p><h2 dir="rtl">الشروع في العمل</h2><p dir="rtl">سنستخدم قالبًا افتراضيًا يسمى Test-theme. وهو مكوّن من مجموعة Template (غير مكتملة) ستُستخدم لغرض إظهار قسم المواضيع المميزة فحسب. يمكنك تحميله من <a class="ipsAttachLink" href="https://academy.hsoub.com/applications/core/interface/file/attachment.php?id=5557">هنا</a> أو قم باستخدام أي قالب Theme آخر تفضِّله لإكمال الدرس.</p><p dir="rtl">سيركز الدرس على الخصائص التالية:</p><ul dir="rtl"><li>إضافة صندوق meta box (على هيئة Checkbox) إلى الصفحات/المقالات.</li><li>تخزين معلومات صندوق المُحتوى (meta box).</li><li>إظهار قسم المواضيع المميّزة على الصفحة الرئيسية للموقع.</li></ul><h2 dir="rtl">الخطوة الأولى: إضافة صندوق محتوى meta box إلى الصفحات/المقالات</h2><p dir="rtl">قم بفتح ملف <span style="font-family:courier new,courier,monospace;">function.php</span>، وأضِف الشيفرة التالية لإدراج صندوق الاختيار <span style="font-family:courier new,courier,monospace;">checkbox</span>. سيقوم الكود بإنشاء صندوق محتوى meta box سيظهر في شاشة تحرير الصفحات/المقالات على شكل صندوق اختيار checkbox.</p><pre data-pbcklang="php" data-pbcktabsize="4" class="php ipsCode prettyprint">function add_featured_meta_box($post){
    $featured = get_post_meta($post-&gt;ID, '_featured-post', true);
    echo "&lt;label for='_featured-post'&gt;".__('Feature this post?', 'foobar')."&lt;/label&gt;";
    echo "&lt;input type='checkbox' name='featured-post' id='featured-post' value='1' ".checked(1, $featured)." /&gt;";
}
</pre><p dir="rtl">إذا أراد المستخدمون إضافة أيّة مقالات إلى قسم المواضيع المميزة على الصفحة الرئيسية أو أي صفحة أخرى، سيكون بإمكانهم فعل ذلك ببساطة عن طريق الضغط على مربّع الاختيار. ولكن بيانات المقال لن يتم تخزينها في هذه المرحلة، لأننا لم نضف بعد كود حفظ بيانات صندوق المحتوى.</p><p dir="rtl" style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_10/002-feature-checkbox.jpg.230a570ca8b5c07e38764af8918b9710.jpg"><img data-fileid="5555" class="ipsImage ipsImage_thumbnailed" alt="002-feature-checkbox.thumb.jpg.1ad5713df" src="https://academy.hsoub.com/uploads/monthly_2015_10/002-feature-checkbox.thumb.jpg.1ad5713dfebc72f0232eeb7c7d674726.jpg"></a></p><h2 dir="rtl">الخطوة الثانية: تخزين بيانات صندوق المحتوى (meta box)</h2><p dir="rtl">قم بفتح ملف <span style="font-family:courier new,courier,monospace;">function.php</span> مرة أخرى، وأضِف الشيفرة التالية أسفل شيفرة<span style="font-family:courier new,courier,monospace;"> add_featured_meta_box</span> الذي أضفناه في الخطوة السابقة.</p><pre data-pbcklang="php" data-pbcktabsize="4" class="php ipsCode prettyprint">function save_featured_meta($post_id){
    if (isset($_REQUEST['featured-post']))
        update_post_meta(esc_attr($post_id), '_featured-post', esc_attr($_REQUEST['featured-post']));
}
add_action('save_post', 'save_featured_meta');</pre><p dir="rtl">ستقوم هذه الشيفرة بالتأكّد من أن المقال قد تم تحديده ليظهر في قسم المواضيع المميزة، ومن ثم سيقوم بتحديث البيانات أو حِفظها في قاعدة البيانات مُستخدمًا دالة تحديث بيانات الميتا الخاصّة بالمقال <span style="font-family:courier new,courier,monospace;">update_posts_meta</span>، هذه الدالة ستقوم بتحديث قيمة value مفتاح بيانات الميتا <span style="font-family:courier new,courier,monospace;">meta_key</span> الخاص بالموضوع المحدد.</p><p dir="rtl">ستقوم الشيفرة قبل كل شيء بالتأكد من أن مفتاح بيانات الميتا <span style="font-family:courier new,courier,monospace;">meta_key$</span> موجود بالفعل على المعرِّف الفريد الخاص بالمقال <span style="font-family:courier new,courier,monospace;">post_id$</span>، وفي حال عدم وجوده، سيتم استعداء الدالة التالية عوضا عنه:</p><pre data-pbcklang="php" data-pbcktabsize="4" class="php ipsCode prettyprint"> add_post_meta($post_id ,$meta_key ,$meta_value)</pre><h2 dir="rtl">الخطوة الثالثة: إظهار قسم المواضيع المميزة على الصفحة الرئيسية للموقع</h2><p dir="rtl">سنقوم في هذه الخطوة بإظهار قسم المواضيع المميزة على الصفحة الرئيسيّة للموقع، ولفِعل ذلك، قم بإضافة الشيفرة التالية إلى القالب Template الذي ترغب فيه، وقم كذلك باختيار المكان الذي تراه مناسبًا لظهور القسم على الصفحة.</p><p dir="rtl">في هذا الدرس، تمَّ إضافة الكود إلى ملف الصفحة الرئيسية <span style="font-family:courier new,courier,monospace;">index.php</span>، وتمَّ تحديد موقع قسم المواضيع المميزة ليظهر في الشريط الجانبي sidebar للصفحة.</p><pre data-pbcklang="php" data-pbcktabsize="4" class="php ipsCode prettyprint">&lt;h2&gt;Featured Posts&lt;/h2&gt;
&lt;?php
    $args = array(
        'posts_per_page' =&gt; 5,
        'meta_key' =&gt; '_featured-post',
        'meta_value' =&gt; 1
    );
    $featured = new WP_Query($args);

    if ($featured-&gt;have_posts()):
        while ($featured-&gt;have_posts()):
            $featured-&gt;the_post();
?&gt;

&lt;h3&gt;&lt;a href="&lt;?php the_permalink();?&gt;"&gt; &lt;?php the_title();?&gt;&lt;/a&gt;&lt;/h3&gt;

&lt;p class="details"&gt;By &lt;a href="&lt;?php the_author_posts();?&gt;"&gt;&lt;?php the_author();?&gt;&lt;/a&gt; / On &lt;?php
echo get_the_date('F j, Y');?&gt; / In &lt;?php the_category(', ');?&gt;&lt;/p&gt;

&lt;?php if (has_post_thumbnail()): ?&gt;
    &lt;figure&gt; &lt;a href="&lt;?php the_permalink();?&gt;"&gt;&lt;?php the_post_thumbnail('', array('class' =&gt; 'box'         ));?&gt;&lt;/a&gt; &lt;/figure&gt;

&lt;p&gt;&lt;?php the_excerpt();?&gt;&lt;/p&gt;

&lt;?php
        endif;
    endwhile;
    else:
        endif;
?&gt;                       	</pre><p dir="rtl">ستعمل الشيفرة ببساطة على تحليل المصفوفة المسؤولة عن عدد المواضيع المميزة لعرضها، وكذلك تحليل القيم Value و المعرف الفريد ID الخاص بها. ستقوم بعد ذلك باستخدام صنف <span style="font-family:courier new,courier,monospace;">WP_Query</span> للاستعلام عن مواضيعك المميزة.</p><p dir="rtl">قم بعمل حلقة loop للمواضيع المميّزة على الشريط الجانبي واحصل على تفاصيل المقال مثل العنوان، الروابط الدّائمة Permalink والكاتب ..إلخ.</p><p dir="rtl"><strong>مُلاحظة</strong>: تمَّ إضافة تنسيق CSS للقالب الافتراضي المُستخدم، وبإمكانك التعديل عليه حسب رغبتك وفي أي وقت تشاء.</p><p dir="rtl">إذا قمت بمُراجعة الصفحة الرئيسية للموقع، فإنّك ستجد النتيجة ظاهرة كما في الصورة التالية:</p><p dir="rtl" style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_10/003-featured-posts.jpg.d395b066f2effb3e9d3a60237b6b16a3.jpg"><img data-fileid="5556" class="ipsImage ipsImage_thumbnailed" alt="003-featured-posts.thumb.jpg.ccfdfe7949b" src="https://academy.hsoub.com/uploads/monthly_2015_10/003-featured-posts.thumb.jpg.ccfdfe7949b587d6f067fd5c2e380c3c.jpg"></a></p><h2 dir="rtl">الخاتمة</h2><p dir="rtl">تهانينا، لقد قمت بإنشاء أول قسم للمواضيع المميزة بنفسك باستخدام صندوق المحتوى met box وبعض الشيفرات والدّوال، إذا لم تكن مرتاحًا لهذه العملية، فبإمكانك استخدام إضافاتٍ Plugin مثل: TSP Featured Posts أو Featured Postes Widget.</p><p dir="rtl">أتمنّى أن يكون هذا الدرس مفيداً لكم، وإذا كان لديكم أيّة طريقةٍ أخرى لإضافة قسم للمواضيع المميزة إلى ووردبريس، فلا تبخلوا بمشاركتها معنا على التعليقات.</p><p dir="rtl">ترجمة ـوبتصرف- للمقال: <a rel="external nofollow" href="http://www.1stwebdesigner.com/create-featured-posts-section">http://www.1stwebdesigner.com/create-featured-posts-section</a>.</p><p dir="rtl">حقوق الصورة البارزة: <a rel="external nofollow" href="http://www.freepik.com/free-vector/vectors_725032.htm">Designed by Freepik</a>.</p>
]]></description><guid isPermaLink="false">184</guid><pubDate>Tue, 06 Oct 2015 20:36:00 +0000</pubDate></item><item><title>&#x62A;&#x62D;&#x648;&#x64A;&#x644; &#x642;&#x627;&#x644;&#x628; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633; &#x639;&#x627;&#x62F;&#x64A; &#x625;&#x644;&#x649; &#x642;&#x627;&#x644;&#x628; &#x645;&#x62A;&#x62C;&#x627;&#x648;&#x628; &#x628;&#x627;&#x633;&#x62A;&#x62E;&#x62F;&#x627;&#x645; Media Queries</title><link>https://academy.hsoub.com/programming/php/wordpress/%D8%AA%D8%AD%D9%88%D9%8A%D9%84-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D8%B9%D8%A7%D8%AF%D9%8A-%D8%A5%D9%84%D9%89-%D9%82%D8%A7%D9%84%D8%A8-%D9%85%D8%AA%D8%AC%D8%A7%D9%88%D8%A8-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-media-queries-r175/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2015_09/wp-responsive.png.ba8a0c29aa0b13974ab4466445e58398.png" /></p>

<p dir="rtl" style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" style="line-height: 22.3999996185303px;" href="https://academy.hsoub.com/uploads/monthly_2015_09/wp-responsive.png.484bae473084dfd56ae692d705b5d966.png"><img data-fileid="5142" class="ipsImage ipsImage_thumbnailed" alt="wp-responsive.png" src="https://academy.hsoub.com/uploads/monthly_2015_09/wp-responsive.thumb.png.dcd78c435310b74980d85638615b7420.png"></a></p><p dir="rtl">هل قمت من قبل باستعمال Media Queries CSS لإنشاء موقع متجاوب؟ إن كان جوابك لا فأعتقد أنه قد حان الوقت لذلك. ففي هذا الدرس سنقوم بتحويل قالب ووردبريس غير متجاوب إلى قالب متجاوب.</p><p dir="rtl" style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure1-responsive.jpg.995374b09a1029d34fba8981a86a9f23.jpg"><img data-fileid="5101" class="ipsImage ipsImage_thumbnailed" alt="Figure1-responsive.thumb.jpg.12d55dad350" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure1-responsive.thumb.jpg.12d55dad35055afe66cf90c54a2b2dae.jpg"></a></p><p dir="rtl">في مقالات سابقة قمنا <a href="https://academy.hsoub.com/design/graphic-design/photoshop/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D9%85%D8%AF%D9%88%D9%86%D8%A9-%D8%A8%D9%86%D8%A7%D8%A1-%D8%B9%D9%84%D9%89-%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-typography-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%81%D9%88%D8%AA%D9%88%D8%B4%D9%88%D8%A8-r124/">بتصميم</a>، <a href="https://academy.hsoub.com/programming/html5/%D8%AA%D8%AD%D9%88%D9%8A%D9%84-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D9%8A%D8%B9%D8%AA%D9%85%D8%AF-%D8%B9%D9%84%D9%89-%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-typography-%D8%A5%D9%84%D9%89-html5-%D9%88-css-r173/">تكويد</a> <a href="https://academy.hsoub.com/programming/php/wordpress/%D8%AA%D8%AD%D9%88%D9%8A%D9%84-%D9%82%D8%A7%D9%84%D8%A8-typography-%D8%AB%D8%A7%D8%A8%D8%AA-%D8%A5%D9%84%D9%89-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r174/">وبناء قالب</a> ووردبريس كامل. التصميم نفسه قابل لأن يتم تحويله إلى تصميم متجاوب، لذلك سوف نستعمل نفس ملفات HTML وCSS لتحويل التصميم الثابت إلى آخر متجاوب.</p><p dir="rtl" style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure2-original.jpg.4df193bd94ba126d330703bdb9c13125.jpg"><img data-fileid="5102" class="ipsImage ipsImage_thumbnailed" alt="Figure2-original.thumb.jpg.63f09210d1956" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure2-original.thumb.jpg.63f09210d19561fb7052561020e8c07d.jpg"></a></p><p dir="rtl">قبل أن نقوم بأي شيء أريدك أن تذهب <a rel="external nofollow" href="http://line25.com/wp-content/uploads/2011/typo-code/demo/index.html">لمعاينة النسخة الرئيسية من القالب</a> قبل أن يصبح متجاوب وقم بتقليص حجم المتصفح ولاحظ ما يحصل. هل رأيت كيف يختفي جزء من الموقع عندما يصبح عرض المتصفح أقل من عرض الموقع نفسه وكيف يظهر شريط للتمرير (scrollbar) أسفل المتصفح؟ هذا ما يحدث للمواقع عندما لا تكون متجاوبة، فالفكرة من التصميم المتجاوب هو أن يتجاوب الموقع مع جميع أبعاد المتصفحات وأن يظهر الموقع بأفضل شكل مهما كانت أبعاد المتصفح الذي سيعرض الموقع.</p><p dir="rtl">عند تصفح المواقع غير المتجاوبة على الأجهزة الذكية واللوحية فإن تلك الأجهزة تقوم تلقائيًا بعرض الموقع كاملًا (أي أنّه لن يختفي جزء من الموقع كما رأيت مسبقًا)، ولكنّك ستحتاج إلى التكبير(zooming) حتى ترى محتويات الموقع بشكل جيد وهذا ما لا نريده. ما نريده هو أن يتم عرض المواقع على الأجهزة ذات الأبعاد الصغيرة بشكل مناسب ومن دون الحاجة إلى التكبير(zooming).</p><p dir="rtl" style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure3-screens.jpg.6875fabcaccc88ea0564e1a528144249.jpg"><img data-fileid="5103" class="ipsImage ipsImage_thumbnailed" alt="Figure3-screens.thumb.jpg.1accbe07b1a982" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure3-screens.thumb.jpg.1accbe07b1a982f9bbe37619583add0e.jpg"></a></p><p dir="rtl">أول خطوة يجب القيام بها هي أن نقرر الأبعاد التي سوف نصمم لها، فهناك الكثير من الأبعاد والأحجام ولكن تعتبر الأبعاد 320px، 768px و1024px من الأبعاد الشائعة. ومن الجيد أيضًا أن تعلم بأنّ التصاميم التي تعتمد في تجاوبها على عدد معين من الأبعاد تسمى "adaptive"، أما تلك التي نستخدم فيها قيم em والنسب المئوية والتي لا تعتمد على عدد معين من الأبعاد فتسمى "responsive".</p><pre data-pbcklang="html" data-pbcktabsize="4" class="html ipsCode prettyprint">&lt;link href="mediaqueries.css" rel="stylesheet" /&gt;</pre><p dir="rtl">يمكننا الآن البدء باستعمال CSS media queries لجعل الموقع متجاوبًا. يمكنك إضافة الـmedia queries إلى ملف CSS الرئيسي ولكني أفضل أن أضعها بملفٍ مستقل وأن أربطها بملف الـHTML باستخدام الوسم `&lt;link&gt;` (كما هو موضح في الأعلى).</p><pre data-pbcklang="html" data-pbcktabsize="4" class="html ipsCode prettyprint">&lt;meta name="viewport" content="width=device-width; initial-scale=1.0"&gt;</pre><p dir="rtl">نريد أيضًا أن نمنع أجهزة الـiPhone من أن تقوم بعرض الموقع على كامل الشاشة مما يضطرنا إلى التكبير لرؤية المحتوى، لذلك سنقوم باستعمال وسم `&lt;meta&gt;` لإخبار متصفح Safari بأن يكون عرض الموقع هو نفسه عرض الجهاز.</p><pre data-pbcklang="css" data-pbcktabsize="4" class="css ipsCode prettyprint">@media screen and (max-width: 960px) {
  ...
}</pre><p dir="rtl" style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure4_(2).jpg.c32072bfe80c1dd4e76274e3bb169b55.jpg"><img data-fileid="5104" class="ipsImage ipsImage_thumbnailed" alt="Figure4_(2).thumb.jpg.053d2cf520cb8605f1" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure4_(2).thumb.jpg.053d2cf520cb8605f1250d46bf2a9cd4.jpg"></a></p><p dir="rtl">العرض الخاص بالتصميم الأصلي هو 960px ولذلك فإنّ أي عرض لمتصفح أقل من هذا العرض سوف يؤدي إلى إخفاء جزء من المحتوى وإلى ظهور أشرطة تمرير أسفل المتصفح (كما رأيت سابقًا في بداية الدرس). وبناءً على ذلك، فسيكون أول media query نقوم بوضعها هي للشاشات التي عرضها أقل من 960px:</p><pre data-pbcklang="css" data-pbcktabsize="4" class="css ipsCode prettyprint">@media screen and (max-width: 960px) {
  #container, footer {
    width: 758px;
  }

  #content {
    margin: 0 20px 0 0;
  }

  #sidebar {
    width: 212px;
  }

  #sidebar section {
    clear: left;
  }

  #sidebar #search #searchbar {
    width: 152px;
  }
}</pre><p dir="rtl" style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure5_(2).jpg.950ddd960375d524ecabd128ff0116c8.jpg"><img data-fileid="5105" class="ipsImage ipsImage_thumbnailed" alt="Figure5_(2).thumb.jpg.ce7b32e1a2608cb896" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure5_(2).thumb.jpg.ce7b32e1a2608cb896fa5f2f4e706f10.jpg"></a></p><p dir="rtl">هناك عرض آخر أقل من 960px وهو 768px وهو أحد الأبعاد الشائعة كما ذكرنا آنفًا (تجد هذا العرض شائعًا في الوضع الطولي(portrait) للأجهزة اللوحية). لقد قلنا أننا سنقوم بتحويل قالب ووردبريس تم تصميمه سابقًا، وبما أنّ القالب قد تمّ تصميمه بناءً على grid ما وحتى نتماشى مع تقسيم الصفحة(layout) فسوف نقوم بإزالة عمود(column) ليبقى لدينا 758px. يمكن عندها للتقسيم الأصلي للصفحة أن يتقلص وذلك عن طريق تقليل قيمة الـmargin الخاصة بـdiv المحتوى (#content) وتقليل العرض الكُلّي للقائمة الجانبية(sidebar).</p><pre data-pbcklang="css" data-pbcktabsize="4" class="css ipsCode prettyprint">@media screen and (max-width: 758px) {

  #container, footer, #sidebar {
    width: 524px;
  }

  header nav {
    clear: left; float: none; overflow: hidden;
  }

  header nav li {
    width: auto; margin: 0 25px 0 0;
  }

  header {
    margin: 0 0 44px 0;
  }

  header h1 {
    margin: 0 0 24px 0;
  }

  #sidebar section {
    float: left; clear: none;
  }

  #sidebar #social {
    margin: 0 20px 47px 0;
  }

  #sidebar #search #searchbar {
    width: 464px;
  }
}</pre><p dir="rtl" style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure6.jpg.e5ef7dc7d9b98f45eec4557c2d417945.jpg"><img data-fileid="5106" class="ipsImage ipsImage_thumbnailed" alt="Figure6.thumb.jpg.287c810f7cd7823502169c" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure6.thumb.jpg.287c810f7cd7823502169ca8f3859325.jpg"></a></p><p dir="rtl">يمكننا الآن استخدام قيمة 758px للـmedia query التالية، بحيث يتم الإنتقال إلى التقسيم التالي عندما يكون حجم المتصفح أقل من هذه القيمة، وبما أنّ عرض القائمة الجانبية عند هذه النقطة سيكون ضيّقًا ولن يكون بالإمكان جعله أضيق من ذلك، فسوف نجعله ينساب أسفل المحتوى الرئيسي، وهذا يعني بأنَّ عرض القائمة الجانبية يجب أن يزيد حتى يملأ عرض الصفحة إلى أقصى درجة ممكنة، وسوف نجعل العناصر الموجودة في هذه القائمة تنساب إلى جانب بعضها(floated) لتملأ المساحة المتبقية.</p><p dir="rtl">أصبحت الترويسة(header) ضيّقة أيضًا ولن تستطيع استيعاب وجود الشّعار وعناصر القائمة الرئيسية إلى جانب بعضها البعض، لذلك سوف نجعل عناصر القائمة الرئيسية تظهر على سطر جديد لوحدها.</p><pre data-pbcklang="css" data-pbcktabsize="4" class="css ipsCode prettyprint">@media screen and (max-width: 524px) {

  #container, footer, #sidebar, #content {
    width: 292px;
  }

  #content article h2 {
    font-size: 24px;
  }

  #content .postinfo li {
    margin: 0 10px 0 0;
  }

  #sidebar #social {
    margin: 0;
  }

  #sidebar #search #searchbar {
    width: 230px;
  }
}</pre><p dir="rtl" style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure7.jpg.470fc55109143a7db5ddbe9227e116af.jpg"><img data-fileid="5107" class="ipsImage ipsImage_thumbnailed" alt="Figure7.thumb.jpg.0bbb00beff80846b57c023" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure7.thumb.jpg.0bbb00beff80846b57c0237a203ef703.jpg"></a></p><p dir="rtl">بقي الآن آخر media query وهي التي سوف تكون مخصصة للشاشات والأبعاد الصغيرة جدًا (كالأجهزة الذكية على سبيل المثال(. سيكون عرض هذه التقسيمة أصغر من العرض الأصلي للمحتوى، وبذلك سوف نحتاج لتقليص العرض حتى يتناسب مع تلك الأبعاد. لقد أدّى العرض الصغير جدًا إلى إنزال الروابط الخاصة بالتدوينة على سطر جديد، ولكن يمكننا إصلاح الأمر وذلك بتقليل المسافة بينها (تقليل قيمة الـmargin).</p><p dir="rtl" style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure8-responsive.jpg.7358074772648872663bf040d46c0c72.jpg"><img data-fileid="5108" class="ipsImage ipsImage_thumbnailed" alt="Figure8-responsive.thumb.jpg.a44375957be" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure8-responsive.thumb.jpg.a44375957bed46aab07a9518590db318.jpg"></a></p><p dir="rtl">وبهذا نكون قد حصلنا على تصميم يمكنه التجاوب مع العديد من الأحجام والأبعاد الشائعة وسوف يساعد أيضًا على زيادة قابلية القراءة للمحتوى بدل أن يضطر الزائر إلى التمرير(scroll) أو التكبير حتى يستطيع قراءة المحتوى. <a rel="external nofollow" href="http://line25.com/wp-content/uploads/2012/responsive/demo/index.html">يمكنك الإطلاع على الموقع المتجاوب من هنا</a>.</p><p dir="rtl">ترجمة -وبتصرّف- للمقال <a rel="external nofollow" href="http://line25.com/tutorials/create-a-responsive-web-design-with-media-querieshttp:/line25.com/tutorials/create-a-responsive-web-design-with-media-queries">Create a Responsive Web Design with Media Queries</a> لصاحبه Iggy.</p>
]]></description><guid isPermaLink="false">175</guid><pubDate>Sat, 26 Sep 2015 22:47:00 +0000</pubDate></item><item><title>&#x62A;&#x62D;&#x648;&#x64A;&#x644; &#x642;&#x627;&#x644;&#x628; Typography &#x62B;&#x627;&#x628;&#x62A; &#x625;&#x644;&#x649; &#x642;&#x627;&#x644;&#x628; &#x648;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D8%AA%D8%AD%D9%88%D9%8A%D9%84-%D9%82%D8%A7%D9%84%D8%A8-typography-%D8%AB%D8%A7%D8%A8%D8%AA-%D8%A5%D9%84%D9%89-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-r174/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2015_09/html-to-wordpress.png.354f3f2859bf1da20fcd658be3428870.png" /></p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileid="5093" href="https://academy.hsoub.com/uploads/monthly_2015_09/html-to-wordpress.png.137992428f6289250b132320e74d39b5.png" rel="external"><img alt="html-to-wordpress.png" class="ipsImage ipsImage_thumbnailed" data-fileid="5093" src="https://academy.hsoub.com/uploads/monthly_2015_09/html-to-wordpress.thumb.png.778da8948281ffdb86e42ba771bd0539.png"></a>
</p>

<p>
	هذا هو الدرس الأخير من <a href="https://academy.hsoub.com/search/?tags=%D9%82%D8%A7%D9%84%D8%A8+typography" rel="">هذه السلسلة</a>، ففي <a href="https://academy.hsoub.com/design/graphic-design/photoshop/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D9%85%D8%AF%D9%88%D9%86%D8%A9-%D8%A8%D9%86%D8%A7%D8%A1-%D8%B9%D9%84%D9%89-%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-typography-%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%81%D9%88%D8%AA%D9%88%D8%B4%D9%88%D8%A8-r124/" rel="">الدرس الأول قمنا بتصميم الواجهة باستخدام برنامج الفوتوشوب</a>، وفي <a href="https://academy.hsoub.com/programming/html5/%D8%AA%D8%AD%D9%88%D9%8A%D9%84-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D9%8A%D8%B9%D8%AA%D9%85%D8%AF-%D8%B9%D9%84%D9%89-%D9%85%D8%A8%D8%A7%D8%AF%D8%A6-typography-%D8%A5%D9%84%D9%89-html5-%D9%88-css-r173/" rel="">الدرس الثاني قمنا بتحويل التصميم إلى نموذج HTML5</a>، أمّا في هذا الدرس فسوف نقوم ببناء قالب ووردبريس كامل وجاهز للاستخدام.
</p>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileid="5065" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure1-typo-wordpress-theme-sm.jpg.58929fe19f5fc47318b53df585dbd111.jpg" rel="external"><img alt="Figure1-typo-wordpress-theme-sm.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="5065" data-unique="va6a3madk" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure1-typo-wordpress-theme-sm.thumb.jpg.8ec63d9786240b0c3ba0e31b5b0d836f.jpg"></a>
</p>

<p>
	إذا كان هذا هو أول درس تتابعه من هذه السلسلة فدعني أخبرك قليلًا عنها. أردنا في هذه السلسلة بناء قالب ووردبريس كامل، وكما ذكرت سابقًا فهذا هو الدرس الثالث والأخير من هذه السلسلة. وقلنا بأنّ اسم القالب سيكون "Typo" وبأنه سيعتمد بشكل كلي على فن Typography من دون استعمال أي صور حتى يكون التركيز بالكامل على المحتوى.
</p>

<p>
	<a href="http://chrisspooner.com/themes/typo/" rel="external nofollow">اضغط هنا لمعاينة القالب بشكله النهائي.</a>
</p>

<h2>
	ملفات قالب الووردبريس
</h2>

<p style="text-align: center;">
	<a class="ipsAttachLink ipsAttachLink_image" data-fileid="5092" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure2-files.png.3b55af500752d6aa16752124a5252e11.png" rel="external"><img alt="Figure2-files.png" class="ipsImage ipsImage_thumbnailed" data-fileid="5092" data-unique="g4f0t3v0n" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure2-files.thumb.png.b3fe14222e709166e9430e0f56f521e1.png"></a>
</p>

<p>
	بما أنّ القالب بسيط فسوف نقوم بإنشاء القالب باستخدام ملفات القوالب المعتادة والمألوفة، كما أنّه سيتم تقسيم نموذج HTML5 الذي قمنا بإنشائه سابقًا على ملفات القالب من أجل إنشاء الصفحات المختلفة للقالب. سنقوم أيضًا بنسخ جميع الصور وملفات CSS إلى مجلد القالب.
</p>

<h2>
	ملف Style.css الخاص بالقالب
</h2>

<pre class="css ipsCode prettyprint" data-pbcklang="css" data-pbcktabsize="4">
Theme Name: Typo
Theme URI: http://blog.spoongraphics.co.uk/
Description: A premium theme by Chris Spooner of Blog.SpoonGraphics.
Version: 1.0
Author: Chris Spooner
Author URI: http://blog.spoongraphics.co.uk/
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}
body {
	background: #dedede url(images/bg.jpg);
	font-family: 'Droid Serif', serif; font-size: 14px;
	line-height: 24px;
	color: #666;
}</pre>

<p>
	قمنا في بداية الملف بإضافة مجموعة من التفاصيل التي تخص القالب حتى يتعرف عليه الووردبريس، كما أننا قمنا بنسخ بعض التنسيقات الموجودة في نموذج HTML5 الذي أنشأناه سابقًا.
</p>

<h2>
	ملف Header.php
</h2>

<pre class="html ipsCode prettyprint" data-pbcklang="html" data-pbcktabsize="4">
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;&lt;?php wp_title('&amp;laquo;', true, 'right'); ?&gt; &lt;?php bloginfo('name'); ?&gt;&lt;/title&gt;
    &lt;link href="&lt;?php bloginfo('stylesheet_url'); ?&gt;" rel="stylesheet" /&gt;
    &lt;link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic" rel="stylesheet" /&gt;
    &lt;!--[if lt IE 9]&gt;
    &lt;script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;

    &lt;!--[if lt IE 9]&gt;
    &lt;link href="&lt;?php bloginfo('template_url); ?&gt;/css/ie.css" rel="stylesheet" /&gt;
    &lt;![endif]--&gt;
    
    &lt;!--WP generated header--&gt;
    &lt;?php wp_head(); ?&gt;
    &lt;!--End WP generated header--&gt;
    
&lt;/head&gt;

&lt;body&gt;

  &lt;div id="container"&gt;
    &lt;header&gt;
      &lt;h1&gt;&lt;a href="&lt;?php echo get_option('home'); ?&gt;" title="Return to the hompage"&gt;Typo&lt;/a&gt;&lt;/h1&gt;
      
      &lt;nav role="navigation"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="&lt;?php echo get_option('home'); ?&gt;"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;?php wp_list_pages('title_li=' ); ?&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/header&gt;</pre>

<div id="container">
	<p>
		قمنا بنسخ الجزء الأول من الشيفرة البرمجية الموجودة في ملف <span style="font-family:courier new,courier,monospace;">index.html</span> الخاص بالنموذج إلى ملف <span style="font-family:courier new,courier,monospace;">header.php</span>. فقد قمنا بنسخ كل شيء ابتداءً من <span style="font-family:courier new,courier,monospace;">Doctype</span> وانتهاءً بمحتويات الوسم <span style="font-family:courier new,courier,monospace;">&lt;head&gt;</span> ووضعناه في ملف <span style="font-family:courier new,courier,monospace;">header.php</span>، بعد ذلك أضفنا بعض الوسوم الخاصة بقوالب ووردبريس، وكمثال على ذلك فقد قمنا بإضافة <span style="font-family:courier new,courier,monospace;">&lt;? ;()php wp_title?&gt;</span> لإظهار عنوان التدوينة أو الصفحة و<span style="font-family:courier new,courier,monospace;">&lt;? ;('php wp_list_pages('title_li?&gt;</span> لعرض قائمة بجميع الصفحات، فالقيمة <span style="font-family:courier new,courier,monospace;">title_li</span> استخدمت لإزالة الإعداد الإفتراضي الذي يقوم بإظهار العنوان "Pages" أعلى القائمة.
	</p>
</div>

<h2>
	ملف Index.php
</h2>

<pre class="php ipsCode prettyprint" data-pbcklang="php" data-pbcktabsize="4">
&lt;?php get_header(); ?&gt;

  &lt;div id="content" role="main"&gt;

    &lt;?php if (have_posts()) : ?&gt;
      &lt;?php while (have_posts()) : the_post(); ?&gt;

      &lt;article &lt;?php post_class(); ?&gt;&gt;
        &lt;h2 class="post-title"&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;

        &lt;? php the_content(''); ?&gt;

        &lt;ul class="postinfo"&gt;
          &lt;li&gt;&lt;?php the_time('jS F Y'); ?&gt;&lt;/li&gt;
          &lt;li&gt;Posted in &lt;?php the_cetegory(', '); ?&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="&lt;? php the_permalink(); ?&gt;"&gt;Continue Reading &amp;raquo;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/article&gt;

    &lt;?php endwhile; ?&gt;

    &lt;nav id="pagination"&gt;
      &lt;ul&gt;
        &lt;li class="older"&gt;&lt;?php next_posts_link('Older posts'); ?&gt;&lt;/li&gt;
        &lt;li class="newer"&gt;&lt;?php previous_posts_link('Newer posts'); ?&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;

    &lt;? php else : ?&gt;

    &lt;article class="nothing"&gt;
      &lt;h2&gt;Nothing Found&lt;/h2&gt;
      &lt;p&gt;Sorry, but you are looking for something that isn't here&lt;/p&gt;
      &lt;p&gt;&lt;a href="&lt;?php echo get_option('home'); ?&gt;"&gt;Return to the homepage&lt;/a&gt;&lt;/p&gt;
    &lt;/article&gt;

    &lt;?php endif; ?&gt;

  &lt;/div&gt;

&lt;?php get_sidebar(); ?&gt;
&lt;?php get_footer(); ?&gt;</pre>

<p dir="rtl">
	قمنا بعد ذلك بنسخ الشيفرات البرمجية من عند نهاية ما هو موجود في ملف <span style="font-family:courier new,courier,monospace;">header.php</span> وحتى بداية القائمة الجانبية، بعدها أضفنا حلقة ووردبريس (WordPress loop) لنتفحص فيما إذا كان هناك محتوى/تدوينات أم لا. وإذا كنت تذكر ففي ملف HTML الثابت الذي أنشأناه سابقًا قمنا بوضع 3 تدوينات بنصوص عشوائية، ولكننا الآن لن نحتاج لها لأن الووردبريس سوف يعرض التدوينات باستخدام الكود الموجود بين <span style="font-family:courier new,courier,monospace;">while</span> و<span style="font-family:courier new,courier,monospace;">endwhile</span>، ففي داخل هذه الحلقة تبقى بنية HTML موجودة ولكن العناصر التي تحتاج أن تكون متغيرة/ديناميكية (dynamic) استُبدِلت بوسوم PHP مناسبة، فعلى سبيل المثال فإنّ الكود <span style="font-family:courier new,courier,monospace;">&lt;? ;()php the_permalink?&gt;</span> سوف يعرض عنوان URL الخاص بالتدوينة داخل وسم <span style="font-family:courier new,courier,monospace;">&lt;a&gt;</span> وأمّا الكود <span style="font-family:courier new,courier,monospace;">&lt;? ()php the_category?&gt;</span> سوف يقوم بعرض فئة التدوينة.
</p>

<p dir="rtl">
	وبالنسبة للمحتوى العشوائي فإنه يمكن استبداله بوسم واحد وهو <span style="font-family:courier new,courier,monospace;">&lt;? ;<span style="line-height: 22.4px;">()</span>php the_content?&gt;</span> بحيث سيقوم الووردبريس بإدخال كل المحتوى المحفوظ في قاعدة البيانات من محرر النصوص بدل ذلك الوسم.
</p>

<p dir="rtl">
	أمّا في أعلى وأسفل هذا الملف فقد قمنا باستدعاء ملفات القالب للحصول على صفحة كاملة، فالوسم <span style="font-family:courier new,courier,monospace;">&lt;? ;()php get_header?&gt;</span> يقوم بمناداة وإدخال ملف <span style="font-family:courier new,courier,monospace;">header.php</span>، بينما يقوم الوسم <span style="font-family:courier new,courier,monospace;">&lt;?  ;()php get_sidebar?&gt;</span> بمناداة وإدخال ملف <span style="font-family:courier new,courier,monospace;">sidebar.php</span> وهكذا بالنسبة لجميع الملفات.
</p>

<p>
	<a rel="external"> </a>
</p>

<h2>
	<a rel="external">ملف Sidebar.php</a>
</h2>

<p>
	<a rel="external"> </a>
</p>

<pre class="html ipsCode prettyprint" data-pbcklang="html" data-pbcktabsize="4">
&lt;aside id="sidebar"&gt;
      &lt;section id="about"&gt;
        &lt;h3&gt;About me&lt;/h3&gt;
        &lt;p&gt;&lt;?php echo get_option('omr_about_excerpt');?&gt; &lt;a href="&lt;?php echo get_option('omr_about_link');?&gt;"&gt;Find out more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
      &lt;/section&gt;
      &lt;section id="categories"&gt;
        &lt;h3&gt;Categories&lt;/h3&gt;
        &lt;ul&gt;
          &lt;?php wp_list_categories('show_count=0&amp;title_li=&amp;hide_empty=0&amp;exclude=1'); ?&gt;
        &lt;/ul&gt;
      &lt;/section&gt;
      &lt;section id="social"&gt;
        &lt;h3&gt;Social&lt;/h3&gt;
        &lt;ul&gt;
          &lt;?php if( !get_option('omr_social-one') ) { ?&gt;
          &lt;?php } else { ?&gt;
            &lt;li&gt;&lt;a href="&lt;?php echo get_option('omr_social-one_url');?&gt;"&gt;&lt;?php echo get_option('omr_social-one');?&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;?php } ?&gt;
          &lt;!-- more custom tags for theme settings page --&gt;          
          &lt;?php if( !get_option('omr_social-six') ) { ?&gt;
          &lt;?php } else { ?&gt;
            &lt;li&gt;&lt;a href="&lt;?php echo get_option('omr_social-six_url');?&gt;"&gt;&lt;?php echo get_option('omr_social-six');?&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;?php } ?&gt;
        &lt;/ul&gt;
      &lt;/section&gt;  
      &lt;section id="latest"&gt;
        &lt;h3&gt;Latest Posts&lt;/h3&gt;
        &lt;ul&gt;
          &lt;?php query_posts('showposts=6');
            if ( have_posts() ) : whitle ( have_posts() ) : the_post();?&gt;
          &lt;li&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/li&gt;  
          &lt;?php endwhile; else: ?&gt;
            &lt;li&gt;No posts found&lt;/li&gt;
          &lt;?php endif;?&gt;
        &lt;?php wp_reset_query();?&gt;
        &lt;/ul&gt;
      &lt;/section&gt;
      
      &lt;section id="search" role="search"&gt;
        &lt;h3&gt;Search&lt;/h3&gt;
        &lt;form action="&lt;?php bloginfo('url'); ?&gt;/" method="get"&gt;
          &lt;fieldset&gt;
            &lt;input type="text" id="searchbar" placeholder="I'm looking for&amp;hellip;" name="s" /&gt;
            &lt;input type="submit" id="searchsubmit" value="Search" /&gt;
          &lt;/fieldset&gt;
        &lt;/form&gt;
      &lt;/section&gt;        
    &lt;/aside&gt;</pre>

<p dir="rtl">
	الجزء التالي هو القائمة الجانبية بحيث تكون عناصره بين وسمي <span style="font-family:courier new,courier,monospace;">&lt;aside&gt;</span>. نفس القاعدة تنطبق على أي محتوى عشوائي بحيث يتم استبداله بوسم PHP بحيث يتم ادخال المحتوى بشكل ديناميكي. ومن الأمثلة على ذلك <span style="font-family:courier new,courier,monospace;">&lt;? ;()php wp_list_categories?&gt;</span> مع مجموعة من المتغيرات لتخصيص مخطّط الصفحة (layout).
</p>

<p dir="rtl">
	في هذا القالب هناك الكثير من الوسوم المخصصة التي تسمح للمستخدم بتخصيص القالب كما يريد باستخدام صفحة إعدادات خاصة، فجميع الوسوم التي تبدأ بـ <strong>_<span style="font-family:courier new,courier,monospace;">omr</span></strong> تقوم باستدعاء إعدادات مخصصة مثل جزء About وروابط الشبكات الاجتماعية.
</p>

<aside><h2>
		ملف Footer.php
	</h2>

	<pre class="php ipsCode prettyprint" data-pbcklang="php" data-pbcktabsize="4">
    &lt;footer&gt;
      &lt;ul id="credits"&gt;
        &lt;li class="wordpress"&gt;&lt;a href="http://wordpress.org"&gt;Powered by WordPress&lt;/a&gt;&lt;/li&gt;
        &lt;li class="spoonghraphics"&gt;&lt;a href="http://blog.spoongraphics.co.uk"&gt;Theme by SpoonGrahpics&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;p id="back-top"&gt;&lt;a href="#"&gt;Back to top&lt;/a&gt;&lt;/p&gt;
      
    &lt;/footer&gt;
  &lt;/div&gt;
  
  &lt;!-- &lt;?php echo get_num_queries(); ?&gt; queries. &lt;?php timer_stop(1); ?&gt; seconds. --&gt;
  
  &lt;!--WP generated footer--&gt;
  &lt;?php wp_footer(); ?&gt;
  &lt;!--END WP generated footer--&gt; 
&lt;/body&gt;
&lt;/html&gt;
</pre>
</aside><h2>
	ملفات Archive.php وSearch.php
</h2>

<pre class="php ipsCode prettyprint" data-pbcklang="php" data-pbcktabsize="4">
&lt;footer&gt;
      &lt;ul id="credits"&gt;
        &lt;li class="wordpress"&gt;&lt;a href="http://wordpress.org"&gt;Powered by WordPress&lt;/a&gt;&lt;/li&gt;
        &lt;li class="spoonghraphics"&gt;&lt;a href="http://blog.spoongraphics.co.uk"&gt;Theme by SpoonGrahpics&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;p id="back-top"&gt;&lt;a href="#"&gt;Back to top&lt;/a&gt;&lt;/p&gt;
      
    &lt;/footer&gt;
  &lt;/div&gt;
  
  &lt;!-- &lt;?php echo get_num_queries(); ?&gt; queries. &lt;?php timer_stop(1); ?&gt; seconds. --&gt;
  
  &lt;!--WP generated footer--&gt;
  &lt;?php wp_footer(); ?&gt;
  &lt;!--END WP generated footer--&gt; 
&lt;/body&gt;
&lt;/html&gt;</pre>

<p>
	البنية الرئيسية للصفحة يتم إنشاؤها باستخدام <span style="font-family:courier new,courier,monospace;">header.php</span> ،<span style="font-family:courier new,courier,monospace;">index.php </span>،<span style="font-family:courier new,courier,monospace;">sidebar.php</span> و<span style="font-family:courier new,courier,monospace;">footer.php</span>، ولكن <span style="font-family:courier new,courier,monospace;">index.php</span> تُستخدم فقط في الصفحة الرئيسية (إذا كانت هناك تدوينات ليتم عرضها على الصفحة الرئيسية). هناك بدائل لـ <span style="font-family:courier new,courier,monospace;">index.php</span> يتم استخدامها لخصائص متعددة في المدونة مثل تصفح التدوينات بناءً على ترشيح (filter) معين (كالترشيح حسب الفئة أو التاريخ أو حتى حسب الكاتب)، أو عند تصفح التدوينات بناءً على نتيجة بحث معينة.<br>
	هنا يأتي دور <span style="font-family:courier new,courier,monospace;">archive.php</span> و<span style="font-family:courier new,courier,monospace;">search.php</span>، فمحتوى هذين الملفين يشبه إلى حد كبير محتوى ملف <span style="font-family:courier new,courier,monospace;">index.php</span> باستثناء أنّ هذين الملفين يحتويان على عناوين إضافية لوصف المحتوى المعروض على الصفحة.
</p>

<div id="content" role="main">
	<h2>
		ملفات Page.php وSingle.php
	</h2>

	<pre class="php ipsCode prettyprint" data-pbcklang="php" data-pbcktabsize="4">
&lt;?php get_header(); ?&gt;
   &lt;div id="content" role=''main"&gt;
   &lt;?php if (have_posts()) : ?&gt;
      &lt;?php while (have_posts()) : the_post(); ?&gt;
      &lt;artic1e &lt;?php post_c1ass(); ?&gt;&gt;
          &lt;h2 c1ass="post-title"&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;
          &lt;?php the_content("); ?&gt;
      &lt;/article&gt;
&lt;?php endwhile; ?&gt;
&lt;?php endif; ?&gt;&gt;
&lt;/div&gt;
&lt;?php get_sidebar(); ?&gt;
&lt;?php get_footer(); ?&gt;</pre>

	<pre class="php ipsCode prettyprint" data-pbcklang="php" data-pbcktabsize="4">
&lt;?php get_header(); ?&gt;
   &lt;div id="content" role=''main"&gt;
   &lt;?php if (have_posts()) : ?&gt;
      &lt;?php while (have_posts()) : the_post(); ?&gt;
      &lt;artic1e &lt;?php post_c1ass(); ?&gt;&gt;
          &lt;h2 c1ass="post-title"&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;
          &lt;?php the_content("); ?&gt;
      &lt;/article&gt;
&lt;?php endwhile; ?&gt;
&lt;?php endif; ?&gt;&gt;
&lt;/div&gt;
&lt;?php get_sidebar(); ?&gt;
&lt;?php get_footer(); ?&gt;</pre>

	<p>
		عندما يتم تصفّح تدوينة أو صفحة واحدة فإنّ ملفات <span style="font-family:courier new,courier,monospace;">index.php </span>،<span style="font-family:courier new,courier,monospace;">archive.php</span> أو <span style="font-family:courier new,courier,monospace;">search.php</span> يتم استبدالها بملفات <span style="font-family:courier new,courier,monospace;">page.php</span> أو <span style="font-family:courier new,courier,monospace;">single.php</span>. هذه الملفات أيضًا متشابهة ولكن التخطيط الخاص بها عادةً لا يحتوي على بعض الخصائص مثل رابط العنوان (يصبح العنوان نص عادي وليس رابط)، معلومات التدوينة، اقرأ المزيد وروابط ترقيم الصفحات (pagination) لانّ هذه الأمور لم تعد مطلوبة ومهمة عند تصفح المحتوى أو التدوينات بشكل فردي. كما أنّ ملف <span style="font-family:courier new,courier,monospace;">single.php</span> يحتوي على قسم التعليقات وقد تمت إضافته باستخدام وسم <span style="font-family:courier new,courier,monospace;">&lt;? ;()php commentstemplate?&gt;</span>.
	</p>

	<h2>
		ملف Comments.php
	</h2>

	<pre class="php ipsCode prettyprint" data-pbcklang="php" data-pbcktabsize="4">
&lt;?php
 // Do not delete these lines 
if (!empty($_SERVER['SCRIPT_FILENAME']) &amp;&amp; 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die (‘Please do not load this page directly. Thanks!');
if ( post_password_required() ) { ?&gt;
    &lt;p c1ass="nocomments"&gt;This post is password protected. Enter the password to view comments.&lt;/p&gt;
&lt;?php 
    return;
}
?&gt;
&lt;div id="comments"&gt;
    &lt;h3&gt;&lt;?php comments_number('No Comments‘, '1 Comment’, '% Comments’ );?&gt;&lt;/h3&gt;
    &lt;?php if ( have_comments() ) : ?&gt;
&lt;ol class="commentlist"&gt;
&lt;?php wp_list_comments('avatar_size=&amp;type=comment'); ?&gt;

&lt;div class="pagination"&gt;
    &lt;p class="prev"&gt;&lt;?php previous_comments_link(‘Older comments‘) ?&gt;&lt;/p&gt;
    &lt;p class="next"&gt;&lt;?php next_comments_link(‘Newer comments‘) ?&gt;&lt;/p&gt;  &lt;/diV&gt;
&lt;?php endif; ?&gt;

&lt;?php if ( comments_open() ) : ?&gt;
  &lt;div id="respond"&gt;
    &lt;h3&gt;Leave a response&lt;/h3&gt;
      &lt;form action="&lt;?php echo get_option('siteurl'); ?&gt; /wp-comments-post.php" method="post" id="commentform"&gt;
        &lt;fieldset&gt;
          &lt;label for="author"&gt;Name:&lt;/label&gt;
          &lt;input type="text" name="author" id="author" value="&lt;?php echo $comment_author; ?&gt;" /&gt;

          &lt;label for="email"&gt;Email:&lt;/label&gt;
          &lt;input type=“text" name="email" id="email" value="&lt;?php echo $comment_author_email; ?&gt;" /&gt;
  
          &lt;label for="url"&gt;Website:&lt;/label&gt;
          &lt;input type="text" name="url" id="url" value="&lt;?php echo scomment_author_url; ?&gt;" /&gt;

          &lt;label for="comment"&gt;Comment:&lt;/label&gt;
          &lt;textarea name="comment" id="comment” rows="" cols=""&gt;&lt;/textarea&gt;  &lt;input type="submit" class="commentsubmit" value="Submit" /&gt;

          &lt;?php comment_id_fields(); ?&gt;
          &lt;?php do_action('comment_form', $post-&gt;ID); ?&gt;
        &lt;/fieldset&gt;
      &lt;/form&gt;

      &lt;p class="cancel"&gt;&lt;?php cancel_comment_reply_link('Cancel Reply'); ?&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;?php else : ?&gt;
      &lt;h3&gt;Comments are now closed.&lt;/h3&gt;
    &lt;?php endif; ?&gt;
  &lt;/div&gt;&lt;!--Comments--&gt;</pre>

	<p>
		يمكنك القول بأنّ ملف<code> comments.php </code>هو أحد أكثر الملفات التي يمكن إعادة استخدامها في كل القوالب التي تصنعها لأنّ هذا الملف ومحتوياته لا يتغير كثيرًا. جميع التعليقات يتم إنشاؤها وإظهارها في الصفحة باستخدام وسم واحد فقط وهو<code> </code><span style="font-family:courier new,courier,monospace;">&lt;? ;()php wplistcomments?&gt;</span> ثم تحتاج إلى بعض تنسيقات CSS لتنسيق المحتوى، وفي نهاية الملف يوجد نموذج كتابة التعليقات.
	</p>

	<h2>
		خاتمة
	</h2>

	<p style="text-align: center;">
		<a class="ipsAttachLink ipsAttachLink_image" data-fileid="5090" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure-testing.jpg.60c8ed58250121a3a3075ce14986856d.jpg" rel="external"><img alt="Figure-testing.jpg" class="ipsImage ipsImage_thumbnailed" data-fileid="5090" data-unique="1afq7o22q" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure-testing.thumb.jpg.ad69a35aa21488c55fe668157c25cfb9.jpg"></a>
	</p>

	<p>
		يمكنك بعد إنشاء جميع ملفات القاب أن تقوم برفعها واختبارها على مدونة ووردبريس. حاول بعد ذلك تعديل بعض الإعدادات وإضافة بعض المحتوى (كتابة تدوينةأو تعليق مثلًا) حتى تتأكد أنّ كل شيء يعمل كما هو مطلوب.
	</p>

	<p>
		كما رأيت فعملية بناء قالب ووردبريس تتطلب نسخ ولصق العديد من الأكواد، وإذا كنت تبحث عن أي وسم لاستخدامه يمكنك اللجوء إلى موقع <a href="http://codex.wordpress.org/" rel="external nofollow">WordPress Codex</a> فهو يحتوي على جميع الوسوم التي يمكنك استخدامها.
	</p>

	<p>
		يمكنك <a href="http://chrisspooner.com/themes/typo/" rel="external nofollow">معاينة القالب من هنا</a>.
	</p>

	<p>
		ترجمة -وبتصرف- للمقال: <a href="http://line25.com/tutorials/create-a-typography-based-wordpress-blog-theme" rel="external nofollow">Create a Typography Based WordPress Blog Theme</a> لصاحبه: Iggy.
	</p>
</div>
]]></description><guid isPermaLink="false">174</guid><pubDate>Wed, 23 Sep 2015 23:07:00 +0000</pubDate></item><item><title>&#x625;&#x646;&#x634;&#x627;&#x621; &#x644;&#x648;&#x62D;&#x629; &#x62A;&#x633;&#x62C;&#x64A;&#x644; &#x62F;&#x62E;&#x648;&#x644; &#x644;&#x648;&#x631;&#x62F;&#x628;&#x631;&#x64A;&#x633; &#x628;&#x62F;&#x648;&#x646; &#x627;&#x633;&#x62A;&#x639;&#x645;&#x627;&#x644; &#x627;&#x644;&#x625;&#x636;&#x627;&#x641;&#x627;&#x62A;</title><link>https://academy.hsoub.com/programming/php/wordpress/%D8%A5%D9%86%D8%B4%D8%A7%D8%A1-%D9%84%D9%88%D8%AD%D8%A9-%D8%AA%D8%B3%D8%AC%D9%8A%D9%84-%D8%AF%D8%AE%D9%88%D9%84-%D9%84%D9%88%D8%B1%D8%AF%D8%A8%D8%B1%D9%8A%D8%B3-%D8%A8%D8%AF%D9%88%D9%86-%D8%A7%D8%B3%D8%AA%D8%B9%D9%85%D8%A7%D9%84-%D8%A7%D9%84%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA-r169/</link><description><![CDATA[
<p><img src="https://academy.hsoub.com/uploads/monthly_2015_09/wp-login-css.jpg.192cbb6a03bf9910998b7f2af83a1cf4.jpg" /></p>

<p>تُعتبر لوحة تسجيل الدخول في ووردبريس من أقل المواضيع التي يتم التحدث فيها أو التلاعب بتصاميمها على عكس التصاميم الخاصة بالقوالب، ولكنه من الجيد لك أن تعرف كيف تُنشئ واحدة حتى يبدو موقعك أو موقع عميلك متميّزًا وله رونقه الخاص. تابع معنا هذا الدرس لتعرف كيفية إنشاء لوحة تسجيل دخول خاصة بدون استعمال الإضافات.</p><h2>لماذا يجب عليك تعلم ذلك؟</h2><p>كل المواقع التي تعمل على منصة ووردبريس تملك نفس تصميم لوحة الدخول وهو التصميم الرئيسي الخاص بالووردبريس، ولكن بعض العملاء يريدون أن يتميزوا بكل صغيرة وكبيرة في موقعهم ومن ضمنها لوحة الدخول.</p><p>سأريك الآن كيف تقوم بذلك فالأمر سهل وغير معقد ويمكنك أن تكتب أكواد CSS وjQuery خاصة بك ولن تحتاج إلى أي إضافات.</p><p style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure1-finaldesign.jpg.f3b6012eb5728f433ab59118664df4a3.jpg"><img data-fileid="4875" class="ipsImage ipsImage_thumbnailed" alt="Figure1-finaldesign.thumb.jpg.4376b68774" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure1-finaldesign.thumb.jpg.4376b68774cb0955cc0395096b91be6d.jpg"></a></p><h2>لم لا تستخدم إضافة جاهزة وحسب؟</h2><p>هناك إضافة جيدة اسمها "BM Custom Login" ولكن حدثت عليها الكثير من التعديلات والاختلافات منذ إصدارها الأول، وأصبحت أحس أن الإصدار الحالي ليس بتلك الجودة. وشيء آخر، وهو أنه يجب عليك أن تقلل من الإضافات في موقعك على قدر الإمكان إن أردت لموقعك أن يكون سريعًا.</p><p>على كل حال وكما ذكرنا سابقًا فإننا لن نستخدم أي إضافات في هذا الدرس.</p><h2>هيكلة القالب</h2><p style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure2-hierarchy.jpg.02aa5c11883bd637df3839e6e142ce7d.jpg"><img data-fileid="4876" class="ipsImage ipsImage_thumbnailed" alt="Figure2-hierarchy.thumb.jpg.6127e01a836c" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure2-hierarchy.thumb.jpg.6127e01a836c612a15e8b2a6c3f3c34f.jpg"></a></p><p>الجميل في هذه الطريقة هو أنك تستطيع أن تحفظ كل الملفات المهمة داخل القالب نفسه على عكس الإضافات التي تُبقي ملفاتها بداخل مجلد الإضافة نفسه، وبذلك نُبقي كل شيء منظم ومن السهل الرجوع إليه في أي وقت.</p><h2>تحديث/تعديل ملف functions.php</h2><pre data-pbcklang="php" data-pbcktabsize="4" class="php ipsCode prettyprint">function custom_login() {

$files = '&lt;link rel="stylesheet" href="'.get_bloginfo('template_directory').'/css/login.css" /&gt;
          &lt;script src="http://use.typekit.com/pgf3epu.js"&gt;&lt;/script&gt;
          &lt;script&gt;try{Typekit.load();}catch(e){}&lt;/script&gt;
          &lt;script src="'.get_bloginfo('template_directory').'/js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="'.get_bloginfo('template_directory').'/js/login.js"&gt;&lt;/script&gt;';
echo $files;
}
addaction('loginhead', 'custom_login');</pre><p>أول خطوة ستكون كتابة دالة داخل ملف functions.php وتخزين كل الملفات الضرورية داخل مُتغيّر ثمَّ عمل echo له. يمكننا مناداة الملفات الموجودة داخل القالب باستعمال <span style="font-family:courier new,courier,monospace;">('</span><code>get_bloginfo('template_directory</code> وربط الملف مباشرة. لقد قمت أيضًا بإضافة ملف jQuery مُصغّر (minified) وtypekit أيضًا.</p><pre data-pbcklang="php" data-pbcktabsize="4" class="php ipsCode prettyprint">function customloginurl() {
  echo bloginfo('url');
}
addfilter('loginheaderurl', 'customloginurl');

function customlogintitle() {
  echo get_option('blogname');
}
addfilter('loginheadertitle', 'customlogintitle');</pre><p>قمت أيضًا بإضافة دالّتين؛ واحدة لتغيير رابط الشّعار حتى يظهر الشّعار الخاص بالموقع بدلًا من شعار موقع Wordpress.org، والدالة الثانية استخدمتها لتغيير عنوان لوحة تسجيل الدخول. هذا كان ما يخص أكواد PHP فلن نحتاج إلى أي أكواد PHP إضافية بعد الآن.</p><h2>تغيير تنسيقات CSS</h2><p>هنا يبدأ التحدي. سوف تحتاج الآن إلى الإطلاع على عناصر DOM لمعرفة العناصر التي تستطيع تعديلها وسوف تحتاج أيضًا إلى إزاحة تنسيقات CSS الموجودة في الصفحة واستبدالها بتنسيقات أخرى، وحتى تفعل ذلك سوف تحتاج إلى استخدام Developer Tools كتلك الموجودة في متصفح Google Chrome أو يمكنك استخدام إضافة Firebug المشهورة.</p><p style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure3-developertools.jpg.2a540093ca86468dade63420da5a35e6.jpg"><img data-fileid="4877" class="ipsImage ipsImage_thumbnailed" alt="Figure3-developertools.thumb.jpg.7799acd" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure3-developertools.thumb.jpg.7799acd34322d887bd117ee06679dc9c.jpg"></a></p><p>ما أحبّ إضافته في بداية الملف هو المحدد العام <code>*</code> لتحديد واستهداف كافة العناصر ومن ثم أضيف لها خاصية transition وخاصية <code>webkit-font-smoothing: antialiasing-</code> حتى نحصل على خط أفضل في متصفحات webkit. ما أفضله أيضًا هو التعديل على محدد الفئة الزائفة (pseudo-class)  المسمى <code>focus:</code> للتخلص من الحدود الخارجية (outlines).</p><pre data-pbcklang="css" data-pbcktabsize="4" class="css ipsCode prettyprint">* {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-font-smoothing: antialiased;
}

:focus {
  outline: 0!important;
}</pre><p>يمكننا باستعمال Developer Tools معرفة العناصر الموجودة ومعرفة تنسيقات CSS المستخدمة لنتمكن من تغييرها. فعلى سبيل المثال، يمكننا تغيير الشعار الموجود أعلى لوحة تسجيل الدخول إلى شعار الموقع نفسه:</p><pre data-pbcklang="css" data-pbcktabsize="4" class="css ipsCode prettyprint">body.login h1 a {
  background: url('../images/logo.png') center center no-repeat transparent;
  background-size: 188px 189px;
  width: 188px;
  height: 189px;
  margin: 0 auto 30px;
  opacity: 0.7;
  padding: 0;
}

body.login h1 a:hover {opacity: 1;}</pre><p>كما ترى في الأعلى فقد قمت بتحديد العنصر <code>body.login</code> ثم <code>h1</code> الموجود بداخله انتهاءً بالوسم <code>a</code>، وقمت بعد ذلك باستخدام الخاصية <code>background</code> لوضع صورة الشعار الموجودة في مجلد images واستعمال بعض تنسيقات CSS بسيطة. لاحظ أيضًا أنني استعملت خاصية <code>background-size</code> كما هو في Wordpress 3.4 وخاصية <code>opacity</code> لتقليل شفافية الشّعار وإعادته إلى شفافيته كاملة عند وضع مؤشر الفأرة فوقه (hover).</p><p style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure4-loginlogo.jpg.a435cf995f918cd9d9589cfdcba3327c.jpg"><img data-fileid="4878" class="ipsImage ipsImage_thumbnailed" alt="Figure4-loginlogo.thumb.jpg.55bea339e1b2" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure4-loginlogo.thumb.jpg.55bea339e1b284da924736d2768e5016.jpg"></a></p><p>نريد أيضًا إخفاء عنصر <code>backtoblog#</code> لأننا لن نحتاجه فالشّعار سوف يفي بالغرض ليأخدنا إلى الصفحة الرئيسية للمدونة. يمكنني استعمال الكثير من تنسيقات CSS لتغيير جميع العناصر حتى تتوافق مع التصميم، وإذا أردت استبدال تنسيقات مكان أخرى فسوف أستعمل ids الموجودة في الصفحة و<code>important!</code> إن اضطررت لذلك.</p><pre data-pbcklang="css" data-pbcktabsize="4" class="css ipsCode prettyprint">form#loginform p.forgetmenot label {
  position: relative;
  background-image: url('../images/checkbox.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  padding: 2px 0 0 24px;
  height: 18px;
  display: inline-block;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  transition: none;
}

form#loginform p.forgetmenot label input[type="checkbox"] {
  position: absolute; 
  left: 0; 
  opacity: 0; 
  width: 20px; 
  height: 20px;
  display: block; 
  cursor: pointer;
}</pre><p>سنقوم الآن بتغيير التصميم الخاص بمربع الاختيار (checkbox) وذلك باستعمال <code>background-image</code> على الـتسمية (label) وإضافة بعض padding إلى اليسار وسوف نقوم بإخفاء مربع الاختيار نفسه. ولسوء الحظ، فإنه سيكون من الصعب تغيير الصورة عند النقر عليها وذلك لأن مربع الاختيار موجود داخل وسم <code>&lt;label&gt;</code>، وبالتالي سوف نضطر إلى استعمال jQuery.</p><h2>إضافة أكواد jQuery</h2><p>يمكننا استعمال jQuery لإضافة بعض التنسيقات أو attributes أو حتى تغيير أجزاء بعض العناصر، كما أنني أريد أن أضيف placeholders إلى حقول الإدخال وكذلك جعل مربع الاختيار يعمل مع بعض الصور الخاصة وكل ذلك سوف يتم داخل ملف login.js الموجود في مجلد "js" الخاص بالقالب.</p><pre data-pbcklang="javascript" data-pbcktabsize="4" class="javascript ipsCode prettyprint">$('#loginform input[type="text"]').attr('placeholder', 'Username');
$('#loginform input[type="password"]').attr('placeholder', 'Password');

$('#loginform label[for="user_login"]').contents().filter(function() {
  return this.nodeType === 3;
}).remove();

$('#loginform label[for="user_pass"]').contents().filter(function() {
  return this.nodeType === 3;
}).remove();</pre><p>يمكننا باستعمال jQuery إضافة placeholder إلى حقول الإدخال، ولكن ذلك لن يكون سهلًا بسبب وجود الحقول داخل وسوم <code>&lt;label&gt;</code> مما سيجعل عملية إزالة النص الخاص بالـتسمية أمرًا ليس باليسير. سوف نقوم باستعمال <code>()contents.</code> و <code>()filter.</code> لإزالة النصوص الخاصة بالـتسمية ليبقى لدينا placeholders فقط.</p><pre data-pbcklang="javascript" data-pbcktabsize="4" class="javascript ipsCode prettyprint">$('input[type="checkbox"]').click(function() {
  $(this+':checked').parent('label').css("background-position","0px -20px");
  $(this).not(':checked').parent('label').css("background-position","0px 0px");
});</pre><p>وكما قلنا سابقًا، فوجود مربع الاختيار داخل وسم <code>&lt;label&gt;</code> سيجعل عملية تطويع مربع الاختيار ليعمل كما نريد أمرًا صعبًا. فالطريقة التي من المفترض أن يعمل بها هو أنّه عندما يتم الضغط على التسمية (label) فإنّ مربع الاختيار سوف يتم اختياره (يصبح checked) وبالتالي تتغير الصورة التي أضفناها لتدل على أنه تم النقر على المربع، ولذلك قمنا باستعمال jQuery لنتفقد فيما إذا كان مربع الاختيار في حالة checked أو لا، فإذا كان في حالة checked فإن المحدد <code>checked:</code> سوف يعمل على تغيير موضعة الصورة (باستعمال <code>background-position</code>) واذا لم يكن كذلك فسوف يعود كل شيء إلى طبيعته.</p><h2>خاتمة</h2><p style="text-align: center;"><a class="ipsAttachLink ipsAttachLink_image" href="https://academy.hsoub.com/uploads/monthly_2015_09/Figure5-finaldesign.jpg.0ac57898cc48f3198175828130f8ff73.jpg"><img data-fileid="4879" class="ipsImage ipsImage_thumbnailed" alt="Figure5-finaldesign.thumb.jpg.04bf995f73" src="https://academy.hsoub.com/uploads/monthly_2015_09/Figure5-finaldesign.thumb.jpg.04bf995f731bf024656859784661c186.jpg"></a></p><p>كما رأيت، فقد قمنا بإنشاء لوحة تسجيل دخول بكل سهولة وذلك فقط باستعمال Wordpress functions ،CSS وjQuery ومن دون الحاجة إلى أي إضافات. <a rel="external nofollow" href="http://studentguidewebdesign.com/wp-login.php">يمكنك الإطلاع على النتيجة النهائية من هنا.</a></p><p>ترجمة -وبتصرف- للمقال: <a rel="external nofollow" href="http://line25.com/tutorials/create-a-custom-wordpress-login-without-plugins">Create a Custom WordPress Login Without Plugins</a> لصاحبه: Iggy.</p>
]]></description><guid isPermaLink="false">169</guid><pubDate>Thu, 17 Sep 2015 19:16:00 +0000</pubDate></item></channel></rss>
