こんにちは。
現在作成中のサイト “Mari! Mari! Official Web” で WordPress を使っていますが、そのテーマ Twentyseventeen のカスタマイズについて、備忘録を兼ねて投稿します。
この記事の目次
子テーマの作成
この手のネタを検索するとどの記事にも書いてありますが、直接 Twentyseventeen をカスタマイズするのではなく、自分でテーマを自作し、そのテーマから親となるテーマを呼び出す方がいいです。
Twentyseventeen は頻繁にアップデートされるため、直接 Twentyseventeen をカスタマイズすると、アップデートでその内容が消されてしまうからです。
- FFFTPでサイトにアクセスし、テーマディレクトリ "wp/wp-content/themes" ディレクトリに移動
- 子テーマのデレクトリ "okanduo" を作成
- 最低限のテンプレートファイルとして以下をアップロード
- 404.php
- footer.php
- functions.php
- header.php
- searchform.php
- style.css
※各ファイルはテーマディレクトリの"twentyseventeen"ディレクトリからコピーしました。
- 管理画面で"外観"→"テーマ"と進むと作成した子テーマが追加されているので、適応
"style.css" の内容はこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 | /* Theme Name: okan duo Author: Michio Matsumura Author URI: http://www.blindelux.net/ Description: Twenty Seventeen の子テーマとして動作。 Version: 1.0 Template: twentyseventeen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ @import url("../twentyseventeen/style.css"); |
最下行で親テーマの"style.css"を読み込むことで、テーマの親子関係を関連付けています。
子テーマの作成方針
今回は以下のような方針で子テーマを作成します。
- Twentyseventeenからのカスタマイズは最低限とする
- テンプレートのファイルも最低限のみ作成する
- なるべくアクセシビリティに配慮する
全てのカスタマイズはNVDAで操作可能
改めて別記事でも触れるつもりですが、私が利用しているスクリーン・リーダー "NVDA" で、全てのカスタマイズ作業が行えました。数年前の WordPress ではこうは行かなかったと思うので、近年の WordPress のアクセシビリティに対する取り組みには敬意を評します。
なお "PC-Talker" 等、NVDA以外のスクリーン・リーダーでの動作検証は行いませんでしたが、私の感では難しいと思います。 PC-Talker ではリンクやフォーム部品しかクリックできない一方、NVDAではJavascript等で作成したクリかぶるな部品も扱うことができるためです。
パンくずリストの表示
まずは管理画面で"プラグイン"→"新規追加"と進み、"Breadcrumb NavXT"をインストール&有効化。
このプラグインは各ページにパンくずリストを表示します。
次に管理画面で"外観"→"テーマの編集"と進み、表示されたテンプレートファイルの中から"header.php"をクリック。
パンくずリストを表示させたい場所に以下を追記します。今回はファイルの下から3行目、
1 | <div class="site-content-contain"> |
の上に以下を追加。
1 2 3 4 5 6 | <!--begin(パンくずリスト)--> <div class="breadcrumbs"> <?php if(function_exists('bcn_display') and !is_front_page()) { bcn_display(); } ?> </div><!--end(パンくずリスト)--> |
※トップページにはパンくずリストを表示しないようにしています。
※この位置が本当にいいのかは検証していません。
フッタの “Proudly powered by WordPress” を削除し Copyright 表示を追加
管理画面で"外観"→"テーマの編集"と進み、表示されたテンプレートファイルの中から"footer.php"をクリック。
下の方にある
1 | get_template_part( 'template-parts/footer/site', 'info' ); |
をコメントアウトし、その下に以下を追記。
1 2 3 | <!--begin(コピーライト記述)--> Copyright © <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?> </a>All Rights Reserved. <!--end(コピーライト記述)--> |
とっぷメニューに検索フォームを追加
管理画面で"外観"→"テーマの編集"と進み、表示されたテンプレートファイルの中から"functions.php"をクリック。
以下の関数を追加。
1 2 3 4 5 6 7 8 9 10 | /** * メニューに検索フォームを追加します。 */ function add_search_box_to_menu( $items, $args) { if( $args->theme_location == 'top'){ $items.= '<li>'. get_search_form(false) . '</li>'; } return $items; } add_filter( 'wp_nav_menu_items', 'add_search_box_to_menu', 10, 2); |
サイドバーの削除
ネット上では
1 | get_sidebar(); |
をコメントアウトして"style.css"でサイドバーの幅を変更するとか色々難しいことを書いていましたが（しかもうまくいかないらしい）、これは意外と簡単でした。
管理画面で"外観"→"ウィジェット"と進と、沢山のウィジェットが表示されます。
サイドバーやフッタ等の場所はh2タグで、各ウィジェットの名前はh3タグで記述されているので、探すのにそれほど苦労はありません。どの場所にどんなウィジェットが使われているのかがわかります。
その中の"サイドバー"の中にある全てのウィジェットを削除すると、各ページのサイドバーが表示されなくなります。
ヘッダ画像に動画の埋め込み
トップページに動画があると魅力的なサイトになるかな？と思い、動画を貼り付けてみました。（動画の作成については別途記事にします）。
管理画面で"外観"→"カスタマイズ"と進と、トップページの各部のカスタマイズができます（サイトのタイトル、キャッチコピー、色等）。"ヘッダーメディア"をクリックするとMP4形式のファイルをアップロードするか You Tube の URL を貼り付けるようになっています。今回は編集したMP4ファイルをアップロードして、最上段の"保存"をクリック。
まとめ
今回の記事は以上です。
作業項目として上げてみると少ない印象ですが、上記の作業をしながらネット上から様々情報を集めたり、いろんなプラグインを試したりしているうちに、時間だけが立ってしまうことに……。
しかし、NVDAを使ってのサイト構築は、開発の速さは他人より遅くても確実に可能だということがわかりました。不要な作業や調査を極力避け、効率よくサイト構築していけば、時間短縮は十分可能でしょう。
NVDA利用者でサイト構築する方がどのくらいいるかわかりませんが、参考になれば幸いです。