ملاحظات و نصائح في تنسيق التدوينة في الوردبريس – YourColor

الوردبريس wp

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

أهم أسباب المشكلة

• المدونة مجانيّة. عادةَ في المدونات المجانية لا يستطيع المدوّن أن يعدل على قالب المدونة كما يريد.
• عدم فهم طريقة عمل المحرر المتطوّر في المدونة.
• محاولة نقل المفاهيم الدارجة في المنتديات إلى المدونات ومن ضمنها طريقة تنسيق المواضيع.
• “إتّباع الهوى” – البعض ينسقون مواضيعهم حسب المزاج ويعتقدون أنهم يحسنون صنعاً.

مظاهر المشكلة

• نجد أن كل تدوينة لها تنسيق مختلف عن باقي التدوينات في نفس المدونة.
• الخطوط إما أنها أكبر من اللازم أو أصغر من اللازم.
• عدم استعمال الخطوط المناسبة سواءً في النص أو في العناوين.
• عدم استعمال الفقرات وأحياناً تكون التدوينة بأكملها عبارة عن فقرة واحدة مكتظة.
• تلوين النصوص بشكل مفرط – أحمر، وردي، أخضر … الخ
• اتجاه النص يكون أحياناً من اليسار لليمين.

ما الحل إذاً ؟

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

كيف يعمل المحرر المتطور ؟

مدونة ووردبريس تستعمل المحرر WYSIWYG وهو اختصار للعبارة What You See Is What You Get أي (ما تراه تحصل عليه) والمقصود أنّ طريقة التنسيق التي تظهر لك أثناء كتابتك للتدوينة في لوحة التحكم هي نفس طريقة التنسيق التي سيظهر فيها الموضوع بعد نشره وفي الواقع هذا الأمر غير دقيق. المحرر المتطوّر يحتوي على أزرار كثيرة ولكل زر وظيفة معيّنة. بعض هذه الأزرار لها علاقة وثيقة بمحتوى ملف الستايل الموجود في القالب المستخدم في مدونتك.

ما هو ملف الستايل ؟

بلغة بسيطة ملف الستايل (style.css) هو عبارة عن ملف يحتوي على تعليمات معيّنة مسئولة عن تصميم المدونة ومن ضمن ذلك (أنواع الخطوط المستخدمة) (حجم الخطوط) (المسافة بين كل فقرة وفقرة) (ألوان الخطوط) (لون خلفية المدونة) … الخ. لكل قالب مدوّنة يوجد ملف ستايل. طبعاً لن أدخل إلى جميع التفاصيل المتعلّقة بملف الستايل لكن سأتطرّق لما يهمنا الآن في سياق تنسيق المواضيع واستعمال المحرر المتطوّر.

العناوين – الترويسات

بداية أرجو أن تراجع هذا [الموضوع] وأن ترقي مدونتك حتى يكون الشرح التالي مطابقاً لما تراه في مدونتك. بالنسبة للخطوط عليك أن تستخدمها وفق نظام معيّن.

نلاحظ بالصورة أعلاه بعض الخيارات مثل (فقرة) (ترويسة 1) (ترويسة 2) … حتى الترويسة رقم 6. هذه الترويسات عبارة عن عناوين ولكل ترويسة يوجد تنسيق خاص بها موجود في ملف الستايل. مثلاً الترويسة (1) تنسيقها في ملف الستايل كالتالي:

• السطر 89 – نوع الخط Arial
• السطر 90 – حجم الخط 30 بيكسل
• السطر 91 – الخط عريض (bold)
• السطر 92 – هامش العنوان
• السطر 93 – لون الخط

لنشاهد أمثلة على الترويسات في لوحة التحكم:

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

نشاهد بالصورة أعلاه أنّ الترويسة (4) لها خلفية صفراء بينما إذا أردت ترويسة مع إطار خفيف سأختار الترويسة (6). إذا أردت ترويسة تحتها خط أسود سأختار الترويسة (2). إذاً عليك أن تنسق العناوين مسبقاً في ملف الستايل وعندما تقوم بكتابة تدوينة جديدة ستعرف أن لكل ترويسة يوجد تنسيق خاص بها وعليك أن تستعمل الترويسات على حسب أهميّة العنوان فالعنوان الرئيسي نعطيه عادة الترويسة (1). عنوان فرعي كبير نعطيه عادة الترويسة (2). عنوان فرعي بمستوى أقل نعطيه عادة الترويسة (3) … الخ. مهّم جداً أن تستخدم الترويسات بشكل صحيح لأن محرك البحث يعطي الترويسة (1) وزناً أكبر من الترويسة (2) ويعطي الترويسة (2) وزناً أكبر من الترويسة (3) … الخ ولهذا الأمر تأثير كبير على أرشفة المواضيع في مدونتك.

