【wordpress】Twenty Seventeenをカスタマイズ【完全版】 – 英語が必要になったアラサーリーマン

長らくwordpressの公式テーマのTwenty Sixteenを使っていたのですが、ふと思い立ちTwenty Seventeenに乗り換え、カスタマイズしました。その際の手順を紹介します。WordPressVersion5.8とTwentySeventeen Version2.8を使用しています。また、プラグインにWP Multibyte Patchを使っています。

なぜ今更Twenty Seventeenか

毎年公式テーマが配信されているので（2018年は配信なし）、2021年現在の最新公式テーマはTwenty Twenty-Oneになります。ただ、スマホ全盛時代でもＰＣで閲覧されている方もいるので、サイドバーがデフォルトで搭載されている公式テーマがいいなという事でTwenty Seventeenにしました。

どこをカスタマイズするの？

最終ゴールは本サイトで表示されているものになります。

各PHPファイルやJavascriptファイルなどを編集したのですが、CSSのカスタマイズはstyle.cssを編集せずに、追加CSSを使うようにしました。追加CSSはWordpress 4.7以降のバージョンで追加された機能で「追加CSS」＞「子テーマCSS」＞「親テーマCSS」の優先順位で反映されます。

また、既存のphpファイルやjsファイルを編集する際はバックアップをとっておく事をオススメします。原因不明の不具合が生じたときにリカバリーできます。

子テーマ「Twenty Seventeen-child」の作成

まず、初めにカスタマイズ用の子テーマを作成します。子テーマを作成せずにTwenty Seventeenを直接編集してカスタマイズすることもできますが、

①親テーマがバージョンアップなどの時にカスタマイズした内容が上書きされてしまう。（親テーマがバージョンアップされても子テーマは上書きされません）
②親テーマを直接編集し復旧不能な状況に陥った場合、最悪の場合、サイトを一から作り直さなくてはいけない。
などのデメリットがあるので、子テーマを作成することをオススメします。子テーマを作成すると親テーマの内容に加え、子テーマの内容が優先して反映されます。

style.cssとfunctions.phpの作成

①子テーマを作成するためにwp-content/themes/twentyseventeen-childディレクトリを作成②style.cssとfunctions.phpを作成

子テーマが有効になるためには最低限、子テーマにstyle.cssとfunctions.phpが必要になります。

style.cssとfunctions.phpに以下のようにそれぞれ記述します。ファイルの編集は、私はよくTeraPad を使っています。

/*
Theme Name: twentyseventeen-child
Template: twentyseventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
*/

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );
}
?>

上記2ファイルを作成したら、wp-content/themes/twentyseventeen-childディレクトリに保存します。

子テーマを有効化

次に子テーマを有効化する為に WordPressの「管理画面」＞「テーマ」で「twentyseventeen-child」を選択して、「有効化」をクリックします。

メニューバーの編集

メニューナビゲーションがページ下部に表示されているので、ページ上部に固定されるように移動させ、メニューバーの背景色、文字色を変更させます。また、HOMEボタンを<i class=”fas fa-home”></i>のようなアイコンに変更します。また、自動スクロールしてくれる矢印の色も変更します。

メニューナビゲーションの位置移動と文字色の変更

追加CSSを編集します。追加CSSは「Wordpress管理画面」＞「外観」＞「カスタマイズ」で下図のような画面に移ります。

追加CSSに下記のコードを追加します、

