ここをテーマTwenty Seventeenにしてのカスタマイズ一覧

2016/12/08[公開] 2017/07/29[最終更新]

 WordPress 4.7-jaアップデートが来ましたので、早速ここを2017年デフォルトテーマであるTwentySeventeenにしました。4.7にアップデートしてもテーマTwenty Seventeenは追加インストールが必要です。いままでTwenty Fifteenを利用していました。Twenty Sixteenは見送って、今回のテーマはライブプレビューをみて気に入ったので2年振りのテーマ刷新です。

 この記事は、TwentySeventeenにしてカスタマイズした内容を追記していく予定です。全部出来上がってからアップしようと考えていたら、いつまでもテーマ変更できないと思うので、思い切って先に公開してから細かいところは追々設定していく予定です。まだざっくりと設定しただけですが2017年のデフォルトテーマ、カスタマイザーで設定するだけでかなりいい感じに出来上がっています。

WordPress.orgのテーマページはコチラTwenty Seventeen

スポンサー リンク

子テーマ作成

 まずは、子テーマを作成しました。WordPressデフォルトテーマなので頻繁にアップデートが配信されます。今回のテーマにはカスタマイザーに追加CSS機能があるので、CSSの変更だけなら子テーマ不要ですが、テーマファイルを直接カスタマイズした部分がテーマアップデートでリセットされてしまいます。

 私は、パンくずリストや関連コンテンツなどを出すのにテーマファイルの変更を加えているので子テーマ必須です。子テーマの作り方は過去記事で紹介していますので、そちらをご覧ください。WordPress子テーマの作り方【WP4.2対応】

ヘッダー動画にする

 このテーマで一番目を引くと思うのが、ヘッダー動画でしょう。トップページのヘッダー画像をmp4動画やYoutube動画にすることができます。PCでの閲覧でトップページを開くと画面いっぱいにヘッダー動画が再生されます。ものすごいインパクトですね。しかしはたして、このブログにインパクトが必要でしょうか?

 といっても、”トップページ”のヘッダーだけが動画になるだけで、記事ページのヘッダーは画像なので、それほど気にしなくて良いでしょうか。しかもPC閲覧時だけ動画のようです。(iPadではヘッダー画像が表示されています。)とりあえずネタにもなるので設定してみました。

 動画は自前で用意しました。ウェアラブルカメラHX-A100で撮った天気の良い日に荒川を渡っている映像を使いました。テーマ推奨動画は、2000×1200ピクセルのMP4動画ということですが、HX-A100で撮ったままの1280×720ピクセル30fpsをぶった切っただけの7秒動画をアップロードしました。これで容量7.5MBです。

 WordPressというかPHPのデフォルトがアップロード2MB上限だと思うので、推奨動画をアップするためには、上限を増やす必要ありです。やり方は過去記事で紹介していました。phpMyAdminのインポートできる最長: 2048KiBの制限を増やす

 Youtubeの動画を指定することもできるので、そっちの方が簡単です。ヘッダー動画を設定する方法は、トップページを表示したままカスタマイザーを開き、ヘッダーメディアの項目で動画を指定します。

 上部のサイトタイトルをクリックしてトップページを見ることができます。

サイトタイトルにロゴ

 カスタムロゴ機能がテーマに組み込まれています。デフォルトテーマなので、みんな同じになりがちなところを、ロゴで個性を出すことができます。カスタマイザーを出して、サイト基本情報→ロゴ にロゴ画像をアップしました。

 推奨画像サイズは250×250ピクセルです。サイトタイトルとキャッチフレーズの左側に配置されるのでロゴという感じになりました。WordPress4.5以降のTwentyFifteen、TwentySixteenでもカスタムロゴ機能がありましたが、タイトルの上に表示されてヘッダー幅を押し上げていたのと比べると、いい感じになっています。(モバイル幅ではタイトルの上に表示されます。)

トップページとアーカイブページを抜粋表示

 ブログトップのページが、最近の投稿一覧で記事全文がずらずら続いているのを、抜粋表示に変更しました。検索結果のページは抜粋一覧表示なので、search.phpを参考にトップページindex.phpと、アーカイブページarchive.phpを変更します。

 twentyseventeenテーマディレクトリーから、index.phpとarchive.phpを子テーマにコピーしてきて、45行目を変更します。

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

↓ ↓ ↓ ↓

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

get_post_format() を ‘excerpt’ に書き換えます。・抜粋用のテンプレートを呼び出すように変更です。アイキャッチなしの抜粋一覧表示になるので、サイドバーの長さに合わせて管理画面の設定→表示設定→1ページに表示する最大投稿数を15件に増やしました。

(2017/07/29追記)プラグインで簡単に抜粋表示にすることもできます。>プラグインEasy Custom Auto ExcerptでWordPressトップページを抜粋表示に

content.phpはディレクトリ階層に注意

  記事本文部分のテンプレートcontent.phpを子テーマにコピーして編集する際の注意点です。このサイトでは、パンくずリストプラグインBreadcrumb NavXTのコードや、Google関連コンテンツユニットのコードを貼り付けるカスタマイズでcontent.phpを編集しています。

 twentyseventeen親テーマでは、/template-parts/post/content.phpというディレクトリ階層下にあります。このcontent.phpを子テーマに持ってくるときは、/template-parts/post/content.phpのディレクトリ階層(フォルダ構成)と同じ階層を作ってコピーしないと変更が反映されません。これでちょっとハマリました。

 子テーマルートにcontent.phpを置く場合、その上位テンプレートであるsingle.phpも子テーマに持ってきて、‘template-parts/post/content’‘content’に変更しても良いかもしれませんが、私は前者のディレクトリを作成してコピーしています。

