質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

3634閲覧

WordPressのAjaxの結果に反応がない

komiglas

総合スコア18

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2019/01/15 06:38

編集2019/01/15 06:41

各それぞれのカテゴリをクリックしたら非同期通信で、そのカテゴリだけが表示されるという仕組みを開発中なのですが、
「wp/wp-admin/admin-ajax.php」に渡しても何も返事が帰って来ず、
また「wp/wp-admin/admin-ajax.php」を直接叩いたら「0」だけが返されていました。
どのようにして期待通りに絞りこまれたものが出力できるようにすれば良いでしょうか。

■JavaScript(jQuery使用)

let mainUrl = location.href.replace(/works/g, ''); let ajaxURL = mainUrl + 'wp/wp-admin/admin-ajax.php'; // WordPressでAjaxを使うときの送り先 let catSlug; $('#worksCategorise').find('a').on('click', (event) => { const el = event.currentTarget; catSlug = $(el).data('cat'); // data-cat属性の値を取得 console.log(catSlug); $.ajax({ type:'POST', url: ajaxURL, cache: false, timeout: 3000, data: { 'action':'my_ajax_get_posts', // 処理を行う関数名 'slug': catSlug // カテゴリースラッグを変数として渡す }, }).then({ function(response) { // 成功時の処理 articleOuter = $('#articleOuter'); responseHtml = response; // 返されたデータを変数に格納 articleOuter.html(''); articleOuter.html(responseHtml); // my_ajax_actionで生成されたデータ(response)を再度挿入する }, function(response) { // エラー時の処理 articleOuter.html(''); articleOuter.html('エラー:読み込みに失敗しました。'); // エラー時のメッセージ } }); });

■functions.php

/* ---------------------------------------------------------------------------------- カスタム投稿タイプ ---------------------------------------------------------------------------------- */ add_action('init', 'create_post_type'); function create_post_type() { // 制作実績 $works_labels = array( 'name' => '制作実績', 'menu_name' => '制作実績', 'singular_name' => '制作実績', 'add_new_item' => '新しい制作実績を追加', 'add_new' => '新規追加', 'new_item' => '新しい制作実績', 'view_item' => '制作実績を見る', 'edit_item' => '制作実績を編集', 'search_items' => '制作実績を検索', 'not_found' => '制作実績が見つかりません', 'not_found_in_trash' => 'ゴミ箱に制作実績はありません', 'parent_item_colon' => '親の制作実績:', ); $works_args = array( 'taxonomies' => array('works_taxonomy'), 'labels' => $works_labels, 'hierarchical' => true, 'description' => '', 'supports' => array('title','editor','thumbnail','excerpt','custom-fields'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'publicly_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => array( "slug" => "works", "with_front" => false ), 'menu_icon' => 'dashicons-images-alt2', 'capability_type' => 'post', 'menu_position' => 5, ); register_post_type('works', $works_args); // 制作実績のタクソノミー register_taxonomy( 'works_taxonomy', array('works'), array( 'hierarchical' => true, 'update_count_callback' => '_update_post_term_count', 'label' => 'ジャンル', 'singular_label' => 'ジャンル', 'public' => true, 'show_ui' => true, 'query_var' => true, 'rewrite' => array( "slug" => "works", "with_front" => false ) ) ); } // カスタムナビゲーションにてカテゴリーリスト作成 register_nav_menus(array('menu-categorise' => 'works_category_list')); // 制作実績のAjax受け渡しの関数 function my_ajax_get_posts() { $query = new wp_query(array( 'term' => $_POST['slug'], // $.ajaxで渡されたカテゴリースラッグが入る 'post_type' => 'works', 'taxonomy' => 'works_taxonomy', // カスタム分類 works_taxonomy 'posts_per_page' => 20 )); if($query->have_posts()) { while($query->have_posts()) { $query->the_post(); echo '<li class="articleInner">'; echo '<a href="'.get_the_permalink().'">'; echo '<h2>'.get_the_title().'</h2>'; echo '</a>'; echo '</li>'; } } wp_reset_query(); die(); } add_action('wp_ajax_my_ajax_get_posts', 'my_ajax_get_posts'); add_action('wp_ajax_nopriv_my_ajax_get_posts', 'my_ajax_get_posts');

■archive-works.php

<?php //カスタムメニューを使用 $menu_name = 'menu-categorise'; if(($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) { echo '<ul id="worksCategorise">'; $menu = wp_get_nav_menu_object($locations[$menu_name]); $menu_items = wp_get_nav_menu_items($menu->term_id); foreach((array)$menu_items as $key => $menu_item) { $title = $menu_item->title; // カテゴリー名 $url = $menu_item->url; // カテゴリーURL $slug = explode('/', $url); // カテゴリーURLを / 区切りで分割してスラッグを取得 $last_slug = end($slug); // 配列最後のカテゴリー名 echo '<li style="display:inline-block;"><a data-cat="'.$last_slug.'" href="javascript:void(0);">'.$title.'</a></li>'; } echo '</ul>'; } ?> <ul id="articleOuter"> <?php $the_query = new wp_query(array( 'term' => 'all', 'post_type' => 'works', 'taxonomy' => 'works_taxonomy', // カスタム分類 works_taxonomy 'posts_per_page' => 20 )); ?> <?php if ( $the_query->have_posts() ) while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <li class="articleInner"> <a href="<?php the_permalink(); ?>"> <h2><?php the_title(); ?></h2> </a> </li> <?php endwhile; ?> </ul> <?php wp_reset_postdata(); ?>

以上、ご教示のほどお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

自力解決しました、
jsの記述で成功と失敗の部分をdoneとfailに書き換えて、
渡される引数は「response」ではなく、「data」で取得できました。

let mainUrl = location.href.replace(/works/g, ''); let ajaxURL = mainUrl + 'wp/wp-admin/admin-ajax.php'; // WordPressでAjaxを使うときの送り先 let catSlug; let articleOuter; $('#worksCategorise').find('a').on('click', (event) => { const el = event.currentTarget; catSlug = $(el).data('cat'); // data-cat属性の値を取得 //console.log(catSlug); $.ajax({ type:'POST', url: ajaxURL, cache: false, timeout: 3000, dataType: 'html', data: { 'action':'my_ajax_get_posts', // 処理を行う関数名 'slug': catSlug // カテゴリースラッグを変数として渡す }, }).done(function(data, textStatus, jqXHR) { // 成功時の処理 articleOuter = $('#articleOuter'); articleOuter.html(''); articleOuter.html(data); // my_ajax_get_posts関数で生成されたデータ(data)を挿入 }).fail(function(jqXHR, textStatus, errorThrown) { // エラー時の処理 articleOuter.html(''); articleOuter.html('エラー:読み込みに失敗しました。'); // エラー時のメッセージ }); });

投稿2019/01/15 08:33

komiglas

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ajax通信によるPOST送信をサーバーが受信しているかどうか
→アクセスログやエラーログを調査。

受信していれば、受信パラメータをデコードして処理する中でエラー終了していないかどうか
→エラーログを調査。

っていう基本的なところは押さえましたか?

投稿2019/01/15 06:46

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

komiglas

2019/01/15 07:03

ChromeのデベロッパーのNetworkからエラーログやアクセスログ見ましたが、 「admin-ajax.php」を認識し、クリックされたカテゴリの情報を取得し、正常に受信しています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問