php - قم بتحميل محتوى Wordpress إلى DIV باستخدام AJAX




jquery (3)

لقد نشرت سؤالاً قبل يومين حول كيفية التمرير إلى "نشر مفرد" في قالب Wordpress مخصص أقوم بتطويره. ما أحتاج إليه في غلاف الجوز هو تحميل مشاركة واحدة في DIV محدد عند النقر فوق ارتباط معين ثم التمرير لأسفل إلى ذلك DIV الذي يحمل المحتوى المحمّل حديثًا. وبالنظر إلى طبيعة المحتوى الديناميكي لـ Wordpress أو أي نظام CMS آخر ، لا يمكن أن يكون عنوان URL لهذا الرابط مطلقًا.

للأسف ، لم يكن هناك أي إجابة محددة حول ذلك الوقت ، لذلك قررت أن أتطفل قليلاً. وبما أن المشكلة الرئيسية كانت تحميل المحتوى ديناميكيًا ، فقد قررت تكبير كيفية إجراء ذلك باستخدام AJAX على Wordpress:

حتى الآن ، لقد حصلت على فكرة بسيطة من وظيفة كبيرة ( تحميل وورد بوست مع Ajax و jQuery ) من قبل إيمانويل فيروناتو. يقوم بشكل أساسي بتخزين معرف المشاركة في السمة rel للرابط القابل للنقر ثم يطلق عليه. حسنًا ، هناك بعض الخطوات الأخرى لجعل هذا العمل ، ولكن السبب في ذكر معرف المشاركة الآن هو أنه يبدو أن الجزء الوحيد من المعادلة ليس صحيحًا ؛ يتم تحميل معرف المشاركة في سمة rel الخاصة بالارتباط ولكنه يفشل في التحميل في دالة .load.

فقط لأعطيكم فكرة أفضل عن ما حصلت عليه في ترميزاتي حتى الآن:

THE AJAX / JQUERY IN HEADER.PHP