/*背景色　半透明の黒に*/
.navigation-top{
	max-width:100%;
	max-height:10%;
	position:fixed;
	top:0em;
	border:none;
｝
/*文字色を白に*/
.main-navigation li a,
.site-header .navigation-top .menu-scroll-down,
.fa-home{
	color:#fff;
	 border-color:#fff;
}

※「.fa-home」はこの段階では意味がありませんが、次の工程で文字色を白にする為、同時に追記しています。

HOMEボタンを<i class=”fas fa-home”></i>に

メニューの「HOME」文字をアイコンの<i class=”fas fa-home”></i>に変更します。
アイコンはFontAwesomeを用いて表示させることにします。FontAwesomeの使い方の方法はCDNを使う方法もありますが、本サイトではheader.phpに張り付ける方法にしました。紹介する方法もheader.phpにコードを追記する方法になっています。

FontAwesomeへアクセスし、アカウントを作成

①

FontAwesome

header.php

<!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="https://gmpg.org/xfn/11">
  <?php wp_head(); ?>
  <script src="https://kit.fontawesome.com/ xxxxxxxxxxx.js" crossorigin="anonymous"></script>
 </head>

xxxxxxxxxxxのところに⑤で確認した個人コードを入力します。</head>の直前に入力すると変な挙動が起こることはないです。
これで後は好きなアイコンのコードを入力すればアイコンが表示されるようになります。

Homeアイコンを検索し、コードを張り付ける

③「メニューを保存」をクリックします。
④Wordpressのカスタマイズ画面左上の「公開」をクリックし、「F5」キーなどで更新します。
⑤Homeアイコンが少し小さく感じたので、先ほどのコードを<i class=”fas fa-lg fa-home”></i>と少し修正して、「メニューを保存」をクリックします。これでアイコンが少し大きくなります。（そのままの大きさで構わない方はこの修正は不要です）。

子カテゴリーの文字色を黒に

このままでは子カテゴリー表示時に文字色が白で背景色の白と同じ色になってしまい、子カテゴリーの文字が読めませんので、子カテゴリーの文字色は黒にします。追加CSSに下記を追記します（「Wordpress管理画面」＞「外観」＞「カスタマイズ」＞「追加CSS」です。）

/*子カテゴリーの文字色を黒に*/
.main-navigation ul ul a{
   color:#000;
}

検索窓のカスタマイズ

検索窓が気に食わなかったのと、画面上部のメニュー横に表示したかったので、検索窓を一から作成しました（といっても、それほど技術は使ってません）。あと検索の虫メガネアイコンをクリックするとにゅいーんと入力領域が伸びるような仕様にしました。

検索に関するphpファイルはsearchform.phpとsearch.phpの2つがtwentyseventeenにありますが、検索時のプログラムについてはそのままで検索窓の表示形式だけ変えたかったので、searchform.phpのみカスタマイズしました。

searchform.phpファイルのカスタマイズ

上記の通りカスタマイズというよりPHPファイルを一から作成しました。terapadを用いて以下の内容を書きます。ファイル名は「searchform」、拡張子は「.php」です。

<form method="get" class="searchform" action="<?php echo esc_url( home_url('/') ); ?>">
   <input type="text" placeholder="検索..." name="s" class="searchfield" value="" style="" />
   <button type="submit" class="searchsubmit" style="width:40px;"><i class="fas fa-search">
   </i></button>
</form>

検索窓に予め入力されている文字は2行目のplaceholderの項目で変更できることができます。ここでは「検索…」と表示されるようにしています。3行目で検索窓のアイコンは虫眼鏡のアイコンをFontAwesomeより拝借しました。

作成したファイルを先ほど作成した子テーマディレクトリ（/wp-content/themes/twentyseventeen-child/）にアップロードします。

header.phpのカスタマイズ

header.phpを/wp-content/themes/twentyseventeen/からダウンロードします。そして、カスタマイズ（子テーマ）用ファイルにします。

ダウンロードしたheader.phpの<div class = “wrap”>の下の

<?php if ( has_nav_menu( 'top' ) ) : ?>
	<div class="navigation-top">
      <div class="wrap">
        <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
        </div><!-- .wrap -->

の部分を次のように変更します。（4,6,7行目を追加しています）

 <?php if ( has_nav_menu( 'top' ) ) : ?>
	 <div class="navigation-top">
        <div class="wrap">
          <div class = "parallel">
            <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
            <?php get_search_form(); ?>
          </div>
         </div><!-- .wrap -->

編集し終わったら、子テーマディレクトリ（/wp-content/themes/twentyseventeen-child/）にアップロードします。

CSSをカスタマイズ

ここまでのコードを実装すると検索窓の主張がとても激しいので、少し奥ゆかしくなってもらいます。こちらのサイト参考にさせて頂きました。

追加CSSに以下を追記します。（追加CSSは「Wordpress管理画面」＞「外観」＞「カスタマイズ」＞「追加CSS」です）

/*メニューと検索窓を横並びに*/
.parallel{
	display:flex;
}
.searchform{
	margin-top:-3px;
	display:inline-block;
	position:fixed;
	float:right;
	right:6em;
}
input[type="text"] {
	height:40px;
	font-size: 12px;
	display: inline-block;
	font-weight: 100
	border:none;
	outline:none;
	padding:0px;
    padding-right: 30px;	
    width:0px;
    position: absolute;
    top:0;
    right:0;
    background:none;
    z-index: 3;
    transition: width .6s cubic-bezier(0.000,0.795,0.000,1.000);
    cursor:pointer;
}
input[type="text"]:focus{
	width:40vw;
	z-index: 1;
	border-bottom: 1px solid #fff;
}
::placeholder{
	color:#fff;
}
.searchsubmit{
	background: rgba(0,0,0,0.25);
	border-radius:100px;
    text-align:center;
    height: 40px;
    pointer-events:none;
}
/*虫眼鏡アイコン*/
.fa-search{
     position:relative;
     top: -2px;
     right: 7px;
     color: #fff;
}

スッキリしました。

アイコンをクリックすると検索窓がにゅいーんと伸びてきます（この段階ではメニューと重なっています）

投稿ページのカスタマイズ

カスタマイズ前の表示は以下のようになっています。

カスタマイズ方針として

①記事上部の「投稿」と「投稿者」を削除します。 ②全ての背景が真っ白なので、記事エリアは白、それ以外は薄いグレーにします。（白の領域が多いと目が疲れやすいと言われている為、ユーザーの負担軽減が目的です） ③記事作成日と記事更新日を表示させ、時計のアイコンもつけます。 ④デフォルトではトップページで記事の全てが表示されているので、200文字程度表示させて、残りは「続きを読む」として、1ページに表示させる記事数を増やします。
とします。

「投稿」を削除

親テーマ（wp-content/themes/twentyseventeen/）よりindex.phpをダウンロードして子テーマ（カスタマイズ）用ファイルにします。

ダウンロードしたindex.phpの下記コードを削除します。デフォルトでは26～28行目あたりにあります。

<header class="page-header">
   <h2 class="page-title"><?php _e( 'Posts', 'twentyseventeen' ); ?></h2>
</header>

編集し終わったら、子テーマディレクトリ（/wp-content/themes/twentyseventeen-child/）にアップロードします。

「投稿者」を非表示

子テーマディレクトリ（/wp-content/themes/twentyseventeen-child/）のfunctions.phpに以下のコードを追記し、アップロードし直します。

function twentyseventeen_posted_on(){
   echo '<span class="posted-on">' . twentyseventeen_time_link() .
   '</span>';
}

記事は白、それ以外は薄い灰色に

追加CSSに以下のコードを追記します。（追加CSSは「Wordpress管理画面」＞「外観」＞「カスタマイズ」＞「追加CSS」です。）

/*記事以外を薄いグレーに*/
.site-content-contain{
　 background-color:#e7e7e7;
}

記事の背景も薄い灰色になるので、記事だけ白くなるように以下のコードを追記します。

/*記事の色を白に*/
	 background-color:#fff;
	　border: solid 1rem #fff;/*白領域を一回り増やす*/
}

