2025年07月17日[木曜日]

［成果物］WordPressのタイトル設定とSEO最適化 – 階層構造を反映した動的生成の実装方法

この記事では、以下の投稿で作成した成果物をまとめて確認することができます。

ご自身の環境と見比べて反映漏れがないかなど、ご確認用にご活用ください。

元の記事

WordPressのタイトル設定とSEO最適化 – 階層構造を反映した動的生成の実装方法

WordPressにおけるSEO効果を最大化するタイトル設定方法を詳しく解説します。HTMLの基本ルールに従った一意のタイトル設定、階層構造を反映した動的なタイトル生成、H1タグの適切な使い分けを学習できます。実践的な方法を段階的に説明し、検索エンジンとユーザーにとって分かりやすいWordPressサイトの構築技術を習得できます。

は今回新規追加したものです。

は今回変更したものです。

固定ページ一覧

タイトルスラッグ順序テンプレート備考
ようこそsample-page100トップページ
会社概要about200会社概要専用テンプレート
沿革history100
アクセスaccess200
サービスservice300
お客様の声voice350
お問い合わせcontact400

投稿一覧

タイトルカテゴリテンプレート備考
Hello World!!WPが自動生成

テーマファイル一覧

現時点のテーマファイルはありません

ファイル名用途備考
footer.phpフッター共通部
front-page.phpトップページ専用テンプレート
functions.php共通関数
header.phpヘッダー共通部
index.php
kaisha.php会社概要用テンプレート
main.css共通スタイルシート
page-contact.phpお問い合わせ用テンプレート
page.php固定ページ用テンプレート
style.cssテーマヘッダー
sub.css個別スタイルシート

コード

現時点のコードは以下の通りです。

footer.php

    </main>
    
    <footer>
        <p>© 2025 マイ・オリジナルテーマ</p>
    </footer>
    <?php wp_footer();?>
</body>
</html>

front-page.php

<?php get_header();?>
        <?php the_content(); ?>
        <p>※このページは front-page.php テンプレートで表示されています</p>
<?php get_footer();?>

functions.php

<?php
// 外観→メニューの有効化
add_theme_support( 'menus' );
// titleタグの有効化
add_theme_support( 'title-tag' );

// スタイルシートの読み込み
add_action('wp_enqueue_scripts', 'load_theme_style');
function load_theme_style() {
    wp_enqueue_style(
        'theme-main-style',
        get_stylesheet_directory_uri() . '/main.css',
        array(),
        filemtime(get_stylesheet_directory() . '/main.css'),
    );
    wp_enqueue_style(
        'theme-sub-style',
        get_stylesheet_directory_uri() . '/sub.css',
        array('theme-main-style'),
        filemtime(get_stylesheet_directory() . '/sub.css'),
    );
}

// 階層対応タイトル
function custom_document_title($title) {
    $custom_title = '';

	if (is_front_page()) {
		// サイトタイトルを取得
        $custom_title = get_bloginfo('name');
	} else {
		// 現在表示中のページタイトルを取得
        $custom_title = get_the_title();

    	// 現在ページの親ページIDを取得
    	$parent_id = wp_get_post_parent_id(get_the_ID());
    	// 親ページが存在する場合（IDが0以外）、親ページのタイトルを追加
    	if ($parent_id) {
    		// 親ページのタイトルを取得
        	$custom_title = $custom_title . '｜';
        	$custom_title = $custom_title . get_the_title($parent_id);
    	}

		// サイトタイトルを取得
        $custom_title = $custom_title . '｜';
		$custom_title = $custom_title . get_bloginfo('name');
	}

    return $custom_title;
}
add_filter('pre_get_document_title', 'custom_document_title');