フッターをCopyright表示に変更

 フッターのProudly powered by WordPress表示をCopyright表示に変更しました。子テーマにコピーするテンプレートファイルは、上記と同じように /template-parts/footer/site-info.php をディレクトリ階層(フォルダ構成)そのまま子テーマにコピーして編集します。Copyright表示は、よくある単純なコードを利用しています。site-info.phpの13行目を下記に入れ替えています。

<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyseventeen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyseventeen' ), 'WordPress' ); ?></a> 

↓ ↓ ↓ ↓

<?php printf( __( 'Copyright &copy; %s All Rights Reserved.', 'twentyseventeen' ), '<a href="https://def-4.com/" >デフよん</a>' ); ?> 

フォントファミリー指定

 style.cssデフォルトで、MacとiOSではヒラギノ角ゴシック、Windowsではメイリオ、その他はゴシック系のフォントファミリー指定がされています。とくにこだわりがなければ、何も変更する必要はないですが、変更する場合は子テーマにフォントファミリー部分をお好みで変更します。

詳しくは別記事にしました。テーマtwentyseventeenの日本語フォント指定を変更する

グローバルナビメニュー

 グローバルナビゲーションメニューを設置しました。twentyseventeenでは、作成したメニューの位置で「トップメニュー」のチェック欄にチェックを入れると、ヘッダー下部にグローバルナビメニューとして表示されます。

 ページを下にスクロールしても、メニューが追従して常に上部に表示されているので、メニューを出すとユーザビリティアップしたような気がします。

アイコンフォントを出す

 グローバルナビメニューやサイドバータイトルにFont Awesomeアイコンフォントを出しています。プラグイン「AGP Font Awesome Collection」をインストールして有効化すると、メニュー作成画面でアイコンフォントをプルダウンで選ぶことができるようになります。

 さらにサイドバーのウィジェットタイトルは、CSSの擬似要素:beforeを使って表示させています。例としてウィジェットに追加したカテゴリーのタイトルにアイコンフォント (Unicode: f02c)を出す場合です。

 プラグイン「AGP Font Awesome Collection」は記事本文中にも簡単に出せるので便利です。過去記事で紹介しています。AGP Font Awesome Collectionプラグインで記事中にアイコンフォントを簡単に

ソーシャルリンク

 テーマ標準のソーシャルリンクメニューがフッター左に出せますが、今回はコチラのプラグインを利用してサイドバーとフッターの両方にウィジェットで出しました。詳しくは別記事にしました。Social Media and Share IconsプラグインでFeedly含むソーシャルアイコンを出す

リンクの下線を非表示に

(2017/02/01追記) 本文やウィジェットのリンク文字に、下線が出ているのを非表示にしました。詳しくは別記事にしています。TwentySeventeenでリンクの下線を非表示にする

表の枠線が出なくなった

(2017/02/04追記)テーマをTwenty Seventeenに変更してから、過去記事で挿入していたテーブルの枠線が出なくなったのと、テーブルが均等幅にならなくなりました。style.cssのtable設定が、いままでのデフォルトテーマから今回ずいぶん変わったようです。詳しくはコチラの記事をご覧ください。TwentySeventeenでテーブルの枠線を出す追加CSS

背景色をCSSでカスタマイズ

(2017/04/22追記)グローバルナビメニューやフッターの背景色を設定しました。詳しくはコチラの記事をご覧ください。 テーマTwentySeventeenの背景色をCSSでカスタマイズ

記事の横幅を1200pxに広げる

(2017/06/13追記) ワイド画面のパソコンで見ると、記事本文の幅が狭く感じていたので横幅を広くしてみました。詳しくはこちらの記事にしました。テーマTwentySeventeenの記事横幅を最大1200pxに変更する

スポンサー リンク

こちらの記事もどうぞ

“ここをテーマTwenty Seventeenにしてのカスタマイズ一覧” への10件の返信

  1. とてもためになりました。ありがとうございます。
    もし記事があったらすみません。
    ヘッダーのでっかい画像のサイズの変更の仕方を教えてください。
    あれこれ見ているのですがわからなくって。

    1. あくあさん、style.cssの1683行目からヘッダー画像と動画のサイズの設定がありますが、
      それでも画像サイズが小さくなるだけで、ヘッダーサイズは変わりません。
      トップページの全画面ヘッダーはこのテーマの特徴なので、そこが気になるならテーマを変えたほうが良いと思います。

  2. はじめまして。沢山読ませていただきました。
    記事の中にお気軽にシェアしてください。でシェアボタン設置してありますがどのようにしたらよいのでしょうか。教えて下さい。

  3. WPもHPも初心者のものです。たまたまテーマをこのTwenty Seventeenにしたのですが、最近テーマを変えようかと思っていたところたどり着きました。
    こちらのサイトは見れば見るほどすごいです。しかもシンプル。ぜひいろいろ真似をさせてください。とても参考になりました。(何をどうすればいいのか、いまのところわかりませんが、ここの記事を参考に一つずつがんばります。)

    1. ゆうすけさん、コメントありがとうございます。
      私も学びながら備忘録的に記事にしています。
      ぜひ参考にしてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です