WordPressのテーマを変更


2019/01/03

2015年にWordPressへ移行した際、従来のサイトに近い体裁にするためTwenty-Elevenを選び、試行錯誤、悪戦苦闘しながら編集したものの、結果的に子テーマの適用に失敗し、いままでTwenty-Elevenをベースにしたカスタムテーマを使用してきた。

それから3年、当サイトはPCソフトのインストールと使い方がメインなので、圧倒的にPCからのアクセスが多いものの、多分にもれず近年はスマホやタブレットの利用が増加。折しも年末にはGoogleのSearch Consoleで「モバイルユーザビリティの問題」が検出されてしまった。

一応、Twenty-Elevenはマルチスクリーンに対応しているのだが、ページの幅をpxで指定しているため、「コンテンツの幅が画面の幅を超えています」という結果になってしまうらしい。
そこで本サイトからエクスポートしたコンテンツを、別のテスト用サーバへインポートして、いくつかのテーマを試した結果、現在のデザインを踏襲しつつ、モバイル用のメニューも表示できるWordPress謹製の「Twenty-Sixteen」を利用することにした。



子テーマの作成

「WordPress Twenty-Sixteen」で検索すればカスタム方法を掲載したページが複数ヒットするので、今回もそれらのページを参考にしつつ調整。
WordPressはバージョン4.9あたりから安全性が強化され、管理画面の「外観」→「テーマの編集」からCSSを直接編集して更新をかけるとエラーを返すようになったので、今回は「カスタマイズ」の「追加CSS」で編集が行えるよう、WordPress公式が推奨している通り「子テーマ」を作成することにした。

Twenty-Elevenの時は子テーマの内容が何故か部分的にしか反映されなかったが、今回は拍子抜けするほどスムーズに子テーマを作成できた。

使用するのはFTPクライアントソフトとテキストエディタ。
今回使用したのはFTPクライアントソフト「FileZilla」とテキストエディタ「Brackets」。

FileZillaを使用してWordPressがインストールされているサーバにアクセスし、「wp-content」→「theme」を開き、インストールした「twenty-sixteen」のフォルダ名を確認。

デスクトップなど任意の場所に「twenty-sixteen」のフォルダ名に「-child」を追加した「twentysixteen-child」フォルダを作成。

/*
Theme Name: twentysixteen-child
Theme URI: http://example.com/twenty-sixteen-child/
Description: Twenty sixteen child Theme
Author: Owner
Author URI: http://example.com
Template: twentysixteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-sixteen-child
*/

Bracketsを起動して「新規作成」で上記のコードを丸ごと貼り付ける。
重要なのは赤字部分の「Theme Name」と「Template」。
「Theme Name」は先に作成したフォルダ名、「Template」はサーバの「theme」フォルダで確認した「twenty-sixteen」のフォルダ名。
大文字小文字も含めて一致しているか確認。

Bracketsにコードを貼り付けたら「名前を付けて保存」で「style.css」というファイル名で、作成した「twentysixteen-child」フォルダに保存。

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

再びBracketsで新規作成して上記のコードを丸ごと貼り付け、「functions.php」というファイル名で「twentysixteen-child」フォルダに保存。

FileZillaを使用して「twentysixteen-child」フォルダを「wp-content」内の「theme」フォルダにアップロード。

WordPressの管理画面で「外観」→「テーマ」にアップロードした「twentysixteen-child」が表示されているはずなので「有効化」する。

これで子テーマの作成が完了。

デザインの修正

Twenty Sixteenはブログに適したデザインで、投稿ページが独特なレイアウトになっている。

写真や動画などは左ペインの幅いっぱいに表示され、テキストは横幅の75%程度で右よりの配置になっており、左の余白には作成日や作者などのメタ情報が配置される。

固定ページはテキストが横幅いっぱいになり、PCのモニタで閲覧する際に横に伸びすぎる感が否めない。

その他の点としては、フォントが明朝体になっている、ウィジェットの仕切り線が気になる、ページ全体を囲っている黒枠が気になるといった感じ。

ページの黒枠修正

最も簡単なのがページの黒枠修正で、背景色を変更するだけ。

管理画面の「外観」→「カスタマイズ」で「色」を選択して、背景色を黒から任意のカラーに変更。
「枠」を外す場合は白を指定する。

CSSの修正

一般的にデザイン等の修正は、子テーマに作成した「style.css」に変更するコードを書き込んでいくのだが、WordPressには「追加CSS」という機能があり、変更箇所をすぐに確認できるだけでなく、その都度FTPクライアントでファイルをアップする必要もない。
子テーマを選択している状態であれば、親テーマのTwenty Sixteenを更新しても追加CSSが消えることもなく、直接CSSファイルを編集するわけではないため、更新したら管理画面にアクセスできないといったリスクもない。

背景色と同様、追加CSSも管理画面の「外観」→「カスタマイズ」から選択。
修正が必要な部分を追加していくだけ。

以下、今回の修正部分

/* 本文のフォント*/
body,
button,
input,
select,
textarea {
color: #1a1a1a;
font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"MS Pゴシック",sans-serif;
}
/* 見出し*/

