固定ページ、投稿タイプのトップ、タクソノミー等、表示するシーンごとにページタイプごとのタイトルを付けたい場合があります。
よね？

• 事業内容 ⇒ 事業内容
• 店舗事業 ⇒ 事業内容（店舗）
• ブログトップ ⇒ ブログ
• カテゴリー ⇒ ブログ > ターム

みたいな感じ。

さらにスラッグを出してカッコつけたり、アイコン付けたり。

で、サイトごとにテンプレートを書き換えたり、「タームのスラッグはどうやって出すんだっけ？」とメモをひっくり返したり。面倒です。

 

なので、

• 固定ページや投稿など、階層構造を持つ場合は親／子両方のタイトル、スラッグを出しとく！
• その辺を全部出しておき、サイトデザインに合わせてCSSで表示／非表示を制御する！

としたら便利じゃない？いう感じです。

親子にとどまらず孫まである、ブログなどの投稿記事が階層構造を持つ、などのケースはテストしてません。

ソース

<?php
if( is_page() ){
	$page_type_title_class = ' entry-title';
	if( $post->post_parent > 0 ){
		$parent_id = $post->post_parent;
		$parent_title = '<span class="parent-title">' . get_post( $parent_id )->post_title . '</span>';
		$parent_name = get_post( $parent_id )->post_name;
		$parent_slug = '<span class="parent-slug">' . $parent_name . '</span>';
	}
	if( get_post_meta( $post->ID, 'page_tile_alt', true ) ){
		$self_title = get_post_meta( $post->ID, 'page_tile_alt', true );
	}else{
		$self_title = get_post( $wp_query->post->ID )->post_title;
	}
	if( get_post_meta( $post->ID, 'page_slug_alt', true ) ){
		$self_slug = get_post_meta( $post->ID, 'page_slug_alt', true );
	}else{
		$self_slug = get_post( $wp_query->post->ID )->post_name;
	}
	$self_title = '<span class="self-title">' . $self_title . '</span>';
	$self_slug = '<span class="self-slug">' . $self_slug . '</span>';
	$title = $parent_title . $self_title;
	$slug = $parent_slug . $self_slug;
	if( is_page( 'company' ) ){
		$custom_icon = 'dashicons-building';
	}elseif( is_page( array( 'recruit' , 'adoption' ) ) || get_post_type() == 'adoption' ){
		$custom_icon = 'dashicons-groups';
	}elseif( is_page( 'contact' ) ){
		$custom_icon = 'dashicons-email';
	}elseif( is_page( 'sitemap-page' ) ){
		$custom_icon = 'dashicons-networking';
	}elseif( is_page( array( 'privacy' , 'privacy-policy' ) ) ){
		$custom_icon = 'dashicons-lock';
	}else{
		$custom_icon = 'dashicons-media-document';
	}
}elseif( is_attachment() ){
	$title = '画像：' . '<span class="archive-label">' . get_the_title() . '</span>';
	$slug = 'images';
	$custom_icon = 'dashicons-images-alt2';
}elseif( is_404() ){
	$title = '無効なURL';
	$slug = '404';
	$custom_icon = 'dashicons-hidden';
}elseif( is_search() ){
	$title = '検索結果' . '<span class="archive-label">：' . get_search_query() . '</span>';
	$slug = 'search result';
	$custom_icon = 'dashicons-search';
}elseif( is_author() ){
	$title = '著者' . '<span class="archive-label">：' . get_the_author_meta( 'display_name', $author ) . '</span>';
	$slug = 'author';
	$custom_icon = 'dashicons-groups';
}elseif( get_post_type() ){
	$posttype_label = '<span class="posttype-label">' . esc_html( get_post_type_object( get_post_type() )->label ) . '</span>';
	if( get_post_type() == 'post' && get_option( 'p2_post_slug' ) ){
		$slug = get_option( 'p2_post_slug' );
	}else{
		$slug = esc_html( get_post_type_object( get_post_type() )->name );
	}
	if( !is_single() ){
		if( is_category() ){
			$label = single_cat_title( '', false );
		}elseif( is_tag() ){
			$label = single_tag_title( '', false );
		}elseif( is_tax() ){
			$label = single_term_title( '', false );
		}elseif( is_day() ){
			$label = get_the_date( 'Y年m月d日' );
		}elseif( is_month() ){
			$label = get_the_date( 'Y年m月' );
		}elseif( is_year() ){
			$label = get_the_date( 'Y年' );
		}else{
			//$label = '一覧';
		}
		$archive_label = '<span class="archive-label">' . $label . '</span>';
		if( is_category() || is_tag() || is_tax() ){
			$slug = '<span class="parent-slug">' . $slug . '</span>';
			$slug .= '<span class="self-slug">' . get_queried_object()->slug . '</span>';
		}elseif( is_day() || is_month() || is_year() ){
			$slug = '<span class="parent-slug">' . $slug . '</span>';
			$slug .= '<span class="self-slug">archive</span>';
		}
	}
	$title = $posttype_label . $archive_label;
	if( get_post_type() == 'post' ){
		$custom_icon = 'dashicons-welcome-write-blog';
	}elseif( get_post_type() == 'news' ){
		$custom_icon = 'dashicons-admin-comments';
	}elseif( get_post_type() == 'seminar' ){
		$custom_icon = 'dashicons-money';
	}elseif( get_post_type() == 'event' ){
		$custom_icon = 'dashicons-clock';
	}elseif( get_post_type() == 'staff' ){
		$custom_icon = 'dashicons-admin-users';
	}elseif( get_post_type() == 'document' ){
		$custom_icon = 'dashicons-pdf';
	}elseif( get_post_type() == 'facility' ){
		$custom_icon = 'dashicons-location';
	}elseif( get_post_type() == 'store' ){
		$custom_icon = 'dashicons-admin-multisite';
	}elseif( get_post_type() == 'job_information' ){
		$custom_icon = 'dashicons-groups';
	}else{
		$custom_icon = 'dashicons-tag';
	}
}else{
	$title = 'そのほかのページ';
	$slug = 'misc';
	$custom_icon = 'dashicons-media-default';
}
/* -------------------- 画像アイコン-------------------- */
if( get_post_meta( $post->ID, 'page_title_icon', true ) ){
	$image_ID = get_post_meta( $post->ID, 'page_title_icon', true );
	$image_url = wp_get_attachment_image_src( get_post_meta( $post->ID, 'page_title_icon', true ), 'full' );
	$style = ' style="background-image: url( ' . $image_url[0] . ')"';
	$custom_icon = 'page-custom';
}
echo '<h1 class="page-type-title page-title' . $page_type_title_class . '">';
echo '<span class="page-type-title-icon dashicons ' . $custom_icon . '"' . $style . '></span>';
echo '<span class="page-type-title-body">' . $title . '</span>';
echo '<span class="slug page-type-title-slug">' . $slug . '</span>';
echo '</h1>';
?>

