web-dev-qa-db-ja.com

投稿を動的に読み込む

テンプレートの左側の列に投稿のリンクを階層的に並べて表示する方法と、リンクを選択すると右側の列に投稿が読み込まれますが、ページ全体が更新されないという解決策やガイダンスを探しています。

ありがとう、Deon

下記のMarfarmaのヘルプを更新

回答ありがとうございます。たくさんのページや記事を読んだ後、私はそれをうまく動かすことができました。私の注意点の1つは、右側の列にあるリンクのhref値が＃であることです。私は、ユーザーが上記のページに移動するためのトレーニングパスを選択するためのホームページ設定を持っています。しかし、ユーザーが特定のトピックにジャンプしたい場合に備えて、私はホームページに個々のリンクもあります。それで今私の問題はそれらを個別にコーディングしてそれらを単一の投稿テンプレートに移動させることができるということですが、ユーザーはリストから選択された正しいリンクトピックで上記のページに行きたいです。これがどのように達成されるか知っていますか？私はどういうわけか私はhrefとして正しいID /ポストスラッグを渡す必要がありますhrefとして＃を持っているのではなく、最初のステップを想定？それからどういうわけか私はJavaScriptを介して行われたことすべてにリンクすることができますか？助けてくれてありがとう。私が使ったコードは以下の通りです。

<?php
wp_enqueue_script( 'my-ajax-request', get_stylesheet_directory_uri( __FILE__ ) . '/js/ajax.js' );
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
?>

    <?php
    global $wpdb;
    global $post;
    $querystr = "
    SELECT * FROM $wpdb->posts
    LEFT JOIN $wpdb->postmeta ON($wpdb->posts.ID = $wpdb->postmeta.post_id)
    LEFT JOIN $wpdb->term_relationships ON($wpdb->posts.ID = $wpdb->term_relationships.object_id)
    LEFT JOIN $wpdb->term_taxonomy ON($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
    LEFT JOIN $wpdb->terms ON($wpdb->term_taxonomy.term_id = $wpdb->terms.term_id)
    WHERE $wpdb->terms.name = 'pathologist'
    AND $wpdb->term_taxonomy.taxonomy = 'category'
    AND $wpdb->posts.post_status = 'publish'
    AND $wpdb->posts.post_type = 'post'
    AND $wpdb->postmeta.meta_key = 'order'
    ORDER BY $wpdb->postmeta.meta_value ASC
    ";
    $pageposts = $wpdb->get_results($querystr, OBJECT);
    ?>


     <?php if ($pageposts): ?>
     <?php global $post; ?>
<div class="textwidget">
<ul id="nav">
<li class="list-title">Navigating your Workspace</li> 
<?php foreach ($pageposts as $post): ?>
<?php setup_postdata($post); ?>   
<li class="post" id="<?php the_ID(); ?>">
  <a href="#" class="ajax-click" rel="bookmark" title="<?php the_title(); ?>">
  <?php the_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>

そして上記のajax.js。

 jQuery(document).ready(function() {

     jQuery(".ajax-click").click(function() {
        jQuery("#loading-animation").show();
        var post_id = $(this).parent("li").attr("id");
        var ajaxURL = MyAjax.ajaxurl;

        jQuery.ajax({
        type: 'POST',
        url: ajaxURL,
        data: {"action": "load-content", post_id: post_id },
        success: function(response) {
             jQuery("#container-help-page").html(response);
             jQuery("#loading-animation").hide();
        return false;
    }
});
});
});
postsajax
3
Deon

これが私がそれに取り組む方法です。あなたがより詳細を必要とするならば、私にコメントで知らせてください。

1）最初のページのコンテンツ（デフォルトの右パネルのコンテンツと左パネルのリンクのリスト）を元に戻すテンプレートを作成します。リンクのid属性の値としてpost_idが設定されていることを確認してください。

2）左側のパネルでクリックされたリンクに基づいて、ajax呼び出しを使用して、右側のパネルのコンテンツを要求するJavascript要求関数を作成します。 id属性の値とコールバック関数を渡します（ステップ3から）。左側の各パネルリンクのonclickイベントに追加するinit関数を書きます。 init関数をページ読み込みイベントに追加します。

3）Javascriptコールバック関数を作成して、左側のパネルの内容をリクエストの結果に置き換えます。

4）WordPressがあなたのリクエストを処理する方法を認識するようにajaxアクションフィルタを追加します。また、投稿IDを受け取り、ページに送り返されるコンテンツを返すphp関数も必要です。 これはWordPressでのAjaxの使用に関するコーデックスページです。 フロントエンドからajaxを呼び出す際のajaxフィルターアクションの使用に関する重要な詳細は、以下のとおりです。 https://wordpress.stackexchange.com/a/53729/4645 phpコードをfunctions.phpファイルに入れるか、サイト固有のプラグインに追加してください。

5）すべてのJavaScriptをファイルに入れます。 functions.phpファイルまたはサイト固有のプラグインにエンキューしてください。 （これは特定のテンプレートのコードだけを読み込む方法のチュートリアルです。）

これはajaxを介した投稿のロードに関するチュートリアルです。始めるためのコードを提供します。

3
marfarma