前回、ブラウザ標準搭載のAudio プレーヤー機能を素直に利用することで、自分のブログにて音声ファイルの再生が出来るようになりました。なんちゃってメソッドではあるものの、おかげで気分はだいぶ楽になっています。そこで今回は課題リストの最後、フッターの整理。
　いわゆる「about」代わりにflfl.meの簡単な自己紹介は載せていましたが、その他に何を掲載すべきか。例えば現時点での当ブログ「まわるフリフリのフリ」では、navメニューと「次回予告」ですが、音楽制作メモの方は、読者を想定するより、もっと自分の為の備忘録として機能的にしておきたい。というワケで、タグクラウドを置くことにします。果たしてタグクラウドとは何か！そんなものは僕以外の皆全員が既に知っている事なので割愛。

ウィジェットって言い難い

　そんなみんなご存知のタグクラウド、遅まきながら僕はイマ・ココから学び始めるワケなのですが、ネットの参考記事を色々あたってみると、その多くが「ウィジェット」を使ってページに埋め込めるよ、とある。ウィジェットって舌がもつれて非常に言いにくい（おまけにキータイプもしにくい）。なので、ウィジェットは使わない方向で行くとします。というワケでさらに調べてゆくと、タグクラウドを呼び出すタグの存在を知りました。

wp_tag_cloud();

　なるほど、読んで字の如く。ではまずローカルMAMP内のWordPressの方でテスト。素直にそれをフッターに設置している＜box03＞内にタイプしてみました（右端の濃いグレーのエリア）。おお、見るからにまさしくこれはタグクラウド！

　一体HTMLの方はどうなっているのかしらと中身を覗いて見ると、リンクはもちろんだけれど、なるほど直にフォントサイズとかclassとか指定しているんですね。さて、これはどうしたものか。

　デフォルトの状態でも、これはこれでタグクラウドっぽいから構わないかな…とも思いましたが、まあ、ここだけ明朝というのもアレですし、勉強がてら、どういう感じで外観を弄れるのか調べてみました。

やはり見た目はシンプルにする方向で

　大小織り交ぜたフォントサイズが特徴のタグクラウド。コチラの記事を眺めてみても、華やかで楽しい感じがしてイイです。でもその華やかさを実現するのに、またCSSに多くの設定を追加したり、あるいは専用のプラグインをインストールなどするのはなるべく避けたい（プラグイン同志のコンフリクトとか一切御免です）。やはりもっと質素な感じのものにしようと思います。

　上の参考記事を読んでみて「wp_tag_cloud();」のカッコ内にいろんな引数を入れることで、表示方法などを変更出来るということが分かりました。ただ、CSSファイルの方でタグクラウド全体を一括変更したいという場合に色々手間がかかりそうというか、仮配置した＜box03＞内へ向けて装飾の指定をしても、個々のタグクラウドの指定の方が強くて変更が効きません。

　そこで、タグクラウドで自動生成されるHTMLへのclassとかstyle等を、最初から除去できないか調べてみたところ、functions.phpの設定で出力を止める方法が紹介されている良記事を発見。

　記事最後に書かれてある「class、title、style　の出力停止」こそまさに僕の欲していたモノ、ドンピシャ。拝みつつ有り難くコードをコピー、functions.phpに追記ペーストさせていただきます。いつかちゃんと読み解くのを宿題とする。

function ex_wp_tag_cloud( $tags ) {
    $match = array(
        "/ class='tag-link-(d+)'/i",               　　　　　 //クラス、除去しないならこの行を削除
        "/ title='([^']+)'/i",                   　　　　　　　　 //マウスホバーで表示されるタイトル、除去しないならこの行を削除
        "/ style='font-size: d+(.)*d*(pt|px|em|%);'/i",    //文字サイズ
    );
    return preg_replace( $match, '',  $tags );
}
add_filter( 'wp_tag_cloud', 'ex_wp_tag_cloud' );

　再度HTMLの方を覗いて見ると…。classやstyleが除去されてスッキリ。素晴らしい。

　こうなれば後は好きなようにCSSの方で装飾設定できます。アレコレ試してみて、ひとまずはこんな感じにしてみました。

　この設定作業中、個々のタグが、単語の途中で折り返してしまうのはどうやって抑止出来るんだろうとアチコチ調べていたら、「display: inline-block;」というプロパティを使えばよいということが分かりました。

display: inline-block;

　実は気になりながらも放置していた、iPhone用CSSのタグに関わる該当部分をここで修正。「デモ音源：demo」がセルの途中で折り返してしまっていたのが（左）、セル単位で折り返しに修正されました（右）。つづく。

無事タグクラウドを配置できました。次回は引き続き、フッターの真ん中を埋めるアレコレです。

2014-08-10 ＞ VPS＆WordPress引っ越しメモ