CSSだけでアコーディオンを作る
jQuery
IT活用メモ
プラグインを使わずにhighlight.jsを使用する。
https://highlightjs.org/download/
プラグインはPageSpeed Insightsの評価が悪い。
参照
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