WordPressにショートコードを追加してサイドバーのウィジェットにタグクラウドをアコーディオンで表示させる方法

10分

タグクラウドのイラスト

SHARE

記事投稿に比例して、タグの数がなかなか増えてしまうことがあります。

当サイトではSANGOのテーマで、サイドバーのエリアにタグクラウドを表示させていますが、記事投稿に比例してタグの数も増え結構なスペースをとってしまい、見難くなってしまいます。

そこで、サイドバーのタグクラウドにもっと見るボタンを設置して、非表示要素をスライドダウンで表示させるのを、ショートコードの追加と併せて実装させました。

読み込みは行われているので、処理が早くなるわけではありませんが、記事の投稿に比例してタグが増えた場合に見易くすることができます。

今回は、タグクラウドをアコーディオンで表示させる方法についてご紹介します。

アコーディオンのサンプル

実装後は、以下のアコーディオンの仕様でサイドバーのタグクラウド を開閉式に変更するデザインです。

この中にタグクラウド を表示させる。この中にタグクラウド を表示させる。この中にタグクラウド を表示させる。この中にタグクラウド を表示させる。この中にタグクラウド を表示させる。この中にタグクラウド を表示させる。この中にタグクラウド を表示させる。この中にタグクラウド を表示させる。この中にタグクラウド を表示させる。この中にタグクラウド を表示させる。この中にタグクラウド を表示させる。この中にタグクラウド を表示させる。この中にタグクラウド を表示させる。

もっと見る

実装後のイメージ

見出しの「タグ」の部分やタグ各種と個数が表示される仕組みです。

アコーディオン展開前のキャプチャ
アコーデイオン展開後のキャプチャ

ショートコードの設定手順

ショートコードを定義する為、functions.phpにコードを貼り付けして、CSSをstyle.cssに貼り付けしましょう。

そしてサイドバーのウィジェットエリアにショートコードを記述すると、アコーディオンで開閉するタグクラウドが表示されます。

STEP.1
ショートコードを定義
functions.phpにショートコードの内容を追記して新しいショートコードを定義します。
STEP.2
CSSを追加
style.cssにショートコードのCSSを追加してアコーディオンのデザインを整えましょう。
STEP.3
ショートコードを使う
任意の場所にショートコードが使用可能になります。

STEP.1 ショートコードを定義

ショートコードを定義するので、functions.phpに下記のコードを貼り付けします。

functions.phpのファイルを編集する場合は、事前にバックアップを取った上で編集し、記述を誤ると管理画面に入れなくなるので、編集は慎重に行うようにしましょう。

function.php 

//タグクラウドショートコード
function mytagsc() {
  ob_start();?>
<div class="content-wrap animated">
<h4 class="widgettitle dfont has-fa-before tagtitle">タグ</h4>
<div class="content-txt">
<div class="tagcloud">
<?php
$tags = get_tags('orderby=name&order=ASC');
$orderby = apply_filters( 'get_terms_orderby', $orderby, $args );
if ($tags) {
foreach($tags as $tag) { ?>
<a href="<?php echo get_tag_link($tag->term_id); ?>" class="tag-cloud-link" style="font-size: 8pt;"><?php echo $tag->name. '('.$tag->count.')'; ?></a>
<?php } ?>
<?php } ?>
</div>
  </div>
  <div class="more-btn">
    <p class="open">もっと見る</p>
  </div>
</div>
<script>
$(function() {
  $('.more-btn').on('click', function() {
    if( $(this).children().is('.open') ) {
      $(this).html('<p class="close">閉じる</p>').addClass('close-btn');
      $(this).parent().removeClass('slide-up').addClass('slide-down');
    } else {
      $(this).html('<p class="open">もっと見る</p>').removeClass('close-btn');
      $(this).parent().removeClass('slide-down').addClass('slide-up');
    }
  });
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('mytag', 'mytagsc');

STEP2. CSSを追加

次にCSSを定義します。style.cssに下記をコピーして貼り付けてください。

CSS 

/**
 * 自作のタグクラウド 
 * --------------------------------------------------
 */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.slide-down {
  -webkit-animation-name: slideDown;
  animation-name: slideDown;
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.slide-up {
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
}
.content-wrap {
  height: 220px;
  overflow: hidden;
  position: relative;
  margin: 0;
}
.close-btn, .more-btn {
  display: block;
  width: 100%;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr='#00ffffff',
      endColorstr='#ffffff',
      GradientType=0
    );
}
.close-btn {
  background: none;
}
.slide-up {
  height: 220px;
  padding-bottom: 0;
  overflow: hidden;
}
.slide-down {
  height: auto;
  overflow: visible;
  padding-bottom: 50px;
}
#custom_html-7 .more-btn p {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  background: #6bb6ff;
  padding: 5px 20px;
  width: 80%;
  border-radius: 4px;
position: relative;
font-weight: 600;
}
#custom_html-7 .tagcloud .close-btn {
  padding:0;
}
#custom_html-7 .close-btn p {
  background: #aaa;
}
.widget h4 + * {
	padding: 2%;
}
.tagtitle:before {
	font-family: "Font Awesome 5 Free";
	content: "\f02c";
}

STEP3. ショートコードを使う

外観＞ウィジェットの表示したいウィジェットエリアにショートコードを記述すると、アコーディオンで開閉するタグクラウド が表示されます。

ショートコード 

[mytag]

ウィジェット の貼り付け

コード一式

SANGOのテーマに、jQueryは既に<head>〜</head>の中で読み込まれているので問題ありませんが、それ以外のテーマや、記述がない場合には以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。

MEMO
当サイトでは以下のjQueryを使用しています。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
上記のような記述が、htmlファイルの
<head></head>
の中に無い場合その中へ貼り付けましょう。

コードを表示する

function.php 

//タグクラウドショートコード
function mytagsc() {
  ob_start();?>
<div class="content-wrap animated">
<h4 class="widgettitle dfont has-fa-before tagtitle">タグ</h4>
<div class="content-txt">
<div class="tagcloud">
<?php
$tags = get_tags('orderby=name&order=ASC');
$orderby = apply_filters( 'get_terms_orderby', $orderby, $args );
if ($tags) {
foreach($tags as $tag) { ?>
<a href="<?php echo get_tag_link($tag->term_id); ?>" class="tag-cloud-link" style="font-size: 8pt;"><?php echo $tag->name. '('.$tag->count.')'; ?></a>
<?php } ?>
<?php } ?>
</div>
  </div>
  <div class="more-btn">
    <p class="open">もっと見る</p>
  </div>
</div>
<script>
$(function() {
  $('.more-btn').on('click', function() {
    if( $(this).children().is('.open') ) {
      $(this).html('<p class="close">閉じる</p>').addClass('close-btn');
      $(this).parent().removeClass('slide-up').addClass('slide-down');
    } else {
      $(this).html('<p class="open">もっと見る</p>').removeClass('close-btn');
      $(this).parent().removeClass('slide-down').addClass('slide-up');
    }
  });
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('mytag', 'mytagsc');

CSS 

/**
 * 自作のタグクラウド 
 * --------------------------------------------------
 */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.slide-down {
  -webkit-animation-name: slideDown;
  animation-name: slideDown;
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.slide-up {
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
}
.content-wrap {
  height: 220px;
  overflow: hidden;
  position: relative;
  margin: 0;
}
.close-btn, .more-btn {
  display: block;
  width: 100%;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr='#00ffffff',
      endColorstr='#ffffff',
      GradientType=0
    );
}
.close-btn {
  background: none;
}
.slide-up {
  height: 220px;
  padding-bottom: 0;
  overflow: hidden;
}
.slide-down {
  height: auto;
  overflow: visible;
  padding-bottom: 50px;
}
#custom_html-7 .more-btn p {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  background: #6bb6ff;
  padding: 5px 20px;
  width: 80%;
  border-radius: 4px;
position: relative;
font-weight: 600;
}
#custom_html-7 .tagcloud .close-btn {
  padding:0;
}
#custom_html-7 .close-btn p {
  background: #aaa;
}
.widget h4 + * {
	padding: 2%;
}
.tagtitle:before {
	font-family: "Font Awesome 5 Free";
	content: "\f02c";
}

前の記事

SANGOタグ記事の出力のイラスト
SANGOのカード型デザインで同じタグを持つ記事を表示するWo…

次の記事

よくある質問ページに使えそうなjQueryのアコーディオンUI
アコーディオンのイラスト

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら