カテゴリー
WordPress

【WordPress】新テーマ Twenty Fourteen を適用する時のポイントメモ♪

WordPress の新しい標準テーマ、Twenty Fourteen とは？

これですの♪

今回、わたくしたちのウェブサイトにこの Twenty Fourteen テーマを反映いたしました。その過程をメモいたします♪

Twenty Fourteen の子テーマで最低限のものを作成します♪

今後の修正は、子テーマに施すことによりテーマ Twenty Fourteen がアップデートされても、わたくしたちの修正には影響のないようにいたします。

子テーマについては以前次のように取り組みました。

まずは、子テーマ用のディレクトリと style.css を作成します。

[root@oki2a24 themes]# mkdir oki2a24com-twentyfourteen-child
[root@oki2a24 themes]# vim oki2a24com-twentyfourteen-child/style.css

style.css にテーマに必要な項目、子テーマであることを示す内容を書きました。

/*
Theme Name: oki2a24.com, Twenty Fourteen Child
Theme URI: https://oki2a24.com/
Description: Twenty Fourteen テーマを基にした子テーマです。
Author: oki2a24.com
Author URI: https://oki2a24.com/
Template: twentyfourteen                    
Version: 1.0
*/
@import url("../twentyfourteen/style.css");

続いて、functions.php に処理を追加いたしまして、more タグのリンクをクリックしても URL 末尾に付く #more-xxxx を削除するようにします。

これも以前に取り組みました。

まずは、functions.php を作成します。

[root@oki2a24 themes]# vim oki2a24com-twentyfourteen-child/functions.php

ファイルには次のように書きました。

<?php
/**
 * more タグで URL 末端に付く #more-xxxx を削除します。
 */
function remove_more_link_scroll( $link ) {
        $link = preg_replace( '|#more-[0-9]+|', '', $link );
        return $link;
}
/**
 * コンテンツの more リンククリック時に処理を追加します。
 */
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );

管理画面からの設定を修正します！

子テーマが完成いたしました。早速変更いたしました♪

  • 外観 > テーマ

から、子テーマを選択して切り替えます♪

これだけですと、メニューバーが消えてしまいましたり、Twenty Thirteen では無効にしていたサイドバーが復活したりとさまざま影響が出てきました。そこで、これらに対応いたします。

まずは、ヘッダーメニューの再設定です！

  1. 外観 > メニュー
  2. メニューを編集タブ
  3. 今まで使用してきたヘッダーメニューがあり、内容がそのままであることを確認。名前も「head-nav」のままであることを確認。
  4. 位置の管理タブ
  5. トップメインメニューで head-nav を選択
  6. 変更を保存

続いて、ウィジェットの編集です♪

Twenty Fourteen は一番上にヘッダーメニューが表示されるとともに、検索窓もそこに用意されます。

そしてこの検索フォームを含むヘッダーメニューはスクロールしても追従いたしますので、ページの他の部分には検索窓が必要ありませんのでウィジェットの検索フォームは取り除いてしまいます。

続いて、フッターウィジェットエリアですけれども、これはページ幅を狭めますとメインサイドバーがページ下部に移動し、フッターウィジェットエリアのコンテンツを表示するのに非常にスクロールが必要となります。

よって、無駄と考えました。

同じメインサイドバーと同じコンテンツ、「人気の投稿とページ(jetpack)」を表示しており、メインサイドバーが下部に移動した状態でスクロールしますと「人気の投稿とページ(jetpack)」が2回表示されてしまい、美しくない、ということも大きかったですの♪

また、Google AdSense 広告も取り外し、フッターウィジェットエリアは空っぽといたしました。

代わりに、メインサイドバー上部に、「テキスト」ウィジェットを追加しました。追加したのはタイトルを「PR」として広告サイズを「レスポンシブ広告ユニット（ベータ版）」です。

最後に、プラグインの設定ですの♪

Twenty Fourteen のレスポンシブデザインが気に入りましたので、次のスマホ用の表示機能をオフにいたしました。

  1. Jetpack
  2. モバイル用テーマで「停止」をクリック

おわりに

新しい WordPress の標準テーマ Twenty Fourteen はクールで落ち着いたアトモスフィアがあり、クールですわ！

このテーマにヘッダー画像を設定しましたらどうなるかしら？わたくしヘッダー画像設定してみたいですの♪

こちらの投稿を参考に、設定しますわ♪近いうちにきっと♪

以上です。

コメントを残す