.entry-content h1,
.entry-summary h1,
.comment-content h1,
.textwidget h1 {
font-size: 18px;
font-size: 1.125em;
color: #FE2EF7; 
font-weight: normal;
line-height: 1em;
border-left: 10px solid #0B4C5F;
padding: 5px 10px;
margin-top: 1.250em;
margin-bottom: 3.125em;
}

.entry-content h2,
.entry-summary h2,
.comment-content h2,
.textwidget h2 {
font-size: 1.25em;
font-weight: bold;
color: #777878;
padding: 5px 5px;
margin-top: 0.313em;
margin-bottom: 0.313em;
margin-left:1.250em
}

.entry-content h3,
.entry-summary h3,
.comment-content h3,
.textwidget h3 {
color: #000;
font-size: 1.125em;
font-weight: bold;
background-color: #EFFBF5;
border-left: 10px solid #01DF3A;
padding: 5px 10px;
margin-top: 3.125em;
margin-bottom: 1.250em;
}

以下、省略
/*ウィジェットの体裁修正*/
.widget {
border-style: none;
font-size: 0.85em; 
line-height: 1.7em;
margin-bottom: 1em;
}
/*次の投稿 消去*/
.post-navigation {
display: none;
}
/*リンクの下線消去*/
a:link {
box-shadow: none;
}
a:visited {
box-shadow: none;
}
a:hover {
box-shadow: none;
}
/*固定ページの本文 幅変更*/

.site-main > article {
float: right;
width: 92%;
}
/* 投稿ページの本文 幅変更 */

body:not(.search-results) article:not(.type-page) .entry-content {
float: right;
width: 92%;
}
/* メニューの体裁変更 */

.main-navigation a {
background: #252A35; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#252A35, #16419E);
background: -o-linear-gradient(#252A35, #16419E);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252A35), to(#16419E)); /* older webkit syntax */
background: -webkit-linear-gradient(#f0f1f1, #f6f6f6);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
}
/* メニュー マウスオーバー時 */

.main-navigation li:hover > a,
.main-navigation li.focus > a {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color:#385e82;
font-weight: bold;
}

メタ情報の削除

投稿ページに表示される「作成日」「作者」などのメタ情報は不要なので移動ではなく削除した。
子テーマのフォルダ内に「template-parts」フォルダを作成し、親テーマの「twentysixteen」フォルダ以内の「template-parts」フォルダから「content-single.php」ファイルをダウンロードし、下記の赤枠部分を削除する。

<?php
/**
* The template part for displaying single posts
*
* @package WordPress
* @subpackage Twenty_Sixteen
* @since Twenty Sixteen 1.0
*/
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->

<?php twentysixteen_excerpt(); ?>

<?php twentysixteen_post_thumbnail(); ?>

<div class="entry-content">
<?php
the_content();

wp_link_pages( array(
'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
'pagelink' => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
'separator' => '<span class="screen-reader-text">, </span>',
) );

if ( '' !== get_the_author_meta( 'description' ) ) {
get_template_part( 'template-parts/biography' );
}
?>
</div><!-- .entry-content -->

<footer class="entry-footer">
<?php twentysixteen_entry_meta(); ?>
<?php
edit_post_link(
sprintf(
/* translators: %s: Name of current post */
__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
get_the_title()
),
'<span class="edit-link">',
'</span>'
);
?>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->

該当部分を削除してファイルを上書き保存し、子テーマのフォルダ内に作成した「template-parts」フォルダにアップロードする。

過去のデザイン

テーマを変更後、外付けハードディスクのデータを整理していたら、2012年当時のサイトのバックアップがでてきたのでデザイン更新の記念に。

今となってはノスタルジックなデザインだが、当時はKompoZerを使用して、分からないなりにHTMLと格闘していた。

WordPressに移行する前のデザイン。
初期の頃と比べると我ながら成長していると思う。

そしてWordPressに移行後、Twenty Elevenをカスタマイズした直近のデザイン。

今回のデザインで最後まで悩んだのがサイトのアイコンにもなっているテントウ虫の写真を使ったタイトル画像の設置だが、最終的にサイトのバランスを考慮して断念した。





Webコンテンツの制作

WordPressのテーマを変更

2019/01/03 2015年にWordPressへ移行した際、従来のサイトに近い体裁にするためTwenty-Elev … “WordPressのテーマを変更” の続きを読む

さくらインターネットからXServerへお引越し

2017/09/24 9月11日から「Service Temporarily Unavailable」が表示される503 … “さくらインターネットからXServerへお引越し” の続きを読む

Amazon Publisher Studioが機能しなくなった

2017/07/27 当サイトはWordPressを使用しており、自作パソコンやクロスバイクの改造など1部のページには、 … “Amazon Publisher Studioが機能しなくなった” の続きを読む

xdomainでWordPressを始めよう!

WordPressはオープンソースのブログプラットフォーム。 世界的に人気があるのだが、知っているのはWEB関連の情報に … “xdomainでWordPressを始めよう!” の続きを読む

WordPressをカスタマイズする前に

サイトのデザインをカスタマイズするため、ネットの情報を参考に見よう見まねでCSSやphpを編集してみたものの、手順や基本 … “WordPressをカスタマイズする前に” の続きを読む