get_post_meta()が出てくるところはカスタムフィールド

画像登録が前提の箇所があります。ACFを使っている体です。

デフォルトのカスタムフィールドで「画像」フォームがあるかどうかわからないので、適宜差し替えで。

get_option()は、テーマで追加したグローバル変数

投稿ページ（ブログトップページ）のスラッグを変えているだけなので、ここは直書きでOK。

アイコン

基本的にダッシュアイコンを使います。

fuctions.phpでダッシュアイコンを有効にしておくと、クラス名を指定するだけで各アイコンを出せます。

独自のアイコンを使いたい場合はカスタムフィールドから登録すれば背景として適用されます。

 

そこそこ長いので、テンプレートパート化して呼び出してます。

表示／非表示

/* ---------- 表示／非表示 ---------- */
.single .page-type-title-container	{
	display: none;
}
.banner-text .parent-title + .self-title	{
	display: none;
}
.page-type-title-container .parent-title	{
	display: none;
}
.banner-text .parent-slug + .self-slug	{
	display: none;
}
.page-type-title-container .parent-slug	{
	display: none;
}
body:not( .attachment ) .banner-text .archive-label	{
	display: none;
}
.page-posttype:not( .page-posttype-top ) .page-type-title-container .posttype-label	{
	display: none;
}

• ヘッダーに出すときの要る／要らない
• 本文ブロックに出すときの要る／要らない

辺りを出し分けています。

CSSの一例として。

.page-posttype-top、.page-posttypeあたりは、body classや#pageあたりのコンテナーに「あったら便利だな」と思って加えたクラス名です。デフォルトでは出ないと思いますので、テーマに合わせて代替してください。

スタイリング

これまたサイトごとに変わるのであまり意味ないと思いますが、このサイトの例として。

/* ---------- ページタイプタイトル設定 ---------- */
.page-type-title-container .page-type-title, .banner-text .page-type-title	{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.page-type-title	{
	line-height: 1.5;
}
.page-type-title .slug	{
	display: block;
}
.page-type-title-icon.dashicons.page-custom	{
	width: 1em;
	height: 1em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}