記事作成日と記事更新日とアイコン表示

記事更新日を表示させるようにします。また、それぞれの日付の左横にアイコンをつけます。アイコンはFontAwesomeからもってきました。

追加CSSに以下のコードを表示させます。（追加CSSは「Wordpress管理画面」＞「外観」＞「カスタマイズ」＞「追加CSS」です。）

/*記事作成日のアイコン*/
time.published:before {
	font-family: "Font Awesome 5 Free";
	content: "\f017";
	font-weight: 400;
}
time.updated:not(.published){
	display: inline;
}
/*記事更新日のアイコン*/
time.updated:not(.published):before{
    font-family:"Font Awesome 5 Free";
	content:"\00a0\f1da";
	font-weight: 900;
}

作成日と更新日の横にアイコンを表示させることができました。
記事作成日のアイコンはfont-weightの数値で黒塗りになったり、白抜きになったりするので、注意ください。詳しくは下記記事参照ください。

サムネイルをタイトル下に表示させる

デフォルトではサムネイル画像がどーんとタイトル上に表示されてしまいます。
画像さんにタイトル下へ引き下がってもらいます。

header.phpのカスタマイズ

/wp-content/themes/twentyseventeen-child/のheader.phpの下記箇所を削除します。（下記の1行目～14行目の部分です）

