ケケンタ

現在のページのカテゴリーに紐づいたタグ一覧を表示したいけど方法がわからない……！

今回はこのようなお悩みをお持ちの方に向けて

WordPressで特定ページのカテゴリーに紐づく
すべてのタグ一覧を出力する方法

をご紹介します。

ケケンタ

WordPressでは以下のような条件なら簡単に出力が可能です。

• 投稿に紐づくカテゴリー
• カテゴリーに紐づく投稿
• 投稿に紐づくタグ
• タグに紐づく投稿

しかし、

「カテゴリーに紐づくタグ」や「タグに紐づくカテゴリー」を出力する場合、ひと手間必要になります。

ケケンタ

今回はこの内、特定のページのカテゴリーに紐づいているタグの一覧を出力する方法をご紹介します。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

【ソースコード】そのページのカテゴリーに紐づいているタグの一覧を出力する

早速ですが、以下がそのソースコードです。

タグ一覧を表示したい箇所に追加する

<?php 
	/** 
	 * ■ 処理の大枠
	 * １．そのページのカテゴリー情報を取得
	 * ２．カテゴリーに紐づいている投稿を全取得
	 * ３．２で取得した投稿に紐づいているタグを全取得
	 */

	$html = '';  // HTML出力用変数の初期宣言
	
	/**
	 * １．そのページのカテゴリー情報を取得
	 */
	$category = get_the_category()[0];

	// HTML先頭
	$html = '<div>';

	/**
	 * ２．カテゴリーに紐づいている投稿を全取得
	 */
	$args = [
		'category' => $category->term_id,
        'posts_per_page' => -1 // 取得投稿数を「全件」にする　※デフォルトだと5件なので注意
	];
	$category_posts = get_posts( $args );

	// カテゴリーリンクをHTMLに配置
	$html .= '<p><a href="'. get_category_link( $category->term_id ) . '">'. $category->name . '</a></p>';

	/**
	 * ３．２で取得した投稿に紐づいているタグを全取得
	 */
	// タグ重複チェック用配列
	$checked_tag = array();
	foreach( $category_posts as $cat_post ){

		// 各記事のタグを全出力する
		$tags = get_the_tags($cat_post->ID);
		/**
		 * ３-２．記事にタグが登録されているか判定し、登録されていれば全てのタグをリンクとして出力する
		 */
		if( $tags ){  							
			foreach( $tags as $tag ){
				if( in_array( $tag->name, $checked_tag) ){
					// 重複しているタグはスキップ
					continue;
				} else {
					// タグ重複チェック用
					array_push( $checked_tag, $tag->name );

					// タグリンクをHTMLに配置
					$html .= '<p><a href="'. get_tag_link( $tag->term_id ) . '">' . $tag->name . '</a></p>';
				}
			}
		}
	}
	// HTMLを出力
	$html .= "</div>";
	echo $html;
?>

HTMLはハイライト行で生成しています。
レイアウト調整したい場合はその辺りをいじっていただき、CSSをお当て下さい。

出力の様子

上記のソースコードで出力されるHTMLの構成

<div>
  <p><a href="カテゴリーアーカイブページへのリンク">カテゴリ２</a></p>
  <p><a href="タグアーカイブページへのリンク">タグ１</a></p>
  <p><a href="タグアーカイブページへのリンク">タグ５</a></p>
  <p><a href="タグアーカイブページへのリンク">タグ２</a></p>
</div>

解説

ケケンタ

基本的にはソースコードに記載してあるコメント自体が解説になっていますが、イメージしづらい部分もあるかと思いますのでもう少しかみ砕いてご説明します。

まず、処理の大枠は次の通りです。

前述したように、WordPressでは直接「カテゴリー×タグ」のような関係の情報を一発で取得することが難しいです。

しかし、「投稿」を間に介することで「カテゴリー×タグ」の関係性を持つ情報を取得することが可能です。

