أنشئ أداة Twitter مخصصة بدون مكون إضافي

-أداة-Twitter-مخصصة-بدون-مكون-إضافي.png


لقد سُئلت عدة مرات عن مكون WordPress الإضافي الذي أستخدمه لإنشاء قائمة “موجز Twitter” في تذييل موقعي. لا أستخدم في الواقع مكونًا إضافيًا على الإطلاق ، إنه مقتطف JavaScript من Twitter يعرض قائمة بتغريداتي الأخيرة التي صممتها باستخدام CSS. سأوضح لك في هذا البرنامج التعليمي:

  • كود HTML و Javascript أساسي لتنزيل أحدث التغريدات
  • نظرة عامة على علامات HTML ومحددات CSS ذات الصلة
  • مثالان على أدوات Twitter المخصصة التي استخدمتها بنفسي

تابع القراءة لترى بقية البرنامج التعليمي …

HTML ط جافا سكريبت

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

أولاً ، ضع الكود التالي حيث تريد أن تظهر القائمة:

<ul id="twitter_update_list"><li>Twitter feed loading</li></ul>

انتباه: ملف <li>Twitter feed loading</li> ليس جزءًا من الرمز الأصلي المقدم من Twitter ، ولكنه مطلوب للتحقق من رمز HTML. يمكن أن يقدم أيضًا رسالة مفيدة عند تحميل المصدر حيث يمكن أن يستغرق بضع ثوانٍ في يوم بطيء.

ثانيًا ، تحتاج إلى وضع سطور JavaScript التالية قريب جدا </body> كيف يكون هذا ممكنا.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>

لدي حاليًا أعلى رمز Google Analytics مباشرةً. يجب أن تبقي سطور JavaScript هذه منخفضة قدر الإمكان على الصفحة ، لأنه في حالة عدم تحميل Twitter ، سيتعطل كل شيء أسفل هذه الشفرة (وهي ليست مشكلة كبيرة إذا كانت موجودة بالفعل في الأسفل).

نظرة عامة على علامات HTML ومحددات CSS

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

<ul id="twitter_update_list">
<li><span>RT @<a href="http://twitter.com/Screenr">Screenr</a>: Cool Screenr update: Now your screencasts publish twice as fast. <a href="http://screenr.com/aDp">http://screenr.com/aDp</a></span> <a style="font-size: 85%;" href="http://twitter.com/themelab/statuses/14229492866">46 minutes ago</a></li>
</ul>
  • #twitter_update_list – يبرز القائمة بأكملها
  • #twitter_update_list li – حدد عناصر القائمة الفردية
  • #twitter_update_list li span – تحديد جزء “التغريد” من عنصر القائمة ، وليس الرابط منذ فترة
  • #twitter_update_list li span a – تحديد ارتباط في جزء “تغريدة” من عنصر القائمة
  • #twitter_update_list a[style="font-size: 85%;"] – تحديد رابط “مضى” بطريقة خيالية إلى حد ما (انظر الملاحظة أدناه).

انتباه: نظرًا لوجود نمط مضمّن في الرابط السابق يعيّن حجم الخط على 85٪ ، فإنه يجعل من الصعب بعض الشيء استبداله بدون مقتطف الاختراق. لقد استخدمت هذا من قبل لإعادة تعيين حجم الخط إلى نفس حجم باقي القائمة:

#twitter_update_list a[style="font-size: 85%;"] { font-size: 1em !important; }

ربما لا يعمل هذا في الإصدارات القديمة من IE بسبب “! جزء مهم. تستطيع ايضا استخذام display: block; لنقل هذا الارتباط إلى السطر التالي.

مثال حي

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

موجز Twitter لمختبر الموضوع

هذا هو الكود الذي أستخدمه للقائمة:

#twitter_update_list {
	font-size: 13px;
	line-height: 21px;
	list-style: none;
	}
#twitter_update_list li {
	background: url('images/twitter-divider.gif') bottom left repeat-x;
	padding-bottom: 7px;
	margin-bottom: 9px;
	}
#twitter_update_list span, #twitter_update_list span a {
	color: #ababab;
	text-decoration: none;
	}
#twitter_update_list a {
	color: #6f7276;
	}
  • يمثل السطر الأول القائمة بأكملها. يضبط حجم الخط ، ارتفاع الخط ، ويضمن عدم ظهور النقاط التعدادية.
  • يُنشئ السطر الثاني نسخة مكررة صغيرة 2 × 1 من الصورة أسفل كل عنصر قائمة كنوع من الفاصل. تحدد المساحة المتروكة المسافة بين التغريدة وأعلى الفاصل. الهامش هو المسافة بين الجزء السفلي من الفاصل والتغريدة التالية.
  • يحدد السطر الثالث لون التغريدة ، بما في ذلك الروابط ، ويضمن عدم ظهور أي خطوط أسفل الروابط.
  • السطر الأخير هو لون رابط “الوقت الماضي”.

و هذا كل شيء! إذا اضطررت إلى تغيير شيء واحد ، فسأميز بطريقة ما الروابط في التغريدة وربما أضيف تأثيرات اختطاف الرابط أيضًا.

يمكن استخدامه في أي موقع

على عكس كل الآخرين كيفية جعل XYZ بدون قابس لا يوجد رمز WordPress فعلي في هذا البرنامج التعليمي.

نظرًا لأنه لا يستخدم رمز WordPress ، فلا يتم حفظه مع دروس ووردبريس مجموعة. يمكن استخدامه على أي نوع من مواقع الويب تقريبًا ، بافتراض أنه يمكنك تحرير كود HTML و CSS.

إذا كنت ترغب في استخدامه في WordPress ، أقترح تحرير ملفات السمات يدويًا لإدراج سطرين من كود JavaScript في تذييل موقع الويب الخاص بك أو حتى ربطه بربط wp_footer ().

بالنسبة إلى الأداة نفسها ، يمكنك لصق الرمز في عنصر واجهة النص أو رمزه يدويًا في الشريط الجانبي (أو في أي مكان).

اقتراح

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



scroll to top