WordPressのTwenty Seventeenを子テーマで運営しています。
page.phpとheader.phpをカスタマイズして、header.php内にインクルードされているheader-image.phpとsite-branding.phpもカスタマイズしてサイト内に別のサイトを作るようなカスタマイズを行います。
ページ内リンク
カスタマイズするサイトの説明
サッカーリーグのサイトを運営しています。
リーグに加盟した参加チームのサイトをサッカーリーグサイトの中に独立した形で作っています。
各チームのページは固定ページで作り、基本的に投稿ページは使いません。
まずチームのトップページを作り、他のページはトップページを「親」と設定します。
テーマは「Twenty Seventeen」の子テーマで運営しています。
カスタマイズの内容
- サイト上部の画像をチーム画像に変更します。
- サイト上部の「p class=”site-title”」の部分をチーム名に変更します。
- 「p class=”site-description”」の部分をチームの説明に変更します。
- メニューをWordPressのデフォルトのメニューのシステムを使わずチーム用のメニューに変更します。
以上の4つをカスタマイズします。
「page.php」のカスタマイズ
まず「page.php」をカスタマイズします。
「wp-content/themes/twentyseventeen」から「page.php」をダウンロードして、編集して、子テーマディレクトリにアップロードするという段取りです。
「page.php」をダウンロードしたら、まずは何もせずにエディタソフト(Windowsメモ帳はダメ、私はサクラエディタ使用)で「page-abc.php」と名前を変更だけします。
abcの部分は英数字なら何でも良いですが、ここではチームABCというサッカーチームの名前になっています。
例えばteam-abcのような「-」は使えません。
「page-abc.php」の中身はこんな感じです。
<?php /** * The template for displaying all pages * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site may use a * different template. * * @link https://codex.wordpress.org/Template_Hierarchy * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ get_header(); ?> <div class="wrap"> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); get_template_part( 'template-parts/page/content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; // End of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div><!-- .wrap --> <?php get_footer();
テンプレート追加とヘッダー呼込み
2行目に
/*
Template Name: ABC
*/
を書き込みます。
これで固定ページの「テンプレート」に「ABC」が追加されます。
そして18行目の「get_header(); 」を後で作る「header-abc.php」を呼出す「get_header(abc); 」と変更します。
するとこうなります。
「header.php」をカスタマイズ
次は「header.php」をカスタマイズします。 「page.php」と同じく「header.php」をダウンロードして「header-abc.php」と名前を付けて保存します。 「header-abc.php」のabcは21行目の「get_header(abc);」のabcで、アルファベットなら別の名前でも大丈夫です。 「page-abc.php」の「get_header(abc);」の部分は「header-abc.php」を呼出しています。 「header.php」の中身です。section and everything up until画像変更等のCSSの入力
22-23行目の間に
のCSSを入力します。
「.custom-header {background-image: url(https://haradaweb.com/web/photo/team/top-abc.jpg);」はページの最上部の画像を変更して、「background-position: center center;」で画像の位置を調整して、「p.site-title.abc a {color: #0404b7;」でサイトタイトルの文字の色を変更しています。
「header-image.php」呼出の解説
次は31行目を変更します。
31行目の「get_template_part( 'template-parts/header/header', 'image' );」は「template-parts/header」ディレクトリから「header-image.php」を呼出しています。「Twenty Seventeen」の「wp-content/themes/twentyseventeen/template-parts/header」に「header-image.php」と、後で出てくる「site-branding.php」というファイルの中身をコピーします。
「header-image.php」の中身はこんな感じです。
12行目の「div class="custom-header"」というのがCSSのbackground-imageでページ最上部の画像を表示させています。
「header-image.php」での「site-branding.php」を呼出の解説
そして18行目で「site-branding.php」を呼び出しています。
「site-branding.php」の中身はこんな感じ。条件分岐「is_front_page」の解説
19行目は条件分岐で「is_front_page」サイトのフロントページが表示中ならば「h1 class="site-title"」の内容を表示するというもの、サイトのトップページではないので、21行目の「p class="site-title"」の内容が表示されます。
29行目はサイトの説明が入る部分です。
「header-image.php」と「site-branding.php」の内容を「header-abc.php」に入力
この「header-image.php」と「site-branding.php」の内容を「header-abc.php」に入力(コピペ)します。
すると「header-abc.php」はこうなります。section and everything up until42-76行目までが「header-image.php」の内容でその中の48-74行目までが「site-branding.php」の内容です。
「header-image.php」の内容はCSSで編集しているのでこのままでいいのですが、48-74行目までの「site-branding.php」の内容を各チーム用に編集しなくてはなりません。後で出てきますが、81行目はメニューを呼出しています。
「site-branding.php」の内容を抜粋してカスタマイズ
57行目の「p class="site-title"」の内容をチーム名「チームABC」として、65行目の「p class="site-description"」の内容をチームABCの説明を入力します。
上のコードの53-67行目までの抜粋コード、つまり「site-branding.php」の内容です。
<div class="site-branding-text"> <?php if ( is_front_page() ) : ?> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <?php else : ?> <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p> <?php endif; ?> <?php $description = get_bloginfo( 'description', 'display' ); if ( $description || is_customize_preview() ) : ?> <p class="site-description"><?php echo $description; ?></p> <?php endif; ?> </div><!-- .site-branding-text -->55行目「h1 class="site-title"」はサッカーリーグサイトのトップページに表示されるものなので編集する必要はありません。
57行目「p class="site-title"」をチーム名「チームABC」とします。
65行目「p class="site-description"」のサイトの解説を「チームABCの試合結果やリーグ戦の成績などを紹介しています。」とします。とするとこうなります。
<div class="site-branding-text"> <?php if ( is_front_page() ) : ?> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <?php else : ?> <p class="site-title"><a href="<?php echo home_url() ?>/abc" rel="home">チームABC</a></p> <?php endif; ?> <?php $description = get_bloginfo( 'description', 'display' ); if ( $description || is_customize_preview() ) : ?> <p class="site-description">チームABCの試合結果やリーグ戦の成績などを紹介しています。</p> <?php endif; ?> </div><!-- .site-branding-text -->これでチームサイトの上部に表示される内容がチーム専用のものになりました。
メニューのカスタマイズ
最後はメニューのカスタマイズです。
メニューはWordPressの管理画面の外観>メニューで設定しています。
デフォルトならトップページに表示されているメニューが全てのページに表示されます。今回の場合はチーム独自のページに独自のメニューを表示させます。
上の「header-abc.php」の81行目で「'template-parts/navigation/navigation', 'top' );」と記述されています。
これは「template-parts/navigation/」ディレクトリから「navigation-top.php」を呼出すという事です。「navigation-top.php」には管理画面の外観>メニューで設定したメニューを呼出すコードが書かれています。
今回は管理画面でのメニュー設定は利用しません。
HTMLでそのままメニュー内容を書き込みます。管理画面のメニューは利用しません
WordPressの管理画面のメニュー設定はとても便利で優れたものだと思います。
しかし今回のケースの場合だと参加チームが増えるたびにちょっと手間がかかってしまうように思われます。メニュー画面に入って新しいメニューを作る設定をして、メニューに表示させるページを選択して、functions.phpにメニューを使う設定をして、navigationファイルを新たに作って等々。
今回の場合はあらかじめメニューに表示されるページは決まっていて、増えることも減ることもないので、一度HTMLで作ってしまえば、header.phpも含めて、エディタソフトの置換機能で簡単に編集できると思います。
メニューのカスタマイズ内容
メニューのカスタマイズの内容はこうなります。
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="トップメニュー"> <button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"> <svg class="icon icon-bars" aria-hidden="true" role="img"> <use href="#icon-bars" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bars"></use> </svg> <svg class="icon icon-close" aria-hidden="true" role="img"> <use href="#icon-close" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close"></use> </svg>メニュー </button> <div class="menu-abc-container"> <ul id="menu-abc" class="menu"> <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-129"> <a href="<?php echo home_url() ?>/abc">チームABC</a> </li> <li id="menu-item-130" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-130"> <a href="<?php echo home_url() ?>/abc/game">試合結果</a> </li> </li> <li id="menu-item-132" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-132"> <a href="<?php echo home_url() ?>/abc/league">リーグ戦</a> </li> <li id="menu-item-133" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133"> <a href="<?php echo home_url() ?>/abc/team">チームランキング</a> </li> <li id="menu-item-134" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-134"> <a href="<?php echo home_url() ?>/abc/goal">ゴールランキング</a> </li> <li id="menu-item-135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-135"> <a href="<?php echo home_url() ?>/abc/assist">アシストランキング</a> </li> </ul> </div> </nav>「header-abc.php」の完成形
今までのカスタマイズの内容全て「header-abc.php」に入力するとこうなります。
<?php /** * The header for our theme * * This is the template that displays all of the <head> section and everything up until <div id="content"> * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ ?><!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js no-svg"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> <style type="text/css"> .custom-header { background-image: url(https://haradaweb.com/web/photo/team/top-abc.jpg); background-position: center center; } p.site-title.abc a { color: #0404b7; } </style> </head> <body <?php body_class(); ?>> <div id="page" class="site"> <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a> <header id="masthead" class="site-header" role="banner"> <div class="custom-header"> <div class="custom-header-media"> <?php the_custom_header_markup(); ?> </div> <div class="site-branding"> <div class="wrap"> <?php the_custom_logo(); ?> <div class="site-branding-text"> <?php if ( is_front_page() ) : ?> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <?php else : ?> <p class="site-title"><a href="<?php echo home_url() ?>/abc" rel="home">チームABC</a></p> <?php endif; ?> <?php $description = get_bloginfo( 'description', 'display' ); if ( $description || is_customize_preview() ) : ?> <p class="site-description">チームABCの試合結果やリーグ戦の成績などを紹介しています。</p> <?php endif; ?> </div><!-- .site-branding-text --> <?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && ! has_nav_menu( 'top' ) ) : ?> <a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a> <?php endif; ?> </div><!-- .wrap --> </div><!-- .site-branding --> </div><!-- .custom-header --> <div class="navigation-top"> <div class="wrap"> <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="トップメニュー"> <button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"> <svg class="icon icon-bars" aria-hidden="true" role="img"> <use href="#icon-bars" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bars"></use> </svg> <svg class="icon icon-close" aria-hidden="true" role="img"> <use href="#icon-close" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close"></use> </svg>メニュー </button> <div class="menu-abc-container"> <ul id="menu-abc" class="menu"> <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-129"> <a href="<?php echo home_url() ?>/abc">チームABC</a> </li> <li id="menu-item-130" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-130"> <a href="<?php echo home_url() ?>/abc/game">試合結果</a> </li> </li> <li id="menu-item-132" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-132"> <a href="<?php echo home_url() ?>/abc/league">リーグ戦</a> </li> <li id="menu-item-133" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133"> <a href="<?php echo home_url() ?>/abc/team">チームランキング</a> </li> <li id="menu-item-134" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-134"> <a href="<?php echo home_url() ?>/abc/goal">ゴールランキング</a> </li> <li id="menu-item-135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-135"> <a href="<?php echo home_url() ?>/abc/assist">アシストランキング</a> </li> </ul> </div> </nav> </div><!-- .wrap --> </div><!-- .navigation-top --> </header><!-- #masthead --> <?php // If a regular post or page, and not the front page, show the featured image. if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) : echo '<div class="single-featured-image-header">'; the_post_thumbnail( 'twentyseventeen-featured-image' ); echo '</div><!-- .single-featured-image-header -->'; endif; ?> <div class="site-content-contain"> <div id="content" class="site-content"> <div class="breadcrumbs"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div>これで完成です。
上の
「header-image.php」と「site-branding.php」の内容を「header-abc.php」に入力
の「header-abc.php」内の78行目の「php if ( has_nav_menu( 'top' ) ) :」と84行目の「php endif;」のif文はHTMLで設定すると必要無いので削除しました。なぜ「header.php」に全て書き込むのか
ここからは考え方の問題ですが、今回のサッカーリーグサイトの運営の場合、リーグ加盟のチームが増えていくので、新しいチームのページを作る手間はかからない方がよいと考えました。
「site-branding.php」や「site-branding.php」を編集して別ファイルにして呼出した方が良いのではないかと思われますが、「header.php」の内容が多くなってしまっても最近のエディタソフトには優れた機能があるので、今回の場合例えば新しいチームFC関東が加入した場合、チームABCを「置換」機能でFC関東に替えればいいだけなので簡単に編集できると思い全てを入力しました。