今回は「カテゴリー」→「投稿」→「タグ」という情報連携により、そのページのカテゴリー情報に紐づいたタグ一覧を取得しています。

また、各投稿で同じタグが登録されているとタグ一覧で重複が発生してしまうため、以下の部分で一度出力したタグは2回目の出現からは出力しないよう制御しています。

ソースコードの以下の部分でタグの重複チェック

<?php 

　～省略～

		/**
		 * ３．２で取得した投稿に紐づいているタグを全取得
		 */
		// タグ重複チェック用配列
		$checked_tag = array();
		foreach( $category_posts as $cat_post ){

　　　　　　～省略～

			/**
			 * ３-２．記事にタグが登録されているか判定し、登録されていれば全てのタグをリンクとして出力する
			 */
			if( $tags ){  							
				foreach( $tags as $tag ){
					if( in_array( $tag->name, $checked_tag) ){
						// 重複しているタグはスキップ
						continue;
					} else {
						// タグ重複チェック用
						array_push( $checked_tag, $tag->name );

						～省略～
					}
				}
			}
		}

　　　　～省略～

	}
?>

まとめ

以上がWordPressでそのページのカテゴリーに紐づいているタグの一覧を出力する方法でした。

ケケンタ

以前公開した「各カテゴリーに紐づくすべてのタグ一覧を出力する」と同様に、調べてみると以外にも解説記事を見つけることができなかったため記事にまとめてみました。

この記事がお役に立ったなら何よりです。

当ブログではその他にもWordPressやWeb制作、PHPのお役立ち情報を発信しているため、ご興味のある方はぜひ他の記事もご覧いただけると嬉しいです。

それでは、最後までご覧いただきありがとうございました！

あわせて読みたい

【WordPress】各カテゴリーに紐づくすべてのタグ一覧を出力する WordPressで各カテゴリに紐づいているすべてのタグを一覧で出力したいけど、やり方が分からない……！ 今回はこのようなお悩みをお持ちの方に向けて WordPressで各カテゴ…

ケケンタ

こんにちは！　ケケンタです。

今回の記事では

WordPressの各ページのbodyタグに
任意のクラス名を自動設定する

をご紹介します。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

各ページのbodyタグに任意のクラス名を自動設定するソースコード

今回ご紹介するソースコードはfunctions.phpに追加をします。
作業をする際には必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

早速ですが、以下が今回ご紹介するソースコードです。

以下をfunctions.phpの最後に記述

function add_slug_body_class( $classes ) {
  global $post;
  if ( isset( $post ) ) {
    // ページのスラッグをクラス名として設定
    $classes[] = $post->post_name;
  }
  return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

今回は例として、各ページのbodyタグのクラスに「そのページのスラッグ」を設定しています。

ケケンタ

上記のハイライト行の右辺「$post->post_name」のようにスラッグなどそのページ独自の情報を取得して設定するのがポイントです。

上記のソースコードを利用すればCSSを書くときもスラッグを基準にできるため、ページの判別がしやすかったりします。

まとめ

簡単ですが、以上が「WordPressの各ページのbodyタグに任意のクラス名を自動設定する方法」でした。

WordPressはカスタマイズ性が非常に高く、今回のようにいわゆるフィルターフックを利用することでより扱いやすいサイトを制作することが可能です。

ケケンタ

この記事が少しでもお役に立ったなら何よりです。

WordPress関係の記事を他にもたくさん公開しているため、ご興味のある方はぜひご覧いただけると嬉しいです。

それでは最後までご覧いただきありがとうございました。

WordPressを使用しているとログイン画面を開く機会がちょこちょこあるかと思います。

そんな中、

ケケンタ

（見た目にちょっと飽きてきたな……）

このように感じたことはないでしょうか。

今回はそのような方のために

WordPressのログイン画面の見た目をCSSでカスタマイズする方法

を解説していきます！

WordPressのログイン画面を開く機会は多くても1日に１～２回程度かなと思いますが、実際にオリジナリティのある見た目にカスタマイズしてみるとモチベーションも上がるためオススメです。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

ログイン画面の見た目をカスタマイズする仕組み

まずは簡単にWordPressのログイン画面の見た目をカスタマイズする仕組み（ポイント）についてお話をさせていただきます。

WordPressにはフィルターフックという概念が存在します。

これは簡単に言うと

ある表示内容を出力する際、その表示内容に変更を加えるためのもの

です。

そして、WordPressのログイン画面にCSSやJavaScriptを追加するためのフィルターフックとして「login_enqueue_scripts」というものがあります。

ケケンタ

今回の作業では、このlogin_enqueue_scriptsを利用して
① 自作したCSSをログイン画面に読み込ませる
② ログイン画面の見た目が変わる
という流れを踏みます！

フィルターフック「login_enqueue_scripts」を使用すれば、ログイン画面に簡単にCSSやJavaScriptを追加できる

ログイン画面のデザインを変える手順

それでは、上記の仕組みを踏まえた上で具体的な手順をご紹介します。

① ログイン画面に設定するCSSを用意する

CSSの例

/* 背景 */
body.login {
    background-color: #fff;
}

/* ロゴ */
body.login h1 a {
    width: 250px; /* サイズ調整用 */
    background: url('画像までのパス') no-repeat center center / contain;
}

/* フォームコンテナ */
body.login form {
    background-color: #efa336;
    border-radius: 15px;
    border: none;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); /* 影を付けてそれっぽくしてみる */
}

