{“”type””:””PARAGRAPH””
في مقال اليوم سنعمل على إنشاء ملف نموذج هام في قالب ووردبريس الخاص بنا وهو الملف single.php الذي يستخدم بشكل أساسي لعرض وتنسيق جميع المنشورات أو المقالات الفردية المنشورة على موقع ووردبريس الخاص بك. يمكنك من خلال هذا الملف العام تخصيص صفحة أي منشور بشكل مرن، كما يمكنك إنشاء ملفات أكثر تخصيصًا للحصول على المزيد من التحكم في طريقة عرض منشورات بعينها في موقعك. على سبيل المثال يمكنك تخصيص طريقة عرض المقالات التي تنتمي إلى تصنيف معين أو التي تمت كتابتها من قبل مؤلفين معينين بشكل مختلف عن باقي المقالات، أو عرض أنواع المنشورات المخصصة (CustomPosts) بشكل مختلف وغيرها الكثير من الخيارات.. تابع فقرات هذا المقال وتعرف بالخطوات المفصلة على كيفية تخصيص هذا التمبلت، والمرونة الكبيرة التي يوفرها لك لتخصيص عرض مقالات موقع الويب الخاص بك.
محتويات المقالة كيفية إنشاء قوالب منشورات فردية مخصصة في ووردبريس. إنشاء ملف single.php وإضافة بيانات المقال له. إضافة أيقونات المشاركة على وسائل التواصل الاجتماعي أسفل المقال إنشاء ملف style.css لتنسيق المقال الخلاصة كيفية إنشاء قوالب منشورات فردية مخصصة في ووردبريس. كنا قد شرحنا في الدروس السابقة من سلسلة تطوير قوالب ووردبريس بأن أي ثيم ووردبريس يحتاج بشكل أساسي لملف النموذج الرئيسي index.php لعرض صفحات الموقع، وملف style.css الذي يتحكم في مظهر هذه الصفحات. وبينا أن يمكن لمطور القالب إضافة العديد من ملفات النماذج بشكل اختياري للمزيد من التخصيص. حيث أن ملفات نماذج القالب تتبع تسلسل هرمي محدد يتم من خلاله التأكد من أن أي مقال أو صفحة نقوم باستعراضها في موقعك لها ملف تمبلت مخصص مناسب لها ضمن هذا التسلسل ويتم استخدامه قبل غيره من ملفات التمبلت الأخرى التي يوفرها قالبك. إذا لم يوجد ملف مخصص بدقة لعرض الصفحة المطلوبة، يتم الانتقال للملف الموجود في مستوى أعلى في الهرمية (ملف أكثر عمومية) وهكذا حتى نصل في النهاية لملف التمبلت الأساسي للقالب index.php. في مقال اليوم سوف نكمل القالب الذي بدأنا تطويره في الدرسين الماضيين ( تطبيق عملي1 لبناء قالب ووردبريس و تطبيق عملي2 لبناء قالب ووردبريس ) ونعمل على إنشاء ملف تمبلت جديد في قالبنا هو ملف نموذج المنشور المفرد single.php كي يهتم بعرض مقالات الموقع وفق التصميم المطلوب. توضيح: كلمة المنشورات أو البوستات (posts) في ووردبريس تشمل عدة أنواع منها أنواع المنشورات الافتراضية ( Default Post Types ) في وودربريس، أو أنواع المنشورات المخصصة
وبالنسبة لملف single.php فهو يختص كما ذكرنا بعرض الصفحات المفردة لجميع أنواع المنشورات الافتراضية أو المخصصة باستثناء الصفحات الستاتيكية (page) فهذه الأخيرة يختص بها ملف نموذج مخصص يعرف باسم page.html والذي سنعمل على إنشائه وتخصيصه في دروس لاحقة من السلسلة. اقرأ المزيد: الفرق بين الصفحات (Pages) والمقالات (Posts) في الووردبريس بالنسبة لدرس اليوم سنهتم بإنشاء الملف single.php فقط من أجل تخصيص كافة مقالات موقعنا الفردية، ويمكنك بالطبع إنشاء ما تريد من ملفات نماذج أكثر تحديدًا لمقالات أو منشورات موقعك في حال كنت بحاجة لمزيد من التخصيص في أسلوب عرض هذه المنشورات كما هو مبين في الصورة التالية. التسلسل الهرمي لاستدعاء ملفات نموذج المنشور المفرد كما هو موضحة في الصورة أعلاه يستخدم الملف المسمى single- {post-type} .php لتخصيص عرض منشور له نوع معين، على سبيل المثال ففي حال كان لديك منشور من نوع مقال مدونة (post) فسوف يبحث ووردبريس عن الملف single-post.php لعرض المقال، وإذا كان لديك منشور مخصص من نوع منتج (product) فسوف يبحث ووردبريس عن ملف مخصص باسم single-product.php لعرضه وهكذا.. إذا لم يجد ووردبريس ملف مخصص لنوع المنشور المحدد ضمن مجلد القالب، سيبحث عندها عن وجود ملف باسم single.php لعرض المنشورات أيًا كان نوعها، وفي حال لم يجده يبحث عن وجود الملف الاحتياطي singular.php ويستخدمه، وفي حال لم يجده كذلك سوف يعود كما ذكرنا للملف الأساسي index.php في نهاية المطاف ويعتمد عليه بعرض المنشور. يعتمد معظم مطوري القوالب عند تطوير قوالبهم المخصصة على إنشاء ملف التمبلت single.php فقط في قوالبهم لتبسيطها قدر الإمكان، فهذا الملف محدد بدرجة كافية لعرض المنشورات المفردة ولا داعي لإنشاء ملفات أكثر تخصيصًا. في الفقرات التالية سنبدأ بإنشاء الملف single.php مجلد القالب، وسنعتمد عليه لتنسيق جميع المنشورات أو المقالات الفردية على موقعنا. حيث نريد عند النقر فوق عنوان أي مقال على الصفحة الرئيسية أو أحد صفحات الموقع الأخرى والانتقال لصفحة هذا المقال أن تظهر لنا صحفة تتضمن عناصر المقال وفق المخطط الهيكلي التالي: الإطار الشبكي لصفحة المقال المفرد للموقع إنشاء ملف single.php وإضافة بيانات المقال له. علينا أن ننشئ في البداية ملف جديد باسم single.php في مجلد القالب الخاص بنا (الموجود في الدليل في الدليل wp-content < themes ضمن المجلد الجذر لموقعنا) ونضيف الكود اللازم لعرض البيانات المطلوبة في صفحة المقال المفرد. بداية نستدعي في ملف التمبلت كل من هيدر وفوتر الموقع اللذان أنشأناهما في الدرس السابق من خلال الدالتين get_header() و get_footer() وبينها نكتب وسم
بعدها وضمن الوسم
‘, ‘
‘ ); ?>
التصنيف
مكتوب من قبل | بتاريخ
إضافة أيقونات المشاركة على وسائل التواصل الاجتماعي أسفل المقال بعدها كما تلاحظ في الإطار الشبكي علينا أن نعرض أيقونات ل مشاركة عنوان المقال ورابط المقال الحالي عبرحسابات الشبكات الاجتماعية الخاصة بنا، الفكرة هنا أن عليك إدراج أيقونات لكل شبكة من الشبكات التي تريدها ونحن هنا سوف نستخدم أيقونات متجهة SVG ونضمن أكواد هذه الأيقونات من خلال الوسم
هذا كل شيء سنضيفه في صفحة المقال المفرد في قالبنا في هذا الدرس. في درسنا التالي سنكمل معلومات صفحة المقال ونضيف لها القسم المخصص لعرض نموذج التعليقات إضافة للتعليقات نفسها بعد أيقونات المشاركة الاجتماعية. الآن يتوجب علينا تنسيق كل هذه المعلومات بالشكل المطلوب من خلال كتابة التنسيقات المطلوبة في ملف تنسيقات القالب style.css إنشاء ملف style.css لتنسيق المقال بعد أن جلبنا البيانات المطلوبة لصفحة المقال المفرد، علينا الأن تصميم صفحة هذا المقال لتظهر العناصر كما هو مطلوب وفق المخطط الشبكي المقترح. لذا قم بتحرير ملف تنسيقات القالب style.css بمحرر الأكواد وأضف أكواد تنسيق العناصر التي أضفتها للملف single.php في نهايته كما يلي: /* Single Post Content*/
main.post {
max-width:100%;
margin: 0 auto 2rem auto;
padding: 0 1rem;
}
h1.post-title {
position: realtive;
padding: 1em 0;
margin: 0;
text-align:center;
color: #553c9a;
}
section.post-mata p {
max-width: 768px;
margin: 1rem auto;
}
.ptitle-image {
height: 600px;
max-width: 100%;
border-radius:5%;
display: block;
margin: 2rem auto 0 auto;
}
p.categories, span a
{color: white;
text-decoration: none;}
p.categories span {
background-color: #553c9a;
}
span a:hover {
color: #c1afd4;
}
main.post .content
{
max-width: 768px;
margin: 3rem auto;
}
main.post .content figure {
margin: 1rem 0;
text-align: center;
}
main.post .content figure img {
max-width: 100%;
border-radius:5%;
display: block;
}
main.post .content figure figcaption {
text-align: center;
color: #553c9a;
}
main.post .social {
display: flex;
justify-content: center;
align-items: center;
border-top: 2px solid #553c9a;
justify-content: center;
gap: 1rem;
font-size: 1rem;
}
.icon {
stroke: white;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
fill: #553c9a;
width: 50px;
height: 50px;
}
main.post .social a:hover {
transform: scale(1.1);
}
main.post .social a.social-twitter:hover .icon {
stroke: #c1afd4;
}
main.post .social a.social-linkedin:hover .icon {
stroke: #c1afd4;
} الآن قم بعرض الموقع في المتصفح، وقم بالنقر فوق أحد عناوين المقالات المنشورة في الموقع للانتقال لصفحة هذا المقال وستجد أن المقال سيظهر بالشكل التالي: صفحة المقال بعد إضافة التنسيقات الخلاصة في مقال اليوم تعرفناعلى طريقة إنشاء وتخصيص الملف single.php المسؤول عن عرض المنشورات الفردية على موقع ووردبريس بشكل مختلف عن قائمة المقالات المعروضة على الصفحة الأولى للموقع وعن طريقة عرض الصفحات الثابتة للموقع.. وقد اعتمدنا في هذا الملف بشكل أساسي على كود حلقة ووردبريس كنا قد استخدمناها في درس سابق عند إنشاء ملف التمبلت index.php مع بعض الاختلافات الطفيفة هنا في المعلومات التي تجلبها الحلقة. وقمنا أخيرًا بإضافة التنسيقات المطلوبة لعرض هذا الملف من خلال تعديل ملف تنسيق القالب style.css ليظر بالشكل المطلوب وفق مخطط التصميم المقترح. يمكنك تحميل ملفات التطبيق العملي (3) لبناء قالب ووردبريس من خلال النقر على الزر التالي تحميل القالب #تطويرقالبووردبريس