WordPress備忘録　新テーマ Twenty Seventeen を少しカスタマイズしてみた！

 

WordPress4.7に付属の新テーマ「Twenty Seventeen」なかなか、カッコイイです。(^^)

今まで、WordPress付属のテーマをベースにしてサイトを作ってみようと思った事はなかったんですけど、「Twenty Seventeen」は、機会があれば使ってみたいなーと思わされるものがありました。ブログで使うなら、そのままで十分カッコイイと思うんですけど、ホームページにしようと思うと、個人的には、パッと見で、カスタマイズしなきゃ！と思うところがあります。ということで、ちょっと触ってみました。それをいつか使う機会があるかもしれないので、書き留めておこうと思います。

一般的な「Twenty Seventeen」の説明ではなく、僕がホームページに使うなら、まずは、こんなふうにカスタマイズしてから使うって内容になってますので、ご勘弁を。(^^;

 

「Twenty Seventeen」を開いてみて、まず何はともあれ目を惹かれるのは、画面一杯に広がる上の図のような大きなヘッダー画像です。「Twenty Seventeen」のカスタマイズを開いて、ヘッダーメディアの項目をクリックすると、下図のようなヘッダー画像の設定画面が開いてきます。

 

見ての通り、ここでは、動画の指定も出来ます。Youtubeの動画アドレスを入れるだけで、それが、ヘッダー画像部分に表示されるってのは、おもしろいです。短めのループっぽい動画を入れたら、なかなか、カッコイイと思います。事実、デモサイトでは動画が入っています。

実際に使う時には、このヘッダー画像の高さを低くカスタマイズする可能性もありますけど、基本的には、「Twenty Seventeen」の持ち味として、この高さのまま僕は使うような気がします。あとは、タイトルの位置を変更したり、他の物を必要に応じて配置して使うとは思いますが・・・。その場合は、トップページ以外のヘッダーを別に作らないといけないような気がしますけど・・・。(^^;

 

上のデモサイトのトップページをスクロールしてもらうと分かると思いますが、コーヒーの写真やサンドイッチの写真が出てきますよね。そして写真を挟んで、上から「WELCOME」、「OUR DRINKS」、「OUR FOOD」、「BLOG」とタイトルが出てきますよね。これが「Twenty Seventeen」の大きな特徴で、それぞれのタイトルで表示されている部分が、別々の固定ページになっています。一番上の「WELCOME」というタイトルが出ている部分が、通常の固定フロントページ部分です。つまり、上のページのトップページは、通常の固定フロントページも併せて、計4ページでトップページが構成されているというわけです。

「Twenty Seventeen」のカスタマイズの中に、テーマオプションという項目があるので、そこをクリックすると、以下のような画面が開いてきます。

 

見て頂いた通り、ここで、通常の固定フロントページ以外に、最大4ページを指定する事ができます。そして、スクロールした時に、それぞれのページの間に表示される画像は、ここで指定した固定ページそれぞれのアイキャッチ画像になっています。つまり、それぞれの固定ページでアイキャッチ画像を変更するだけで、トップページをスクロールした時に、表示される画像を変更する事が出来るようになっています。

 

パネルの画像部分をカスタマイズ

ただ、個人的には、スクロールして表示される画像の高さをもう少し、抑えたい気がします。この高さを変更するには、「.panel-image」に例えば以下のように高さ指定をしてやればOKです。

.panel-image{position:relative; width:100%; height: 50vh;}

ここで、さらに、個人的には、下の画像のように、それぞれの画像の上にテキストを表示させたくなります。

やり方は、色々とあるんでしょうけど、僕はアイキャッチ画像のキャプションが表示されるようにしてみました。

「Twenty Seventeen」のテーマフォルダの中に、「template-parts」というフォルダがあり、さらにその中に「page」というフォルダがあります。その中に、「content-front-page-panels.php」というファイルがあるので、それをTeraPadなどのエディタで開き、以下の、7から10行目を追記してみました。

	<?php if (has_post_thumbnail()) :
		$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );
		// Calculate aspect ratio: h / w * 100%.
		$ratio = $thumbnail[2] / $thumbnail[1] * 100;
		?>
<div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
<?php echo '<div class="panel-comment">';
      if($pt_caption = get_post(get_post_thumbnail_id())->post_excerpt)  {
          echo '<h1>'.$pt_caption.'</h1>'; }
    echo '</div>'; ?>
		
			<div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>
		</div><!-- .panel-image -->

	<?php endif; ?>

これで、とりあえず、アイキャッチ画像のキャプションが表示されるので、あとはCSSで、位置調整したり、装飾してやればOKです。

 

あと、デモサイトを見て、実際に使う事を考えると、僕が気になるのは、左側に「WELCOME」、「OUR DRINKS」といったタイトルがあり、大きく空いていることです。これも、なかなかカッコイイんですけど、ホームページとして使う場合は、個人的には、タイトル部分を消して、幅広で使いたくなります。

ちなみに、上で書いたテーマオプションのページを選択する部分の上に、固定ページレイアウトという部分があって、1カラムか2カラムか選べるようになっています。1カラムを選択すると、以下のような感じになります。１カラムにしても、やはり幅が狭いです。(^^;

 

コンテンツ部分の幅をカスタマイズ

ということで、僕は幅を1200pxの幅広にしてみました。
上で書きました「page」フォルダの中には、「content-front-page.php」「content-front-page-panels.php」「content-page.php」の３つのファイルがあります。名前を見ると、なんとなく分かるかと思いますが、「content-front-page.php」はトップページの固定フロントページに指定した部分に読み込まれ、「content-front-page-panels.php」は上でも触った、オプションで指定しているページに読み込まれています。「content-page.php」は、トップページ以外の固定ページ部分ですね。

ここでは、トップページをいじってみるので、まず、「content-front-page.php」「content-front-page-panels.php」の<div class=”wrap”>を<div class=”wide-wrap”>に書き換え、以下のタイトル部分と編集画面のリンク部分を削除しました。

こちらが削除部分です。

			<header class="entry-header">
				<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

				<?php twentyseventeen_edit_link( get_the_ID() ); ?>

			</header><!-- .entry-header -->

 

そして、下の2行目が書き換えた部分です。

<div class="panel-content">
      <div class="wide-wrap">
 
 
         <div class="entry-content">

 

CSSには以下のように書いてみました。1行目がその指定で、2、3行目は、背景色を指定しているだけです。

.wide-wrap{width:1200px; margin:50px auto; position:relative;}
#post-86{background-color:#f9e3e3}
#panel1{background-color:#e3f2f9}

 

これで、以下のようになります。

ピンク色の部分が固定フロントページ部分で、水色の部分がオプションで指定した第一セクション部分です。ちなみに、セクション部分は、上からpanel1、panel2、panel3、panel4となっているようです。

 

編集画面の幅をカスタマイズ

固定フロントページで気になったのが、編集画面で、ご丁寧に元々のテンプレートの幅に合わせて、編集画面でも、580pxになっています。でも、今回は幅を1200pxにしたので、ちょっと違和感があります。ということで、これも、テーマフォルダの中にある「assets」フォルダの中の「CSS」フォルダの中にある「editor-style.css」の以下の部分を100%にしてみました。

body {
	background-color: #fff;
	color: #333;
	margin: 20px 40px;
	max-width: 100%;
}

 

これで、個人的には、なんか落ち着いた感じがします。(^^)

 

SVGアイコンの色を変更

トップメニューの右端に出てくる下向き矢印や、ソーシャルリンクメニューのアイコンなど、背景の色を変えた時には、例えば、以下のように色を変更したくなります。

 

まず、トップメニュー横の下向き矢印の色の変更を以下のように書いてみました。

.navigation-top{background-color:#00527A}
.navigation-top ul li a{color:#fff}
.navigation-top li a:hover{color:#F7E92E}
.current-menu-item a{color:#F7DA9B; pointer-events:none}
.icon-arrow-right {fill:#fff}
.icon-arrow-right:hover {fill:#F794EF}

５、6行目がSVGアイコンの色を変更してる部分です。ちょっと、普通の色の変更と書き方が違いますよね。

 

ソーシャルメニューのリンクアイコンの色の変更は、下のような感じで、書いてみました。

.icon {fill:#fff}
.social-links-menu a{background-color:#5ea9dd}
.social-links-menu a:hover{background-color:#eb5ded}

 

まあ、実際に「Twenty Seventeen」をベースにしてホームページを作るとなれば、一般固定ページにサイドバーをつけたり、別のヘッダーを作ったり、カスタマイズだらけになるんでしょうけど、とりあえず、ちょっと触ってみた部分をメモがわりに書いてみました。

もちろん「Twenty Seventeen」は、WordPress4.7に付属のテーマですから、頻繁にアップデートが行われると思うので、上記のカスタマイズをされる場合は、必ず子テーマを作ってやって下さいね。(^^;

 

 

YASUKE YAMURA