月: 2019年7月

投稿日:

[css]クリックで表示・非表示の切り替えができるボックス（続きを読む）

cssのみで表示と非表示の切り替え

アニメーションするバージョン
https://neco913.kirara.st/post-706/

コンテンツをグラデーション表示、「続きを読む」ボタンを押したらその場で全文表示、ボタンは「閉じる」に替わる

[パーツ]「続きを読む」以下をグラデーションで隠すボタン

投稿日:

[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