معلومات الكاتب بشكل جميل في مواضيع ووردبريس

بعد أن انتهيت من العمل على موقع تميز الاعمال تعلمت بعض الأشياء أثناء العمل عليه، و من هذه الأشياء طريقة عرض معلومات كاتب الموضوع في الموضوع الخاصة به.



مثال على المعلومات المعروضة في موضوع مفهوم القيادة أو في الصورة التالية

هذه المعلومات يتم أخذها و عرضها من معلومات العضو و التي يكتبها في العضوية الخاصة به في خانة المعلومات عنه كما في الصورة التالية

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

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


عرض معلومات الكاتب في المواضيع

أولا: قم بحفظ الصورة التالية داخل مجلد الصور Images في القالب الذي تستخدمه لووردبريس.

ثانيا: افتح الملف المسمى Single.php و الموجود داخل مجلد القالب الذي تستخدمه في ووردبريس.

قم بكتابة الكود التالي في المكان الذي تريد أن تظهر معلومات الكاتب فيه.

 
<span class="author">
<strong>كاتب المقالة:</strong>
<h4><?php the_author(); ?></h4>
<?php the_author_description(); ?>
<br /><br />
شاهد جميع مقالات الكاتب بالرابط أدناه:
<br />
<?php the_author_posts_link(); ?>
</span>


ثالثا: افتح ملف الستايل الخاص بالقالب، و ينتهي بالامتداد .CSS

قم بإضافة الكود التالي و الذي سيساعد في عرض المعلومات بشكل جميل.

span.author {
	color: #000;
	display: block;
	padding: 10px 50px 10px 5px;
	margin: 15px 0;
	font-size: 13px;
	border: 1px dotted #1a5d74;
	padding-right: 80px;
	background: #c9e7eb url(images/topicauthor.png) 98% 5% no-repeat;
}

رابعا: تأكد من رفعك للملفات كاملة إلى الموقع و هي، ملف الستايل CSS، الصورة topicauthor.png و الملف الذي عدلنا عليه و هو Single.php

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

أتمنى أن الطريقة أعجيتكم!

شريط تقدم عملية ما (ProgressBar) بإستخدام CSS مع جافا سكربت

سأقوم لاحقا إن شاء الله بشرح طريقة إستخدام شريط التقدم أو الـProgress Bar بإستخدام CSS مع جافا سكربت :razz:
شريط تقدم CSS-ProgressBar

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

كل ماعليك عمله هو تحديد النسبة المئوية للشريط :cool: و سيقوم الكود بتعبئة الشريط بالحركة التي تستخدم جافا سكربت. :mrgreen:

مع العلم بأن الحركة التي تظهر تتطلب أن يكون الجافا سكربت مفعلا في المتصفح.

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

توسيط الصور عن طريق CSS

غالبا ما يواجه مصممي المواقع الذين لا يتعاملون مع CSS و المبتدئين فيها (أمثالي) صعوبة في بعض الحالات و ذلك بسبب عدم معرفتنا باللغة بالشكل المناسب.

أحد الحالات التي نواجه فيها بعض الصعوبة هي توسيط الصور عن طريق إستخدام وسوم في ملف الأنماط المتتالية CSS خاصة ما إذا أردنا أن يكون الموقع مطابق لأحد المعايير القياسية المتقدمة على سبيل المثال فرضا XHTML Strict و التي تتطلب أن يكون التوسيط عن طريق ملف CSS فقط و ليس عن طريق كود HTML/XHTML.

متابعة القراءة »