/* フォームラベル */
body.login label {
    color: #fff;
}

/* ログインメッセージ全般 */
.login .message,
.login .notice,
.login .success {
    border-left: 4px solid #efa336 !important;
}

/* ログインボタン */
.wp-core-ui .button-primary {
    background-color: #fff !important;
    color: #efa336 !important;
    border-color: #efa336 !important;
}

.wp-core-ui .button-primary:hover {
    background-color: #efa336 !important;
    color: #fff !important;
    border-color: #fff !important;

}

ここで登場しているCSSクラス名についてはGoogle chromeの検証ツール（デベロッパーツール）で確認しました。
★ 「検証ツールの使い方」はこちらの記事で詳しく解説しています。

② フィルターフック「login_enqueue_scripts」を利用して①で用意したCSSをログイン画面に適用する

ここから登場するソースコードはfunctions.phpの末尾に追加して下さい。
また、その際は必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

なお、functions.phpへのソースコードの追加方法がご不明な方はこちらの章をご覧ください。

ケケンタ

login_enqueue_scriptsを利用してCSSを読み込ませる方法は大きく2パターンあります。

【パターン①】functions.phpに直接CSSを記述する

// ログイン画面のカスタマイズ
function custom_login_style() { ?>
  <style>

    /* ここにCSSを記述 */

  </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_style' );

【パターン②】CSSファイルを別に用意し、そのファイルをfunctions.phpで読み込ませる

// ログイン画面のカスタマイズ
function custom_login_style() {
  /*
   * get_stylesheet_directory_uri()以降のパス部分には
   * テーマディレクトリを基準とした相対パスを記述する
   */
  wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/css/作成したCSSファイル名.css' );
}
add_action( 'login_enqueue_scripts', 'custom_login_style' );

【パターン②】の例は「…省略…/テーマディレクトリ/cssディレクトリ」の中に「作成したCSSファイル名.css」を配置した想定となっています。

①は手軽にでき、②は管理性に優れているというメリットがあります。
ご自身の好みや仕様に合わせて①、②のどちらを利用するかご検討ください。

ケケンタ

functions.phpなどの扱いに不慣れな方は、とりあえず①の方法をお選びいただくのが間違いないです！

実際にログイン画面のデザインを変えてみる

変更前

完成した見た目

以下、具体的に設定した各CSS

背景

/* 背景 */
body.login {
    background-color: #fff;
}

ロゴ

/* ロゴ */
body.login h1 a {
    width: 250px;
    /* サイズ調整用 */
    background: url('画像のパス') no-repeat center center / contain;
}

フォームエリア

/* フォームエリア */
body.login form {
    background-color: #efa336;
    border-radius: 15px;
    border: none;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); /* 影を付けてそれっぽくしてみる */
}