/*～一部抜粋～*/
<?php
/*
* If a regular post or page, and not the front page, show the featured image.
* Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
*/
     if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
	echo '<div class="single-featured-image-header">';
	echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
	echo '</div><!-- .single-featured-image-header -->';
	endif;
?>

content.phpのカスタマイズ

親テーマ（/wp-content/themes/twentyseventeen/template-parts/post/）からcontent.phpをダウンロードして子テーマ（カスタマイズ）用ファイルにします。
上記で削除した部分をcontent.phpの<div class=”entry-content”>の１つ上の行に貼り付けます。
その後、子テーマディレクトリ（/wp-content/themes/twentyseventeen-child/template-parts/post/）にアップロードします。
after

CSSでh2タグ、h3タグの表示を変更

テーマを載せ替えたせいで、h2タグや赤文字などの色文字やなどのデザインが変わってしまったので、追加CSSにデザインを追加します。
ｈ2タグは青文字の下ラインを、ｈ3タグは青文字の左ラインにしました。

/*h2タグなど*/
.entry-content h2 {
	font-size: 1.3rem;
	font-weight: 400;
	border-bottom: solid #6495ed;
}
.entry-content h3 {
	font-size: 1.125rem;
	font-size: 18px;
	font-weight: 300;
	border-left: 4px solid #6495ed;
	padding-left: 0.5rem;
	padding-top: 0px;
}

Gutenbergでの作成ではそのままで、ClassicEditorの場合はh2タグ（<h2>~</h2>）もしくはh3タグ(<h3>~</h3>)で囲む（ClassicEditorの場合）と囲まれた文字に対して内容反映されます。

文字色の追加

テーマを載せ替えてCSSがリセットされたので、再度色文字の設定をしました。
追加CSSに以下のコードを追加します。（Gutenbergで作成される場合はデフォルトで文字色を変えれるようになっていますので、不要な設定になります。）

/*文字色*/
.red{
	color:#ff0000;
}
.green{
	color:#008000;
}
.purple{
	color:#800080;
}
.darksalomon{
	color:#e9967a;
}

過去の設定が戻りました。赤文字であれば本文中の文字を＜red＞赤くしたい文字＜/red＞とredタグで囲むと赤文字にできます（”<”と”>”は半角）

マーカーの追加

マーカーの設定が消えてしまったので復活させます。追加CSSに以下のコードを追加します。