النصوص

بعد أن فهمنا طريقة تنسيق واستعمال العناوين (الترويسات) نأتي للنص العادي والمقصود هو الخط الذي نستعمله لكتابة التدوينة. بنظري الخط Tahoma بحجم 11 حتى 13 بيكسل (بدون أن يكون في حالة Bold) هو أفضل وأرقى خط وشخصياً أستعمله في جميع مواقعي. اهتم أن تستعمل نفس الخط في جميع التدوينات حتى تحافظ على الأحادية. بالصورة التالية يظهر جزء من ملف الستايل المسئول عن الخط الذي سأستعمله في النصوص. لاحظ أنني اخترت الخط Tahoma بحجم 13 بيكسل. اقرأ في هذا السياق [الخطوط العربية : قواعد ، أفكار و حيل].

فقرات

اهتّم أن تتكوّن التدوينة من مجموعة فقرات وكل فقرة تنقل فكرة معيّنة. إذا أردت أن تبدأ فقرة جديد اضغط على (Enter) بينما إذا أردت أن تبدأ سطر جديد في نفس الفقرة اضغط في نفس اللحظة على زر (Enter) + زر (Shift). لنشاهد المثال التالي من لوحة التحكم:

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

نلاحظ بالصورة أعلاه أنني حصلت على النتيجة التي أريدها بالضبط. البعض يواجهون مشكلة عند الضغط على (Enter) لبدء فقرة جديدة ويتذمرون من عدم ظهور مسافة بين كل فقرة وفقرة. طبعاً الخلل في ملف الستايل. يجب أن تضع أمر في ملف الستايل وتخبره أنك تريد مسافة معينة بين الفقرات وهناك تستطيع أن تحدّد كم هي المسافة الفاصلة التي تريدها. في المثال أعلاه توجد مسافة 20 بيكسل بين الفقرة الأولى والفقرة الثانية ونشاهد بالصورة التالية الأمر المسئول عن ذلك في ملف الستايل:

بهذا نكون فهمنا كيف نكتب سطر جديد في نفس الفقرة وفهمنا أيضاً كيف نبدأ فقرة جديدة بحيث يكون بينها وبين الفقرة السابقة مسافة بسيطة.

استعمال القوائم والترقيم

لعرض المحتوى بشكل مرتّب ومنظّم استعمل القوائم والترقيم. يمكننا استخدام الأزرار التالية الموجودة في لوحة التحكم لهذا الغرض:

لنشاهد مثال من لوحة التحكم:

وهذه هي النتيجة بعد نشر التدوينة:

ويمكنك أيضاً أن تستخدم القوائم النقطية بدلاً من الرقمية. مثال:

وهذه الطريقة أفضل من حصر المحتوى في فقرة واحدة كهذه:

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

وهذا الجزء من ملف الستايل المسئول عن طريقة عرض القوائم الرقمية والمنقّطة:

الاقتباس

هناك زر خاص في لوحة التحكم للإشارة إلى النص المقتبس:

ونشاهد هنا مثال على نص مقتبس في المدونة:

وهذا الكود المسئول عن تنسيق طريقة عرض النص في ملف الستايل:

طبعاً يمكنك تنسيق الاقتباس حسب الطريقة التي ترغب بها وهناك أفكار ممتازة تجدها في هذا [الموضوع].

لا تنسَ أيضاً …

• أن يكون القالب المستخدم في مدونتك مخصّص للكتابة من اليمين لليسار. الكثير من المدونات تستعمل قوالب أجنبية غير معرّبة بشكل سليم وكثيراً ما نجد أنّ العبارات تبدأ من اليسار بالرغم من كونها مكتوبة باللغة العربية وأحياناً نجد أنّ النقطة تظهر في بداية الجملة بدلاَ من نهايتها.
• أن تمتنع قدر المستطاع عن تلوين النصوص والعبارات. لإبراز كلمة أو عبارة استخدم الزر (B) في لوحة التحكم. التدوينات التي تحتوي على نصوص وعبارات بألوان مختلفة تعطي المدوّنة جو مفعم بالصبيانية – الأمر الذي لن يفيدك خصوصاً إذا كان محتوى المدونة موّجه للبالغين أو المثقفين.
• أن تتجنّب الأخطاء الإملائية. صحيح، اللغة العربية ليست سهلة خصوصاً عندما تتورّط مع الهمزة. (اقرأ هنا الملاحظة رقم 7).

