قائمة صفحات قائمة المقال
1. تحميل مكتبة jQuery
نظرًا لأنه Ajax الذي يحركه jQuery ، فإن تحميل مكتبة jQuery أمر لا بد منه.
2. تنسيق قائمة المقالات
في صفحة قائمة المقالة الخاصة بك (index.php الصفحة الرئيسية ، الأرشيف.
<!-الحاوية التي تحتوي على جميع المقالات-> <div id = "content"> <!-حاوية لكل مقالة-> </div> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv>
3. أضف إلى التنقل الافتراضي
نظرًا لأن Ajax Paging في كل مرة يحصل على محتوى الصفحة التالية ، فأنت بحاجة فقط إلى استدعاء التنقل الافتراضي لـ WordPress. أضف الكود التالي إلى index.php (أو صفحة قائمة المقالة الأخرى) لإنشاء التنقل الافتراضي لـ WordPress.
<div id = "pagination"> <؟ php next_posts_link (__ ('load more')) ؛ ؟> </div>4.Ajax احصل على الصفحة التالية
أضف الكود التالي إلى ملف JS الموضوع الخاص بك
// استخدم Live () لجعل JS لا يزال صالحًا للمحتوى الجديد الذي تم الحصول عليه من خلال Ajax $ ("#تراجع A"). Live ("Click" ، function () {$ (this) .addClass ("loading"). text ("loading ...") $ (data). غير محدد) {$ (5.
إذا كنت ترغب تلقائيًا في تشغيل الصفحة عندما يتم تمرير الماوس إلى أسفل الصفحة ، فيمكنك تغيير الرمز إلى النمط التالي
// bind scroll event $ (window) .bind ("scroll" ، function () {// حدد ما إذا كان شريط التمرير الخاص بالنافذة قريبًا من أسفل الصفحة if ($ (document) .scrolltop () + $ (window) "post" ، url: $ (this) .Attr ("HREF") + " $ (#ترميم "). }) ؛}}) ؛6. إضافة CSS الملاحة
أضف قسم CSS إلى التنقل لتجميله. يمكنك أيضًا إعداد مخطط GIF للإشارة إلى أنه يتم تحميله. ما يلي هو نمط اللحن:
#pagination {padding: 20px 0 0 30px ؛ }#pagination .NextPostsLink {width: 600px ؛ اللون: #333 ؛ تدمير النص: لا شيء ؛ العرض: كتلة ؛ الحشو: 9px 0 ؛ محاذاة النص: المركز ؛ حجم الخط: 14px ؛ } #pagination .NextPostsLink: hover {background-color: #cccccc ؛ تدمير النص: لا شيء ؛ الحدود الحدودية: 5px ؛ -Moz-Border-Radius: 5px ؛ -webkit-border-Radius: 5px ؛ }#pagination .Loading {background: url ("Images/Loading.gif") 240px 9px no-repeat ؛ اللون: #555 ؛ }#pagination .loading: hover {background-color: شفاف ؛ المؤشر: الافتراضي ؛ }تعليق ترقيم
1. الاستعداد
تحميل مكتبة jQuery ، لم يتم شرح هذا.
2. افتح ترقيم صفحات تعليق WordPress
افتح WordPress Backend - الإعدادات - مناقشة ، تحقق من الصفحة لعرض التعليقات في "إعدادات التعليقات الأخرى" ، قم بتعيين عدد التعليقات. يتم حساب عدد التعليقات هنا فقط للتعليقات الرئيسية ، ولن يتم حساب الرد على التعليقات. لقد ملأت هنا رقمًا أكبر (15) ، لأن ترحيل التعليق مفصل للغاية وسيجعل من غير المريح للمستخدمين قراءة التعليقات السابقة.
بعد فتح تعليقات التعليقات في الخلفية ، أضف الكود التالي إلى حيث تحتاج إلى إضافة التنقل في الترحيل في التعليقات.
<nav id = "comments-navi"> <؟ php paginate_comments_links ('prev_text =؟ & next_text =؟') ؛؟> </nav>3. SEO من الترحيل
من وجهة نظر مُحسّنات محرّكات البحث ، سيؤدي الترحيل إلى محتوى مكرر (محتوى الترحيل هو نفسه ، والكلمات الرئيسية والوصف متماثلين) ، لذلك من السهل على المدونات التي تحتوي على العديد من التعليقات تخفيض حقوقها لأنها محتوى مكرر أكثر من اللازم. لذلك ، هناك حاجة إلى بعض العلاجات في كبار المسئولين الاقتصاديين. الطريقة الأكثر ملاءمة وفعالية هي استخدام علامات التعريف. أضف الكود التالي ضمن علامة التعريف الأصلية لرأسك.
<؟ php if (is_single () || is_page ()) {if (function_exists ('get_query_var')) {$ cpage = intval (get_query_var ('cpage')) ؛ $ commentpage = intval (get_query_var ('comment-page')) ؛ } if (! فارغ ($ cpage) ||! فارغ ($ commentpage)) {echo '<meta name = "robots" content = "noindex ، nofollow" />' ؛ صدى "/n" ؛ }}؟>4. Ajax تعليقات
وفقا لما ورد أعلاه ، هناك تعليق ترحيل في هذا الموضوع. لتحقيق تعليقات التعليقات في Ajax ، تحتاج فقط إلى JavaScript للتعاون. ومع ذلك ، قبل ذلك ، يجب عليك أولاً إضافة عنصر قبل قائمة التعليقات للإشارة إلى أن القائمة يتم تحميلها عند عرض قائمة تعليقات جديدة. افترض أن بنية وحدة التعليق لقالب الموضوع Comment.php كما يلي:
<div> <h3 id = "comments-listle-title"> التعليقات </h3> <!-عرض تعليقات جديدة تحميل-> <div id = "تحميلات التحميل"> <span> التحميل ... </span> </div> <!-قائمة التعليقات-> <ol> <li> ... </li> id = "Comments-Navi"> <a href = "#"> 1 </a> ... </nav> </viv>
أضف رمز JS التالي إلى ملف JS الخاص بك لتنفيذ ترقيم ترقيم التعليق
// التعليق paging $ body = (window.opera)؟ (document.compatmode == "CSS1COMPAT"؟ $ ('html'): $ ('body')): $ ('html ، body') ؛ // trigger the paging عند النقر على الرابط التنقل في الترحيل $ ('التعليقات navi a'). $ .ajax ({type: "get" ، url: $ (this) .Attr ('href') ، be Forresend: function () {$ ('#comments-navi'). remove () ؛ $ ('. comment_list'). remove () ؛ $ ('#load-comments'). $ (#التعليقات-title). الإزاحة (). 65} ، 800) ؛ $ (#-loading-comments). بعد النتيجة (500)) ؛CSS لحمل الشريط (للرجوع إليه فقط)
نسخة الكود كما يلي:
#تحميل القطع {display: none ؛ العرض: 100 ٪ ؛ الارتفاع: 45 بكسل ؛ الخلفية: #A0D536 ؛ محاذاة النص: المركز ؛ اللون: #fff ؛ حجم الخط: 22px ؛ Line-Leight: 45px ؛ }