フォームラベル

/* フォームラベル */
body.login label {
    color: #fff;
}

ログインメッセージ全般

/* ログインメッセージ全般 */
.login .message,
.login .notice,
.login .success {
    border-left: 4px solid #efa336 !important;
}

ログインボタン

/* ログインボタン */
.wp-core-ui .button-primary {
    background-color: #fff !important;
    color: #efa336 !important;
    border-color: #efa336 !important;
}

.wp-core-ui .button-primary:hover {
    background-color: #efa336 !important;
    color: #fff !important;
    border-color: #fff !important;

}

ケケンタ

ご覧のように自分の好きな見た目に変更することができました！

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。

すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。

このとき、念のため右上の「編集するテーマを選択」が「SWELL CHILD」になっていることをご確認下さい。
※もしなっていなければ、「SWELL CHILD」を選び、「選択」ボタンをクリックして下さい。

続いて、エディタの末尾にソースコードを追加します。

ケケンタ

ソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。

まとめ

いかがだったでしょうか。

やり方さえわかってしまえば、WordPressログイン画面の見た目をカスタマイズすることは意外と簡単に可能です。

（CSSの知識は必要になってしまいますが……）

ケケンタ

このように自分好みの見た目にカスタマイズできるとモチベーションも上がりますし、複数人で使用する事情から見た目を変えたいといったときにも今回の方法で実装ができます。

この記事が少しでもお役に立ったなら何よりです。

当ブログではWordPressやPHP、Web制作に関するお役立ち情報を発信しています。

ご興味のある方はぜひ他の記事もご覧いただけると嬉しいです。

それでは、最後までご覧いただきありがとうございました！

WordPressでは簡単に固定ページや投稿ページを保護し、パスワードを知っている人にしかコンテンツが表示されないように設定することが可能です。

ただ、保護されたページにはデフォルトだと以下のように「保護中：」という文字列が表示されます。

保護ページ初期タイトル表示

この「保護中：」という文字列を変更したい、あるいは削除したいという方に向けて

WordPressで保護したページタイトルに出力される
「保護中：」という文字列を変更・削除する方法

ケケンタ

誰でも簡単にできるのでぜひお試しください！

この記事でご紹介する方法はfunctions.phpを変更するものになります。
作業の際は必ずバックアップをお取りいただき、自己責任のもとで作業をお進めください。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

保護ページのタイトルを変更する方法

ケケンタ

まずは「保護ページのタイトルを変更する方法」からご紹介します。

functions.phpに以下のソースコードを追加します。

functions.phpに追加するソースコード

// 保護ページタイトルの変更
function edit_protected_word() {
	return '任意のテキスト：%s';
}
add_filter('protected_title_format','edit_protected_word');

実際に出力される様子

ご覧のように「保護中：」だった部分が「任意のテキスト：」に変わっています。

ケケンタ

例えば「保護中：」を「会員のみ：」にしたければ
会員のみ：%s
にすればいいということですね。
※「：」は可読性を残す意味でそのままにしてありますが、不要なら除去してもOKです。

保護ページに表示される「保護中：」を削除する方法

次は「『保護中：』という文字列を削除する方法」についてご紹介します。

理屈は前章と同じで、「%s＝ページタイトル」だけを残すように書き換えればOKです。

functions.phpに追加するソースコード

// 保護ページタイトルの変更
function edit_protected_word() {
	return '%s';
}
add_filter('protected_title_format','edit_protected_word');

実際に出力される様子

ケケンタ

このように「%s」だけにしてあげることで、表示されるのがそのページのタイトルだけとなります。

WordPressはカスタマイズ性が高いCMS

以上が「保護ページにデフォルトで出力される『保護中：』を変更・削除する方法」でした！