لا أفهم شيء بملف الستايل

قد يأتي الآن زائر ويقول شرحك جميل لكنني لا أعرف كيف أتعامل مع ملف الستايل ولا أعرف أصلاً أين يتواجد هذا الملف. صحيح، المستخدم العادي يريد أن يدوّن لا أن يعبث بملف الستايل لكن للأسف لا توجد حلول سحرية وأمامك الخيارات التالية:

1. تعلّم ألـ CSS. هناك مصادر كثيرة في النت متخصصّة بهذا المجال وللأسف لا يمكن شرح كل ما يتعلق بألـ CSS في تدوينة واحدة.
2. دع الخبز لخبازه – ابحث عن مصمّم متقن لعمله واستثمر وقتك في كتابة محتوى جديد.

تلخيص

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

في المرة القادمة سأتطرّق إن شاء الله إلى موضوع دمج الصور في التدوينة بشكل صحيح.

الاكاديمية العربية لفنون التصميم و الجرافيك

اعرض عناوين مواضيعك المجدولة في القائمة الجانبية – yourcolor

الووردبريس wp

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

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

لإظهار عناوين مواضيعك المجدولة في القائمة الجانبية ضع هذا الكود في ملف sidebar.php الموجود في مجلد القالب الذي تستخدمه.

<?php $my_query = new WP_Query(‘post_status=future&amp;amp;amp;amp;amp;order=ASC’); ?>
<?php if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
<li><a href=”<?php the_permalink() ?>” rel=”bookmark” title=” <?php the_title_attribute(); ?>”><?php the_title(); ?></a></li>
<?php endwhile; else: ?>
<li>لا يوجد مواضيع مجدولة حاليا</li>
<?php endif; ?>

هل لديك حل لمشكلة المواضيع المجدولة؟ شاركنا بها في تعليقك.

3 طرق لرفع أداء مدونتك وتسريعها – yourcolor

الووردبريس wp

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

1- رقِّ مدونتك لآخر نسخة.

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

2- احذف الإضافت غير الضرورية ورقِّ المستخدمة حاليا.

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

3- اضغط جداول قاعدة البيانات.

حاول أن تفعل ذلك بصورة دورية كل اسبوعين مثلا أو اقل من ذلك إذا كانت مدونتك تستقبل الكثير من التعليقات أو إذا كنت تضيف الكثير من المواضيع .

ارجع لهذا الموضوع لمعرفة كيفية ضغط جداول قاعدة البيانات

مفهوم قابلية الإستخدام للوورد بريس – yourcolor

الووردبريس wp

لقد قلت في الاكاديمية عن عناصر المدونة الناجحة أن أحد أهم الأشياء التي عليك أن تراعيها وتعطيها الكثير من الإهتمام إذا أردت أن تصنع مدونة ناجحة هو “قابلية الإستخدام” أو usability باللغة الإنجليزية. وقد تتسائل ما هو مفهوم قابلية الإستخدام وكيف لك أن تتأكد أن موقعك أو مدونتك تراعي هذه الأمر. سأحاول في هذه التدوينة أن أشرح لك خصائص هذا المفهوم ومتطلباته بسرعة.
لنبدأ بالسؤال التالي: في ظل وجود الملايين بل والبلايين من المدونات والمواقع، كيف تضمن تفوّق موقعك على المواقع الأخرى؟ قد تقول المحتوى. وهذا صحيح! لكن ما الفائدة في أن تمتلك “محتوى” (سواء كان ذلك معلومات أم عروض أم بضائع) لا يمتلكه غيرك ولكنك لا تستطيع أن تعرضه للزائر بطريقة مناسبة تمكنه الوصول إلى مبتغاه بسهولة وبسرعة؟ ثم لنفرض أنك تعرض نفس الشيئ لموقع أو مدونة أخرى، لماذا سأختار التعامل معك وليس مع الشخص الآخر؟ هذا هو بالضبط علم قابلية الإستخدام: أن تجعل موقعك أو مدونتك سهلة الإستخدام وجذابة للزائر وخالية من الأخطاء، سواء الإملائية أم المتعلقة بالتصميم.
يصبح السؤال الآن: كيف أصنع مدونة ذات قابلية للإستخدام؟ بالطبع لا توجد إجابة محددة.. فكل موقع مختلف ولكل مصمم أو مطوّر ذوق مختلف! ولكن هناك أشياء رئيسية عليك أن تتأكد من مراعاتها لتجعل الموقع سهل الإستخدام، وهناك أيضاً أخطاء شائعة عليك التغاطي عنها.