$(document).ready(function(){

    $.ajaxSetup({cache:false});
    $(".trick").click(function(){
        var post_id = $(this).attr("rel");
        $("#single-home-container").html("loading...");
        $("#single-home-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id});
    return false;
    });

});

INDEX.PHP

<?php get_header();?>

<!--home-->
<div id="home">

<!--home-bg-->
<img class="home-bg" src="<?php bloginfo('template_url');?>/images/home-bg.jpg" />
<!--home-bg-->

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>">

        <div class="box element col<?php echo rand(2,4); ?>" id="<?php $category = get_the_category(); echo $category[0]->cat_name; ?>">               

            <?php the_post_thumbnail(); ?>

            <span class="title"><?php the_title(); ?></span>    

            <span class="ex"><?php the_excerpt(); ?></span>

        </div>

    </a>

    <?php endwhile; endif; ?>

</div>
<!--home-->

<div id="single-home-container"></div>

SINGLE-HOME.PHP (هذا هو نموذج مخصص)

<?php

    /*
    Template Name: single-home
    */

?>    

<?php

    $post = get_post($_POST['id']);

?>

    <!--single-home-->
    <div id="single-home post-<?php the_ID(); ?>">

    <!--single-home-bg-->
    <div class="single-home-bg">

    </div>
    <!--single-home-bg-->

    <?php while (have_posts()) : the_post(); ?>

        <!--sh-image-->
        <div class="sh-image">

            <?php the_post_thumbnail(); ?>

        </div>
        <!--sh-image-->

        <!--sh-post-->
        <div class="sh-post">

            <!--sh-cat-date-->
            <div class="sh-cat-date">

                <?php

                    $category = get_the_category(); 
                    echo $category[0]->cat_name;

                ?>

                - <?php the_time('l, F jS, Y') ?>

            </div>
            <!--sh-cat-date-->

            <!--sh-title-->
            <div class="sh-title">

                <?php the_title();?>

            </div>
            <!--sh-title-->

            <!--sh-excerpt-->
            <div class="sh-excerpt">

                <?php the_excerpt();?>

            </div>
            <!--sh-excerpt-->

            <!--sh-content-->
            <div class="sh-content">

                <?php the_content();?>

            </div>
            <!--sh-content-->

    </div>
    <!--sh-post-->        

    <?php endwhile;?>

    <div class="clearfix"></div>    

    </div>
    <!--single-home-->

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

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


Answers

بدلا من استخدام:

var post_id = $(this).attr("rel");

يجب عليك جلب Href مباشرة. انهم على حد سواء نفس الشيء.

var post_id = $(this).attr("href");

هذا يساعد في شيئين:

  1. ترميز أقل في HTML الخاص بك
  2. يمكنك الابتعاد عن استخدام rel كصفة بيانات ، وهو ليس اختيارًا حكيمًا في الوقت الحالي باستخدام HTML5. ( اقرأ هنا )

حسنًا ، من خلال ضربة حظ وبعض القهوة مع السجائر ، تمكنت من حل المشكلة:

هذا ما فعلته:

1. اختبار إذا تم التقاط معرف المشاركة في سمة rel وتحميلها بشكل صحيح في متغير post_id

أدخلت مكالمة تنبيهية مرة أخرى على مقتطف AJAX / JQUERY لمعرفة ما إذا كان معرف المشاركة قد تم تحميله إلى المتغير post_id الأيمن أم لا. هكذا تبدو مثل:

$(document).ready(function(){

    $.ajaxSetup({cache:false});
    $(".trick").click(function(){
        var post_id = $(this).attr("rel");
        alert(post_id);
        $("#single-home-container").html("loading...");
        $("#single-home-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id});
    return false;
    });

});

لذلك عندما نقرت على الرابط ، أعطت معاودة الاتصال الرقم التعريفي الدقيق المرتبط بالبريد. هذا kinda عزل المشكلة إلى الأسفل إلى محدد موقع المعلومات في الدالة .load (). يبدو أن معرّف المشاركة غير كافٍ فقط لتحميل المشاركة في DIV محدد.

2. قم بتغيير سمة rel الخاصة بالرابط من معرف المشاركة لنشر رابط ثابت

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

<a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>"></a>

وهذا كيف يبدو الآن:

<a class="trick" rel="<?php the_permalink ?>" href="<?php the_permalink();?>"></a>

3. تحرير .load () وظيفة عنوان / قيمة

بعد ذلك ، اضطررت إلى إجراء تغيير على مقتطف AJAX / JQUERY بحيث لا يتم استخدام معرف المشاركة بعد الآن:

$(document).ready(function(){

        $.ajaxSetup({cache:false});
        $(".trick").click(function(){
            var post_link = $(this).attr("rel");
            $("#single-home-container").html("loading...");
            $("#single-home-container").load(post_link);
        return false;
        });

    });

كما ترون من قبل ، لقد أخذت قيمة السمة rel الخاصة بالرابط (والتي أصبحت الآن الرابط الدائم للوظيفة) وألقيناها في متغير post_link. يمكّنني هذا ببساطة من أخذ هذا المتغير ووضعه في الدالة .load () ، ليحل محل http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id} http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id} والتي من الواضح أنها لا تعمل.

VOILA! تم حل المشكلة.

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

لذلك إذا كان لدى أي شخص الرغبة في تحميل وظائف Wordpress ديناميكيًا إلى DIV محدد ، فيمكنك تجربة ذلك على الأرجح!


استخدم $.ajax() منخفض المستوى:

$.ajax({
  url: "/yourservlet",
  data: { },
  complete: function(xmlHttp) {
    // xmlHttp is a XMLHttpRquest object
    alert(xmlHttp.status);
  }
});

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

if (xmlHttp.code != 200) {
  top.location.href = '/some/other/page';
}




php jquery ajax wordpress