?>

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head();?>
</head>
<body>
    <header class="global-header">
        <?php $tag = is_front_page() ? 'h1' : 'div'; ?>
        <<?php echo $tag; ?> class="logo"><?php bloginfo('name'); ?></<?php echo $tag; ?>>
        <?php wp_nav_menu('header-menu'); ?>
    </header>
    <main>
        <?php if (!is_front_page()) : ?>
            <h1 class="page-title"><?php the_title(); ?></h1>
        <?php endif; ?>

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>マイ・オリジナルテーマ</title>
</head>
<body>
	<header>
    	<h1><?php the_title(); ?></h1>
    	<ul>
        	<li><a href="<?php echo home_url(''); ?>">トップ</a></li>
        	<li><a href="<?php echo home_url('about'); ?>">会社概要</a>
            	<ul>
	                <li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
                	<li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
            	</ul>
        	</li>
        	<li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
        	<li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
    	</ul>
	</header>

    <main>
        <?php the_content();?>
    </main>
    
    <footer>
        <p>© 2025 マイ・オリジナルテーマ</p>
    </footer>
</body>
</html>

kaisha.php

<?php
/*
Template Name: 会社概要専用テンプレート
*/
?>
<?php get_header();?>
        <?php the_content(); ?>
        <p>※このページは kaisha.php テンプレートで表示されています</p>
<?php get_footer();?>

main.css

/* サイトタイトル */
.global-header .logo {
    font-size: 3.0rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.global-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.0rem 2.0rem;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* step.1 */
.menu-header-menu-container .menu {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    gap: 1.0rem;
}

/* step.2 */
.menu-header-menu-container .menu .menu-item {
    border: 1px solid gray;
    background-color: rgba(255, 255, 255, 0.5);
}

.menu-header-menu-container .menu .menu-item a {
    display: block;
    padding: 1.0rem 1.5rem;
    color:black;
    text-decoration: none;
    white-space: nowrap;
    transition: all 300ms ease;
}

/* step.3 */
.menu-header-menu-container .menu .menu-item.menu-item-has-children {
    position: relative;
}

.menu-header-menu-container .menu .menu-item.menu-item-has-children > a::after{
    content: "▼";
    margin-left: 0.5rem;
    font-size: 0.8rem;
}

.menu-header-menu-container .menu .menu-item .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    list-style: none;

}

/* step.4-1 */
.menu-header-menu-container .menu .menu-item a:hover ,
.menu-header-menu-container .menu .menu-item.current-menu-item a {
    color: white;
    background-color: orange;
}

/* step.4-2 */
.menu-header-menu-container .menu .menu-item.menu-item-has-children:hover .sub-menu {
    display: block;
}

/* step.4-3 */
.menu-header-menu-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item {
    border: 1px solid gray;
    border-top: none;
    background-color: white;
    width: 100%;
}

.menu-header-menu-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item:first-child {
    border-top: 1px solid gray;
}


/* ページタイトルのスタイル */
.page-title {
    font-size: 2.0rem;
    color: #333;
    margin-bottom: 2.0rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: 1.0rem;
}

page-contact.php

<?php get_header();?>
        <?php the_content(); ?>
        <h2>お問い合わせフォーム</h2>
        <form>
            <!-- ここにフォームを作成 -->
        </form>
        <p>※このページは page-contact.php テンプレートで表示されています</p>
<?php get_footer();?>

page.php

<?php get_header();?>
        <?php the_content(); ?>
        <p>※このページは page.php テンプレートで表示されています</p>
<?php get_footer();?>

style.css

/*
Theme Name: マイ・オリジナルテーマ
*/

sub.css

h1 {
    color: blue;
}

プラグイン

現時点のプラグインは以下の通りです。

プラグイン名作者備考
Admin ColumnsCodepress

 

この投稿をシェアする

コメントを残す

CAPTCHA


STAY CONNECTED

wp-ch Admin

現役のフリーランスエンジニアがWordPressによるWebサイト構築を基礎から実践テクニックまで徹底解説します。

たくさんの方がフォローしてくれています。あなたもぜひ、情報を受け取ってください。

STORY｜ストーリー

WordPressを効率よく確実に学ぶためには、学習の順序が大切です。知識が自然に積み上がるよう、学習ステップに沿って記事を順番に並べています。

学習ストーリー第24話まで掲載中

全ストーリーを見る

SERIES｜シリーズ

CATEGORY｜分類

TAGS｜タグ