/*マーカー*/
.mark1{
	background:linear-gradient(transparent 0%,#f6ff5f 60%)
}

＜mark1＞~＜/mark1＞のタグで囲むとマーカーが引けます。

引用部分のデザイン

引用部分を下図のようにしたいので、追加CSSに内容を追加します。

/*引用デザイン*/
blockquote{
	position: relative;
	padding: 10px 20px;
	box-sizing: border-box;
	color:#4e4e4e;
	background:#f2f9ff;
}
blockquote:before{
	display:inline-block;
	position:absolute;
	top:7px;
	left: 10px;
	content:"\f10d";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	font-size:58px;
	line-height:1;
	color:#d2e6ff;
}
blockquote:after{
	display:inline-block;
	bottom:5px;
	right:15px;
	text-align:center;
	content:"\f10e";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	color:#d2e6ff;
	font-size:40px;
	line-height:1;
}
blockquote p {
	position: relative;
	padding:0;
	margin: 10px 0 ;
	z-index: 3;
	line-height: 1.7;
}
blockquote cite{
	position: relative;
	z-index: 3;
	display: block;
	text-align: right;
	color:#888888;
	font-size: 0.9em;
}

トップページや検索結果で「続きを読む」を追加

デフォルトだと記事の内容が全て表示されるので、トップページでサムネイルに文章を回り込ませ、200字で「続きを読む」と表示させるようにします。少ない範囲で1ページに表示できる記事数を増やす事を目指します。

index.phpをカスタマイズ

子テーマディレクトリ（/wp-content/themes/twentyseventeen-child/）のindex.phpの44行目あたりのget_template_part( ‘template-parts/post/content’, get_post_format() );を
get_template_part( ‘template-parts/post/content’, ‘excerpt’ );に修正します。これで、読み込むファイルが（親テーマの場合）twentyseventeen/template-parts/post/content.phpだったものがtwentyseventeen/template-parts/post/content-excerpt.phpに変わります。
変更前のindex.phpが次のようになっていて（一部抜粋です）

～省略～
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that
* will be used instead.
*/
get_template_part( 'template-parts/post/content', get_post_format() );
～省略～

変更後は以下のようになります。

～省略～
/*
 * Include the Post-Format-specific template for the content.
 * If you want to override this in a child theme, then include a file
 * called content-___.php (where ___ is the Post Format name) and that
 * will be used instead.
 */
get_template_part( 'template-parts/post/content', 'excerpt' );
～省略～

このPHPファイルを子テーマディレクトリ（/wp-content/themes/twentyseventeen-child/）へアップロードします。

archive.phpもついでにカスタマイズ

トップページは120文字で「続きを読む」が表示されますが、カテゴリ一覧から記事一覧を見たときは記事の中身が全て見えた状態になっていますので、archive.phpを編集して同じように「続きを読む」が表示されるようにします。
こちらも親テーマ（/wp-content/themes/twentyseventeen/）からarchive.phpをダウンロードして、子テーマ（カスタマイズ）用にします。デフォルトの43行目あたりの

～省略～
get_template_part( 'template-parts/post/content', get_post_format() );
～省略～

を

～省略～
get_template_part( 'template-parts/post/content', 'excerpt');
～省略～

に修正します。
編集したarchive.phpを子テーマ（/wp-content/themes/twentyseventeen/）へアップロードします。

「続きを読む」までの文字数を長くする

上記変更を行った場合、デフォルトでは110字になっています。この文字数を200字にしていきます。カスタマイズは簡単で、子テーマ（/wp-content/themes/twentyseventeen-child/）のfunctions.phpに以下のコードを追加します。

function my_excerpt_length($length) {
return 200;
}
add_filter('excerpt_length','my_excerpt_length',999);

アイキャッチ画像を追加する

親テーマ（/wp-content/themes/twentyseventeen/template-parts/post/）からcontent-excerpt.phpをダウンロードして子テーマ（カスタマイズ）用ファイルにします。
content-excerpt.phpの</header><! –.entry-header — >の下に下記のコードを記載します。

<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
	<div class="entry-post-thumbnail">
      	 <?php the_post_thumbnail('thumbnail'); ?>
    </div>
<!-- .post-thumbnail -->
<?php endif; ?>

子テーマに/wp-content/themes/twentyseventeen/template-parts/post/のディレクトリを作成し、content-excerpt.phpをアップロードします。

このままだとアイキャッチ画像の右横に空白ができるので、追加CSSに下記のコードを追加して、整えます。（追加CSSは「Wordpress管理画面」＞「外観」＞「カスタマイズ」＞「追加CSS」です。）

/*記事一覧、アイキャッチ画像まわり調整*/
div.entry-post-thumbnail {
	float: left;
	margin: 0 10px 10px 0;
}

いい感じになりました。

フッターのカスタマイズ

フッターに「お問い合わせ」「サイトマップ」「プライバシーポリシー」を移動させます。また、デフォルトである

を消します。
加えて、コピーライトを追加します。

footer.phpのカスタマイズ

親テーマ（/wp-content/themes/twentyseventeen/）からfooter.phpをダウンロードして、子テーマ（カスタマイズ）用にします。
footer.phpの</div><!– .wrap –>の1行上に下記コードを追加します。

  <li class = "nav-footer"><a href = "https://learning-eigo.com/contact">お問い合わせ</a></li>
  <li class = "nav-footer"><a href = "https://learning-eigo.com/site-map">サイトマップ</a><li>
  <li class = "nav-footer"><a href = "https://learning-eigo.com/privacypolicy">プライバシーポリシー</a></li>
  &copy;2016-<?php echo date('Y')? >アラサーリーマン

見事に文字化けしてしまいました。footer.php文字コードをUTF-8に変更して、再度アップロード。

文字化けは治りましたが、赤枠で囲ったSNSのリンク（黒丸に鎖のようなマークの箇所（２つ））とプライバシーポリシー／Proudly～～～が邪魔なので修正します。
まず、footer.phpの以下の箇所（最終行の数行前にあります）を削除します。

get_template_part( 'template-parts/footer/site', 'info' );

また、SNSのリンクは「ソーシャルリンクメニュー」をつけていた事が原因だったので、Wordpressの「管理画面」＞「外観」＞「メニュー」＞「メニューを削除」→「メニューを保存」で削除できました。
修正後は以下のようになりました。

子テーマディレクトリ（/wp-content/themes/twentyseventeen-child/）へアップロードします。

追加CSSのカスタマイズ

縦並びになっているので、横並びします。また、「お問い合わせ」「サイトマップ」「プライバシーポリシー」はポインタが重なったら下線が表示されるようにします。（追加CSSは「Wordpress管理画面」＞「外観」＞「カスタマイズ」＞「追加CSS」です。）

/*フッター*/
.nav-footer{
	display: inline;
	padding: 0px 8px;
}
.nav-footer:hover {
	border-bottom:solid #000;
}

横並びになり、カーソルが重なると下線が表示されるようになりました。

ここまででＰＣ用のカスタマイズは終了です。

スマホ用デザインの修正

ここからスマホ用のデザインをカスタマイズして、整えていきます。twentyseventeenはレスポンシブデザインなので、ある程度そのままでいける部分はあるのですが、少し手を加えます。

ハンバーガーメニューの「メニュー」を消す

現段階でのデザインは以下のようになっています。

まずはハンバーガーメニューの「メニュー」という字を消していきます。ハンバーガーメニューとは上図左上の三本線のメニューボタンの事です。ちょうどパン、ハンバーガー、パンでできたハンバーガーのように見えるメニューボタンなので、ハンバーガーメニューと呼ばれているそうです。

親テーマ（/wp-content/themes/twentyseventeen/template-parts/navigation/）からnavigation-top.phpをダウンロードして、子テーマ（カスタマイズ）用とします。
navigation-top.phpの
_e( ‘Menu’, ‘twentyseventeen’ );の箇所を_e( ”, ‘twentyseventeen’ );
とします。編集したnavigation-top.phpファイルを子テーマ（/wp-content/themes/twentyseventeen-child/template-parts/navigation/）へアップロードします。

消せました。

スマホ用デザインでもハンバーガーメニューと検索窓を画面上部に固定

スマホ用デザインだと、ハンバーガーメニューと検索窓が下にスクロールをすると消えてしまうので、画面上部で固定されるようにします。こちらのサイト参考にさせて頂きました

追加CSSの編集

追加CSSに下記のコードを記載します。（追加CSSは「Wordpress管理画面」＞「外観」＞「カスタマイズ」＞「追加CSS」です。）

/*スマホ メニュー上部固定*/
.site-navigation-fixed.navigation-top{
	bottom: auto;
	position:fixed;
	left:0;
	right:0;
	top:0;
	width:100%;
	z-index:7;
}

global.jsの編集

親テーマ（wp-content/themes/twentyseventeen/assets/js/）からglobal.jsファイルをダウンロードして子テーマ（カスタマイズ）用とします。
ダウンロードしたJavascriptファイルの以下の箇所に追加します。85行目、86行目あたりの

// Remove 'fixed' class if nav is taller than two rows.
$navigation.removeClass( navigationFixedClass );

の下に以下を追記します。

} else {
	headerOffset = $customHeader.innerHeight();
	if ( $( window ).scrollTop() >= headerOffset ) {
		$navigation.addClass( navigationFixedClass );
	 } else {
		 $navigation.removeClass( navigationFixedClass );
	}

＊参考サイト４
編集したJavaScriptファイルを子テーマディレクトリ（wp-content/themes/twentyseventeen-child/assets/js/global.js）に保存します。

ブログタイトルのz-index等修正

このままだとTOP画面の最上部を映している時にハンバーガーメニューや検索アイコンをクリックできないのでブログタイトルのz-index等を修正します。追加CSSに以下を追記します。

/*TOP画面でハンバーガーメニュー押せるようにブログタイトルのz-index等修正*/
.has-header-image.twentyseventeen-front-page.custom-header,
.has-header-video.twentyseventeen-front-page.custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header{
	margin-top:32px;
	z-index:0;
}

さらにCSSで調整

検索アイコンの位置やメニューの文字が背景色と同じ白色になっていて見えなかったりするので、文字色を変更していきます。

/*for mobile css*/
@media screen and (max-width: 20em){
	.searchform{
		top: 0.5em;
		right: 1em;
	}
	.main-navigation li a, .fa-home{
		padding: 0.75em 1.695em;
		color: #000;
		background:#fffafa;
	}
	.main-navigation li a,
	.fa-home:hover{
		color:rgba(0,0,0,0.6);
	}
	.main-navigation ul{
		background:#fffafa;
	}
	input[type="text"]:focus{
		width:40vw;
	}
	input[type="text"] {
		color:#fff;
	}
	.menu-toggle{
		margin:auto;
		padding: 1em;
		color:#fff;
	}
}

それなりに整いました。

とりあえずカスタマイズは以上です。これからも気になった部分は随時更新し、この記事に追記していきたいと思います。

なぜ今更Twenty Seventeenか

どこをカスタマイズするの？

子テーマ「Twenty Seventeen-child」の作成

style.cssとfunctions.phpの作成

子テーマを有効化

メニューバーの編集

メニューナビゲーションの位置移動と文字色の変更

HOMEボタンを<i class=”fas fa-home”></i>に

FontAwesomeへアクセスし、アカウントを作成

Homeアイコンを検索し、コードを張り付ける

子カテゴリーの文字色を黒に

検索窓のカスタマイズ

header.phpのカスタマイズ

CSSをカスタマイズ

「投稿」を削除

「投稿者」を非表示

記事は白、それ以外は薄い灰色に

記事作成日と記事更新日とアイコン表示

サムネイルをタイトル下に表示させる

header.phpのカスタマイズ

content.phpのカスタマイズ

CSSでh2タグ、h3タグの表示を変更

文字色の追加

マーカーの追加

引用部分のデザイン

トップページや検索結果で「続きを読む」を追加

index.phpをカスタマイズ

archive.phpもついでにカスタマイズ

「続きを読む」までの文字数を長くする

アイキャッチ画像を追加する

フッターのカスタマイズ

footer.phpのカスタマイズ

追加CSSのカスタマイズ

スマホ用デザインの修正

ハンバーガーメニューの「メニュー」を消す

スマホ用デザインでもハンバーガーメニューと検索窓を画面上部に固定

追加CSSの編集

global.jsの編集

ブログタイトルのz-index等修正

さらにCSSで調整

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル