【WordPress】タグクラウドを自作する方法

2018年11月15日
PHP
WordPress
タグクラウド

WordPressでタグクラウドを設置する際に、プラグインを使いたくなかったため自作した。

手順

タグクラウドを表示するクラスを定義する

下記のクラスをPHPファイルに定義する。

出力するタグやそれに付与する属性を任意で指定するため、wp_tag_cloud関数を使用せずに実装してある。

class TagCloud {
    private function __construct() {}

    public static function show() {
        $tags = get_tags();
        if ( $tags === [] ) return;

        echo '<section class="tag-cloud">';

        self::show_title();
        self::show_items( $tags );

        echo '</section>';
    }

    private static function show_title() {
        echo '<h3 class="title">タグクラウド</h3>';
    }

    private static function show_items( $tags ) {
        echo '<ul class="items">';
        $current_uri = self::get_current_uri();

        foreach ( $tags as $tag ) {
            $uri        = esc_url( get_tag_link( $tag->term_id ) );
            $is_current = $uri === $current_uri;
            $classes    = $is_current ? 'item current' : 'item';
            $content    = esc_html( $tag->name );

            self::show_item( $classes, $uri, $content );
        }

        echo '</ul>';
    }

    private static function get_current_uri() {
        $protocol   = is_ssl() ? 'https://' : 'http://';
        $uri        = $protocol.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

        return $uri;
    }

    private static function show_item( $classes, $uri, $content ) {
        echo <<< EOT
<li>
    <a href="$uri">
        <div class="$classes">$content</div>
    </a>
</li>
EOT;
    }
}

表示させたい箇所で関数を呼ぶ

テンプレートファイルの表示させたい箇所で下記の関数を呼ぶ。

TagCloud::show();

これでその箇所に次のようなHTMLが出力される。

<section class="tag-cloud">
	<h3 class="title">タグクラウド</h3>
	<ul class="items">
		<li>
			<a href="http://sample.com/tag/hoge/">
				<div class="item">ほげ</div>
			</a>
		</li>
		<li>
			<a href="http://sample.com/tag/fuga/">
				<div class="item">ふが</div>
			</a>
		</li>
		<li>
			<a href="http://sample.com/tag/piyo/">
				<div class="item">ぴよ</div>
			</a>
		</li>
	</ul>
</section>

CSSで見た目を整える

後は出力されたHTMLの各要素に付いているクラスを用いて、CSSで見た目を整える。