[WordPress]続きを読むをAjaxで読み込む

WordPressのテンプレート

動作はタイトルと概要と「続きを読む」ボタンを記事一覧に表示して、「続きを読む」ボタンを押すと、ボタンが本文に置き換わるということをやります。

まずはテンプレートファイルを普通（？）に作成します。
一覧を表示するための「index.php」と、本文を表示するための「single.php」ですね。

index.php

 
続きを読む


 

 





 

single.php

「index.php」では特に変わったことはないと思います。いつも通り「the_permalink()」でリンクします。
「single.php」で必要なところは「content」クラスに囲まれた部分だけなのですが、他の部分も作るっておくことでjavascriptがOFFときであったり、SEO的にもよろしいのではないのかと思います。

jQueryを書くheader.php

jQueryの部分はこうです。

header.php

14行目
event.preventDefault()
aタグのリンクが無効（？）になって画面遷移しなくなります。
16行目
$(this).attr(‘href’)
aタグで指定した「href（URL）」を取得します。
18行目
.load(page+’ div.content’)

ここでリンク先の「div.content」の部分だけ読み込みます。
Wordpressだからといって特別なことはないですね。
これだけでは心許ないところがありますが、とりあえずシンプルな例ということで。

参照
https://www.webopixel.net/wordpress/318.html