wordpressのアレンジ覚書き

一年くらいしたら何をどうやったのか絶対忘れると思うので覚書しておきます。

12年ぶりに個人サイトを新規設置したくてWordpressに手を出した

12年前に作ったサイト（今も現役）はphpをフルスクラッチしたサイトで、初期設置当時からレスポンシブ対応してるのがちょっと自慢の同人小説サイトなのですが、そのサイトにはちょっと置きにくい別カプもののデータがまとまってきていて、pixivに複垢するよりサイトの方が使い良いので新規にサイトを作ることにしました。

またイチからHTMLなりphpなり触るのはもう面倒くさい……ということで、Wordpressに手を出すことにしました。
うーん、今のサイトの前のデザインの時更新告知ブログをMovableTypeで作ってた民なのでWordpressは初挑戦です。
より正確に言えば、前職で更新管理係はやってたんだけど、設置やカスタマイズは外部の業者さん任せだったので触ったことはあるけど基礎だけ！です。

長年お世話になっているロリポップ！さんでスタンダードプランのアカウントを一つ増やして簡単インストール機能にお任せです。

テーマはCocoonというやつにしてみた。小説同人のサイトようにカスタムしやすそうだったので。

テキストエディタでphpもcssもhtmlもベタ書きすること20数年なので、グラフィカルなデザインカスタムページに戸惑うことしきりです

こっちの方がはるかにわかりやすくてしっくりくる人種なのです……ナンテコッタイ

でもまあなんとかかんとか希望の形に近づいてきました

タグクラウドを活用したい

タグクラウド、たくさん作品のあるサイトでは便利だと思うんですよ。
使用数によって大きさが変わるのは統一感なくて好きでないので大きさは変わらないように設定変更しました。

せっかく機能があるので、作品傾向タグをつけて選べるようにしたいなと思ったんです。
サイドバーじゃなくてカテゴリページを表示した時にタグクラウドを表示して、表示中カテゴリで使用されてるタグのみを表示したかったのです。
これは検索するとそのまんまのカスタム用コードを公開している方がいました。

WordPress：カテゴリ別のタグクラウドを出す方法

まさにそれ！
なのでありがたくコピペしてfunction.phpとcategory-content.phpにぺたり。
エディタで見目を整えてそれらしく表示することはすぐできました。
先人の知恵万歳

こんな感じにすぐ表示ができるようになるの本当にすごいなあ。
ここに表示されている他にも「ほのぼの」タグのついたサンプルページがあるのですが、それは別カテゴリなのでここには表示されていません。

が、ここでこのタグクラウドのリンクをぽちっとすると、このカテゴリ（単発SS）以外の長編のファイルに含まれた同じタグのついたページも検索結果として表示されるのです。

長編と短編から　＞　短編を選択　＞　短編のタグクラウド表示　＞　コメディをクリック　＞　長編も含めたコメディタグの検索結果が表示される

というのは、私の希望の挙動と違うのです。
最後のところが　＞　短編カテゴリ内のコメディタグ検索結果が表示される
というかたちで、絞り込み検索をしたいのです。

タグクラウドの生成ページはブラックボックス

ブラックボックスとまでいうと言い過ぎと思いますが、WPのタグクラウドはショートコードを貼り付けることでタグクラウドとして発生するものです。
カテゴリごとに絞り込むスクリプトでやっていることは、WPの機能としてあらかじめ用意されているパラメータがいくつかあって、それを叩くことで絞ることができるようになっているようでした。
外からはサブルーチンを呼び出すだけでリンクを記述したHTMLの形で出力されるらしく、外からできるアレンジはあらかじめ決められているパラメータのみのようでした。

タグクラウドを生成しているコア部分のphpファイルを直接編集すれば容易にできる改修なのはわかるのですが、コアファイルを触ってしまうとアップデートに対応できなくなったりするので、できればテーマファイルを触るのに留めたい……

格納されている文字列をどこかの時点で拾ってきて再配列、hrefの末尾に今表示されてるカテゴリの引数、&cat=hogeを付け足せばいいということはわかりますが、それをどう実現するか丸一日悩みました。

HTMLとしてタグクラウドを生成しているコアファイルには触らない前提で複数のリンクタグに引数を付け加えたい……

javascriptってそういうの得意だよね

ショートコード書いて要求すると<a href=a><a href=b>...の形で渡されてしまう
これをスライスして加工してから再配列するのが最もスマートだと思うんですが、その方法がわからなかった私は、javascriptで後から処理すればいいのでは？と閃きました。
javascriptってそういう、「山田」って書かれたページの該当部分を全部「鈴木」に書き換えるとかそういうことができたはず……
昔Geocitiesで提供されてたクッソダサな掲示板をjavascriptで強制的に表示変えたりしてたよ……具体的にやってた内容思い出せないけど。

というわけでぐぐりまくりました。
まずやることは

・現在のカテゴリを取得する
phpでだったらカテゴリを取得するショートコードがあるからそれで一発なんだけど、javasvriptなのでlocation.searchしました。

・取得したクエリを分割処理する
「?cat=1」のような形もしくは「tag=1&cat=1」で取得されるので、&を基準にバラして。さらに=の前後でもバラす。