WordPressは非常にカスタマイズ性が高く、「こんなことってできないのかな」と思ったことは割とできることが多く、またそうした情報も誰かがネット上で解説をしてくれています。

ケケンタ

このブログでもWordPress関連のカスタマイズ情報をたくさん発信しています。
ご興味のある方はぜひ他の記事もご覧ください。

それでは、最後までご覧いただきありがとうございました。

ケケンタ

管理画面の投稿一覧で表示項目増やしたら列幅が狭くなっちゃった……

ケケンタ

カテゴリーとかタグの列幅が広いから、もう少し狭くしたいな……

今回はこのようなお悩みをお持ちの方に向けて

WordPress管理画面の投稿一覧で
カテゴリーやタグなど任意の列の幅を調整する方法

をご紹介します。

ケケンタ

誰でも簡単にできるのでぜひご活用ください！

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

【結論】functions.phpに列幅調整用のCSSを記述する

早速結論ですが、以下のソースコードをfunctions.phpに追加することで調整することが可能です。

以下は「カテゴリー」や「タグ」の列幅を調整する例です。

function my_admin_style() {
	echo '
	<style>
		th#tags, 
		th#categories {
    		width: 10%;
		}
	</style>'
	.PHP_EOL;
  }
  add_action('admin_print_styles', 'my_admin_style');

ハイライトされている行で列幅を指定しています。

僕が使用しているSWELLというテーマでは初期状態だと列幅が15％に指定されていたため、上記のコードは元々の列幅よりも5％狭くする指定という意味になります。

任意の列幅を調整する方法

「カテゴリー」や「タグ」以外の列の幅を調整したい場合は、CSSセレクターのID（#tagsや#categories）の部分をその列のものに変更するだけでOKです。

ケケンタ

以下は各列のIDを確認し、実際にソースコードに当てはめるまでの手順です。

STEP

Ctrl + Shift + Cを押して、任意の列名の部分をクリックする

管理画面の投稿一覧ページでCtrl + Shift + Cを押すと以下の画像のようにカーソルを当てた部分の表示が変化します。

その状態でクリックすると、STEP２のような画面が出てきます。

STEP

表示された画面内から「id=”○○”」の部分を読み取る

以下のような表示が現れたら、「id=”○○”」の部分を読み取ります。

例えばタグ列なら「tags」、カテゴリー列なら「categories」というidが表示されています。

STEP

読み取ったidを先ほどのソースコードに当てはめる

STEP２でidの確認ができたら、続いて先ほどのソースコードにそれを当てはめます。

例えばアイキャッチ列の幅を調整したいとしたら以下のようなソースコードになります。

アイキャッチ列の幅を調整する場合のソースコード

function my_admin_style() {
	echo '
	<style>
		th#thumbnail {
    		width: 10%;
		}
	</style>'
	.PHP_EOL;
  }
  add_action('admin_print_styles', 'my_admin_style');

表示項目増えて投稿一覧が見づらくなったら列幅を調整してみよう

WordPressを使用していると投稿一覧で表示項目を増やす必要性が出てくる場合があります。

そのようなとき、何かしら非表示にしても問題無い項目があればいいのですが、そうでないときには今回ご紹介した「列幅を調整する方法」が有効です。

ケケンタ

この記事がお役に立ったなら何よりです！

WordPress管理画面の投稿一覧の項目に関連する記事

あわせて読みたい

【WordPress】管理画面の投稿一覧で記事の文字数を表示する方法 いま使ってるテーマ、管理画面の投稿一覧で文字数が表示されないんだよな…… 本文の文字数を表示したいんだけど簡単に実装する方法って無いのかな…… 今回はこのようなお…

あわせて読みたい

【SWELL】記事に貼ってある広告数を管理画面の投稿一覧に表示する SWELLでは広告タグを利用して簡単にGoogleアドセンスなどの広告を貼ることが可能です。 しかし、サイドバーや目次広告などの固定位置はともかく、記事ひとつひとつに個…