Wordpressで自作テーマを作ってみる#2

underscoresリンク
でテーマをダウンロード。
このテーマには最小必要なものやよく使うものが一式入ってるので、ここから構築するのが楽ではある！

データの作成をする

前回はそもそもの投稿ページと固定ページの話であったり、作りたいサイト構成によってWordPressの構成も変わるという話をしました。
今回はもう少し踏み込んで、以下2つについて取り上げてみたいと思います。

メインループとサブループ
WordPressにおけるajax処理について

Contents

1 メインループとサブループ
- 1.1 メインループ
- 1.2 サブループ
2 WordPressにおけるajax処理について

メインループとサブループ

メインループやサブループという言葉。あまり聞き馴染みがないかと思います。
ループという言葉がある通り、何かしら繰り返すのかなと想像はできると思います。

ここでいうループは、WordPress特有で投稿一覧の取得をすることです。
書いた投稿はWordPressのMySQLデータベースのpostテーブルに格納されています。
ポートフォリオサイトなどを作成したりしたときに、投稿の一覧を取得して、ページに一覧表示したいことがあると思います。
この一覧で取得して繰り返し処理によって表示することをループと言います。

そしてループには2種類あり、それがメインループとサブループです。
この違いはどんなページにそのループ処理を書くかによって違います。

結論を話すと、

メインループは投稿ページで使う投稿内容のループ処理
サブループは固定ページで使う投稿内容のループ処理

のことを言います。
そしてメインループ、サブループ書き方が違うので、今回はそれについてまとめてみます。

メインループ

通常投稿ページは投稿ページにて表示します。
whileでループ処理を実現し、have_posts()でまず投稿があるかどうかを判定します。
have_posts()は特殊関数で、次に回す際に投稿があるかどうかを判定します。
例えば、投稿A、投稿B、投稿Cがあったとします。
まず最初have_posts()は投稿を探して、投稿Aがあるのでtrueになります。
投稿Aの処理が完了し、また上に戻りhave_posts()による判定をします。次に投稿Bがあるので、trueとなり投稿Bについての処理をします。
そして投稿Bの処理が完了し、また上に戻りhave_posts()による判定をして、投稿Cがあるのでtrueになり投稿Cについての処理をします。
そして投稿Cの処理が完了し、また上に戻りhave_posts()による判定をして、もう他に投稿がないのでfalseになり、while文から抜けます。
このようにhave_posts()は次に処理する投稿がまだ残ってるかどうかを判定するものになります。

サブループ

サブループは、固定ページにて投稿の一覧データをとってきたい時に使う方法です。
メインループも同じように投稿データをとってくるわけですが、
書くページによって書き方が変わるということに注意です！


 'post',
    'posts_per_page' => 12,
    );
    $the_query = new WP_Query($args);
  ?>
  have_posts()): ?>
    have_posts()) : $the_query->the_post(); ?>

WordPressにおけるajax処理について

Ajaxの作り方
Ajaxを使って
WordPressでも同様にこのような書き方でできるのでは？と思いましたが、うまく行きません。
一からWebサイトを作るとなったときは、jQueryなどで以下のようにして簡単に$.ajaxを実行して簡単に非同期処理の実装ができました。

ここは好みですが、ディレクトリを切って、それで通信処理をするようなイメージ
jqueryであれば、簡単な処理で構築ができます
じゃあこれをwordpressで適用して同じようにできるのでしょうか？
テーマエディタで1つajaxを受け取るファイルを作り、どこかでjqueryでajax通信する処理を構築
実はこれできません。ワードプレス特有の構築が必要になります。
今回はそんなワードプレスでのajax通信処理の構築について説明します
① admin.phpで
ajaxの通信名などを定義します

WordPressにてAjaxを使いたい場合は、色々と設定が必要になります。

Ajaxを処理するサーバのURLを指定

WordPressではajaxを処理するphpファイルとして、admin-ajax.phpが決められています。
なのでこのURLを指定します。なのでそのまま記載ですね。
このURLにリクエストすることにより、ajaxの処理をします。

function add_my_ajaxurl() {
?>

サーバ側での処理を記載する

上でリクエスト先を定義しました。
では次にどんな処理をするかを定義しましょう。
ポイントとしては、

処理の内容を記載する。
ajaxの名前を指定する。

この2点です。
1つ目はわかりますが、2つ目はなぜ？となりそうですが、上でリクエスト先のファイルは1つで、ajaxの処理を複数作りたいってなっても1つのファイルしかないので、どこで複数作れるようにするかというと、ajaxの処理に名前をつけることで複数のajaxを区別して構築することができるようになります。

以下でget_blog_data_ajaxという関数名でajaxの処理を書いてます。
そしておまじないで、
add_action("wp_ajax_< ajax名 >" , "< 処理する関数名 >");
を記載します。

add_action("wp_ajax_my_ajax" , "get_blog_data_ajax");
add_action('wp_ajax_nopriv_my_ajax', 'get_blog_data_ajax');
と記載してます。ajax名を「my_ajax」にしています。
下についてはログインしているときはajaxの処理を変えることができ、それを記載してます。


/* ajaxの処理を記載。jsからadmin-ajax.phpに送信するとここで処理をする想定 */
function get_blog_data_ajax() {
    $input1 = filter_input(INPUT_GET, "value1");
	$input2 = filter_input(INPUT_GET, "value2");
	$data = $input1 * $input2;
	echo $data;
    wp_die();
}
add_action("wp_ajax_my_ajax" , "get_blog_data_ajax");
add_action('wp_ajax_nopriv_my_ajax', 'get_blog_data_ajax');

javascript(jQuery)からリクエストする

以下はあるid属性がajax_testというbuttonタグを設置して、それをクリックしたときに上で構築したajax処理を実行するというコードです。
上では「my_ajax」というajax名をつけ、その処理をしたいので、以下のように送るデータにactionをキーにして、ajax名を指定します。
こうすることで、このリクエストでは「my_ajax」にリクエストをして処理をするということが伝わります。
（もちろん別のajaxを作成したときは、またそのajax名を指定することで処理が可能です。）

あとはjQueryでのajax処理と同じように記載することにより、ajax処理ができます。

$("#ajax_test").click(function(){
  var submit_data = {
    "action" : "my_ajax" ,   // action名をajax_test。functions.phpに登録したajaxの処理名であるajax_textを指定。
    "value1" : 100,
    "value2" : 200
  };
  $.ajax({
    url: ajaxUrl,
    data: submit_data
  }).done(function( res_data ){
    console.log(res_data);
  });
});

WordPressで自作テーマを作ってみる#2