・タグでの絞り込みはカットする
・カテゴリは?がついてたら&に書き換えてタグのhref末尾に書き加える

var cid = location.search;
var recid = "";
   if (cid !== "") {
// クエリストリング毎に分割
var params = cid.slice(1).split("&");
// クエリストリング確認
       for (var i = 0; i < params.length; i++) {
           var param = params[i].split("=");
           var key = param[0];
           var value = param[1];
// tagのクエリを削除
if (key === "tag") continue;
// catのクエリを書き戻す
recid += "&";
recid += key + "=" + value;
       }
   }
$(function(){
 $('a.tag-cloud-link').attr('href',function(){return $(this).attr('href')+recid});
});

これで、現在のページに?cat=×が入ってればリンク記述に&cat=×として引き継ぐことができました。
記述内容は概ねいろんなサイトさんからの切り貼り＆改変です

敵はカテゴリの表示……

さて、とりあえず動作はするようになりました

ここで「ギャグ」のタグリンクをクリックすると、サンプル2にはギャグのタグ登録が含まれていないので、「サンプル（短編）」のファイルだけが表示されれば良いわけです

こう。
うーん、正しい。正しいんだけど、今どのタグで絞り込まれているのかがURLのタグidでしかわからない。それじゃみてる人にはまずわからないから不便

この、ファイルの「アイコン＋カテゴリ名（単発SS）」という表記の横か、タグクラウドのボックスの中の下に現在選択されているタグの日本語名が表示されればわかりやすいですよね。
ついでに「タグでの絞り込みを解除」でカテゴリ一覧に戻るリンクもあればなおよしですが、カテゴリ一覧に戻るのはカテゴリ名表示の上のパンくずリストからでも戻れます

理想としてはパンくずリストに
ホーム　＞　テキスト　＞　単発SS　＞　ギャグ
と絞り込み中のタグ名が入ればいいんですが、触るところが増えそうなのでこれは後回しにせざるを得ないかな。

再びphpで挑戦

WPのタグの元々持ってるパラメータを呼び出してphpで貼り付けることができないかな？と挑戦。
category-content.phpのカテゴリIDを取得しているところについでに

//タグIDも取得
$tag_title = get_query_var('tag');

と追加して
追加済みのタグクラウドのボックスの下に

<?php if($tag_title)echo '<div>「'.$tag_title.'」タグで絞り込み中）';?>

を追加しました。

……が、get_query_var('tag')で取得するのはタグのスラッグなので、英数字表記なんですね。

「ほのぼの」タグのidが8だったのでスラッグも合わせて8にしていると、こういうふうに表示されてしまいます。（文末に余分な「)」がついているのは表示を書き換えた際の消し忘れ）

スラッグは英数で……って書かれてるので、正攻法でやるなら全部のタグに対して

1＝"シリアス"
2="コメディ"
3="ギャグ"
4="恋愛"
5="ドタバタ"
6="胸糞"
7="両片思い"
8 ="ほのぼの"

みたいにあらかじめ表示用の日本語名を持たせることに……？
可能ではあるけど今後どんどんタグが増えていった時逐一この部分の記述を増やしていかないといけないのは無茶苦茶面倒くさい。
category_nameは呼び出せるのにタグはidとスラッグしか選択肢がないのなんでや！？！？

スラッグを日本語で書いてしまえばひとまず正しく表示はされます……が、スラッグって日本語使っても大丈夫なの？……検索したけど、SEOがどうこうとかいう記述しか出てこない。
同人系個人サイトで最初から検索よけ対策をするサイトなので、SEOどうこうが理由であれば全く無意味なのでここ日本語で書けば全部解決なんじゃが……？

とりあえず泥臭いやり方で実装……

うーん、あんまりいいやり方じゃないよなあと思いつつ

$tag_title = get_query_var('tag_id');
$tnames = array(
'8'	=> 'ほのぼの',
'9' => 'コメディ',
'11'=> 'ギャグ',
'10'=> 'シリアス'
);
$target = array_keys($tnames);
$replace = array_values($tnames);
$tag_name= str_replace($target, $replace, $tag_id);

として取得する情報をスラッグからIDにして、IDとタグ名の対応を手動表記

<?php if($tag_title)echo '<div>「'.$tag_name.'」タグで絞り込み中）';?>

とすることで正しい表示がされるようになりました。

うーん……でもこれ傾向タグを増やすたびに配列に対応を書き加え続けないといけないんですよ、面倒くさいですよ。

ここをこうすれば泥臭く配列書き加えなくても解決するよという方法、誰か教えてくだしあ……

get_query_var()に何でtag_nameってないのですか、category_nameはあるのに！

追記：できました！！！

やっぱりあったよー！タグのidからタグ名を引っ張ってこられるやつ！！

救世主はget_term_by()さんでした。いやまじ有能！！！

タグidとタグ名を泥臭くarrayに入れていたところを

////タグIDを取得してタグ名に変換
$tag_title = get_query_var('tag_id');
$tag_name = get_term_by('id' , $tag_title , 'post_tag');
$tag_name = $tag_name->name;

とすることで$tag_nameに常に現在表示されているページのタグの名前が表示されます。やったーうれしい！