Webの記録

WordPressのウィジェットに表示した「タグクラウド」をカスタマイズしてみる

投稿日:2014年11月4日 更新日:

この記事は約 7 分で読めます。

tag

WordPressのタグクラウドを表示させる方法として、「ウィジェットに表示させる方法」と、「オリジナルのsidebar.phpにテンプレートタグを記述させる方法」と、2通りの方法があるようです。

「ウィジェットに表示させる方法」の場合、思うような表示ができなくて嫌だったので、表示順序・表示数やスタイルなどの設定など、今回いろいろ試しにいじってみました。

functions.phpにちょこっと記述、cssでスタイル設定をすれば、少しカスタマイズができることが分かりました。

でも・・・管理画面でこれを好きなように設定ができるようになれば、もう少し活用がしやすくなると思うんだけれど・・・。いつか改善させるといいな~と思いながら、メモです。



【2015.12.20追記】WordPress4.4になってから、今までのままだと崩れがでますので追記しています。

目次

  1. デフォルトの設定
  2. カスタマイズの方法


デフォルトの設定

<?php $args = array(
	'smallest' => 8,  // 最小のフォントサイズ
	'largest'  => 22, // 最大のフォントサイズ
	'unit'     => 'pt', // フォントサイズ単位(CSSで使用できる単位pt, px, em, %)
	'number'   => 45,     // 表示タグ数の上限
	'format'   => 'flat', // 表示フォーマット('flat'(横並び)、'list'(縦並び &lt;li&gt;&lt;/li&gt;)、'array'(表示されない。他のPHPコード用に使用する場合)
	'separator'  => "\n",   // 表示タグ毎の区切り
	'orderby'    => 'name', //並び替項目 'name'(タグ名)、'count'(投稿数)
	'order'      => 'ASC',  //並び順 'ASC'(昇順)、'DESC'(降順)、'RAND'(ランダム)
	'exclude'    => null,  // 除外するタグ 除外するタグのIDをカンマ区切りで列挙
	'include'    => null, // 表示するタグ 表示するタグのIDをカンマ区切りで列挙
	'topic_count_text_callback' => default_topic_count_text, //タグリンクにtitle属性を付与する関数 'default_topic_count_text'(標準で"~件のトピック"と付けられます。)
	'link'       => 'view', // リンク先 'view'(タグアーカイブページ)、'edit'(編集ページ)
	'taxonomy'   => 'post_tag', // クラウドに表示する項目 'post_tag'(タグ)、'category'(カテゴリー)、'link_category'(リンクカテゴリー)、'any other registered taxonomy'(全て)もしくは配列で複数指定する。
	'echo'       => true, // 表示有無 true(表示)、false(非表示:変数として使用する場合)
	'child_of'   => null, // see Note!
); ?>

上記の設定から変えたい部分をfunctions.phpで記述、そしてcssでスタイル設定をするという感じになるようです。

【参考】WordPress Codex


カスタマイズの方法

functions.phpに試しに以下のような感じで記述してみました

【2015.12.20追記】8行目に1行追加しました。

<?php
// テーマのタグクラウドのパラメータ変更
function my_tag_cloud_filter($args) {
    $myargs = array(
        'number' => 70,  // 70タグまで表示させる
        'order' => 'DESC', // 降順で表示
        'orderby' => 'count', //投稿数順で表示
    'echo' => false //ここを追加しました
    );
    return $myargs;
}
add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');
?>

画面表示させてみると、タグの並びや表示数がちゃんと変わってくれました

タグクラウドの表示を変えてみた

あとはcssでデザインを整えます。

※以下のcssは、【WordPress】ウィジェットのタグクラウドをプラグインを使わずにカスタマイズする方法|Niji-Lifeさまを参考にさせて頂きました。

.tagcloud {
  position: relative;
  overflow: hidden;
  padding: 0 22px 0 14px;
  text-align: left;
}
.tagcloud a {
  display: inline-block;
  background: #fbf8e5;
  white-space: nowrap;
  font-size: 98%;
  color: #a97837;
  line-height: 1.3;
  padding: 3px 8px;
  margin-bottom: 5px;
  text-decoration: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 2px solid #D4CFC1;
}
 
.tagcloud a:hover {
  color: #b54f41;
  text-decoration: underline;
}


これでWordPressのウィジェットに表示した「タグクラウド」をカスタマイズが出来ました!

ただfunctions.phpに記述するので、ちょっと間違うと画面が真っ白になります。私もこのブログを一瞬真っ白にしてしまいましたw
バックアップは先にしてから・・・記述をするようにしましょう!(教訓。。。)

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

WordPressサイトで表示高速化をいろいろやってみた。

この記事は約 1 分で読めます。 スマホなどでWebページを閲覧するようになって、表示が遅いサイトはせっかくアクセスしても表示されないまま諦めてしまうことが多々あります。 Googleが検索結果の順位 …

no image

ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法

この記事は約 1 分で読めます。「エックスサーバー」を利用する事が決まっていて、ドメインをどこで取得しようかな?と思った時、「エックスドメイン」という選択肢もあったのですが、今回は「ムームードメイン」 …

no image

パソコンでスマホやタブレットの表示を確認出来るGoogle Choromeデベロッパーツール

この記事は約 1 分で読めます。Webサイトを制作する時、コーディングしながら都度いろんなブラウザで表示確認をします。 レスポンシブサイトとなると、今まで以上に表示をいろいろ確認しながら・・・の作業に …

no image

右クリックで独自メニューを出して画像のコピーガード

この記事は約 1 分で読めます。 画像のコピーガードを3通り試しています。 今回は「右クリックで独自メニューを出す」方法を試してみました。 「右クリック禁止で画像のコピーガード」、 「透明画像を置いて …

no image

WordPressプラグイン「PhotoDropper」でフリー画像を記事にラクラク挿入♪

この記事は約 1 分で読めます。 photo credit: Remedios205 文字だらけの記事。ちょっと読むのがツライですね。。。 でも、イメージ画像がナイ!そんな時に使えそうなプラグインを探 …