يكون الموقع واضحاً ليس فقط عندما يستطيع الزائر أن يجد ما يريد بسرعة و سهولة، بل عندما يستنتج بسرعة أن ما يبحث عنه غير موجود أيضاً! وهذا أمر مهم. فالهدف الأسمى هو أن تبني إنطباعاً جيداً عن وضوح وسهولة إستخدام الموقع أو المدونة.. وذلك ينطبق في حالة وجود أو عدم وجود ما يبحث عنه الزائر.
ولتحقيق ذلك لا بد أن تستخدم ألوان وخطوط وكلمات وتقنيات واضحة ومفهومة تجعل من إستخدام الموقع أمر ممتع وسهل. وذلك يعني تفادي الأخطاء الشائعة مثل إستخدام الخطوط الكبيرة جداً، والألوان غير المتناسقة،وتوسيط الخطوط، وتقنية الفلاش المزعجة. كل ذلك يضر بقراءة الزائر للمعلومات المتوفرة على الموقع ويحد من متعة تجربته له.
الأمر الآخر يكمن في التقنية المستخدمة لبناء الموقع. عليك أن تتأكد أن جميع الخدمات والروابط التي توفرها تعمل بشكل سليم وأنه لا يوجد أخطاء إملائية أوتصميمة، كأن يكون هناك تعليمات بالإنجليزية بدل من العربية مثلاً (خصوصاً إذا كنت تستخدم قالباً معرباً). عليك أيضاً أن تراعي أحجام الخطوط التي تستخدمها بحيث تكون متناسقة مع الصفحات والتدوينات المشابهة وأن لا تستخدم ألوان أو تصاميم غير متناسقة.
أخيراً، إذا كان موقعك يحتوي على دعايات فعليك أن تكون حذراً بأن لا تعرض دعايات تستخدم ألواناً أو خطوطاً أو صوراً لا علاقة لها نهائياً بمحتوى أو هيئة الموقع أو تكون متحركة بسرعة فائقة أو مضللة.
هذه ليس إلا بعض النصائح البسيطة… أرجو أن تستفيد منها!

تصميم المربعات CSS للوردبريس – yourcolor

الووردبريس wp

سأشرح لك في هذا المقال كيف تزيد من جاذبية مدونتك أو موقعك وكيف تثري تجربة زوّارك عن طريق إستخدام المربعات والصور الملائمة. لنفرض مثلاً أنك تريد لفت إنتباه الزائر إلى ملاحظة أو تحذير ما أو لتحميل ملف أو لكود في المدونة. يمكنك أن تستخدم تقنية css وأن تضع هذه الأمور في مربعات خاصة لها، ذات لون معيّن و تحتوي على صور مناسبة. كل ما عليك القيام به هو أن تعطي خصائص المربع (اللون والخلفية والخط .. إلخ) أو أن تصنع دالة جديدة للمربع وتعطيها الخصائص التي تريد.
لنفرض مثلاً أنك تضع في مدونتك أكواد html أو css أو php أو أي لغة أخرى (كما أعمل أنا في هذه التدوينة). بالطبع هذه الأكواد باللغة الإنجليزية ولذا يجب (إذا أردت أن تصنع مدونة ذات جودة عالية) أن تكون هذه الأكواد من اليسار إلى اليمين وأن تكون بصيغة Preformatted. دالة هذه الصيغة هي <pre> </pre> أي أن كل كود يوضع بين هذين القوسين هو على شكل Preformatted Code.
إذهب الآن إلى ملف style.css وعرّف خصائص دالة pre كما يلي:

pre
{
float:left;
direction:ltr;
font-size: 1.2em;
color: #000000;
margin: 10px;
padding:10px;
}

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

border: 1px solid #333333;
background-color: #dadada;

لم يتبقى سوى شيئ واحد مهم وهو خاصية overflow. تأكد من وضع هذه الخاصية حتى تمنع عرض سطور الأكواد الأعرض من مساحة المحتوى ووضع scroll bar في هذه الحالة. أضف:

overflow:auto;

إذن في هذه الحالة، سيكون الكود النهائي الذي أضفته كما يلي:

pre
{
float:left;
direction:ltr;
font-size: 1.2 em;
color: #000000;
margin: 10px;
padding:10px;
border: 1px solid #333333;
background-color: #dadada;
overflow:auto;
}

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

.box {‬
padding: 12px 40px 12px 3px;
clear: both;
width: 100%;
margin-top: 20px;
margin-bottom: 30px;
float:center;
text-align:justify;
direction:rtl;
border: 1px solid #bae2f0;
font-size: 13px;
line-height: 17px;
background-color: #e3f4f9;
font-weight: 500;
-moz-border-radius: 10px;
border-radius: 10px;
}‬

أما إذا أردت أن تضع صورة فكل ما عليك القيام به هو إضافة الكود التالي إلى الدالة:

background: url(images/icon.png) no-repeat right 1px;

حيث icon.png يساوي إسم الصورة. بالطبع، يجب أن ترفع الصورة إلى مجلد images داخل مجلد القالب.
هذا كل شيئ. يمكنك تعديل وتبديل ما تريد عبر الكود الذي وفرته لك. إذا لم تعرف ال CSS حاول تغيير الخصائص وتحديد تأثيرها وستتعلم من التجربة والخطأ. بالتوفيق.

إضافة woopra لاحصائيات مدونتك بدقة – yourcolor

إضافة woopra لاحصائيات مدونتك بدقة

أكيد الكل يهمه معرفة إحصائيات مدونته، وعدد الزوار، ومن أين جاؤا إلى موقعك، ومن الدول… الخ
من قبل كل هذه الخصائص كان يوفرها موقع رتب، لكن ابتداءا من اليوم وداعا لمثل هذه المواقع
إضافة woopra قمة في الروعة ومن خصائصها:
عدد الزوار، عدد الزيارات، الدول، تسجل اسم الزائر (يعني إذا كان الزائر واضع اسمه حقيقي في جهاز الكمبيوتر، يسجل اسمه)، المدة التي بقيها الزائر في المدونة، المتصفحات، أنظمة التشغيل، مقاس الشاشة، لغة الكمبيوتر، الصفحات التي زارها مع عدد زياراتها، التحميلات من المدونة، محركات البحث، كلمات البحث التي وصل من خلالها إلى مدونتك، والأوسمة … وهناك الكثير لا يمكن إحصاؤها
الجميل في هذه الإضافة أنها تؤرشف كل ما تسجل، يعني ليست مثلا كموقع رتب، يمكنك من الإطلاع على آخر 50 زيارة، بل بإمكانك مشاهدة ما حدث قبل شهور.
هذه صور للاضافة من لوحة التحكم:
طريقة التركيب:

لما يقبل موقعك تصلك رسالة بالبريد الالكتروني، تخبرك بذلك.
بعدها عليك تحميل الإضافة:
http://wordpress.org/extend/plugins/woopra/
ارفعها إلى مجلد plugins
وقم بتفعيلها
توجه إلى إعدادات، ثم ابحث عن woopra
أدخل رقم API Key(Optional
هذا الرقم تجده في هذه الصفحة:
توجه إلى: Members ثم my websites ثم ستجد بجانب اسم موقعك خيارات
اضغط على edit
ثم advanced
مثلما في الصورة:
بعد أن تحدث الإضافة، هناك أيضا وسيلة أخرى لتتبع الزوار مباشرة من سطح المكتب.
قم بتحميل برنامج woopra من صفحة التحميل في الموقع
ثبت البرنامج، ثم سجل الدخول الدخول باسم المستخدم وكلمة المرور واستمتع.

Widget لإشهار موقعك عن طريق زوارك – yourcolor

Widget لإشهار موقعك عن طريق زوارك

 

اليوم أثناء تصفحى و جدت آداه جميله تجعل زوار موقعك المشتركين فى موقع تويتر بإخبار من يتابعهم عن موقعك
فلنفرض مثلاً أن 1000 زائر من زوار موقعك مشترك فى تويتر
كل منهم يتابعه فى المتوسط 100 فرد
إستخدم منهم 500 فرد الآداه
إذاً فقد ظهر إسم موقعك ل 500*100 فرد = 50,000 شخص
كما يمكنك أنت أيضاً إستخدام الآداه فى إرسال جديد موقعك لتويتر
الآداه بسيطه جداً و الكود فى المرفقات
يمكنك بسهوله و ضعها فى widget و الإستمتاع بخصائصها]

مثال : http://crazy-eng.com/blog

تحميل

twitter_tool