(WordPress) Twenty Fifteenのテーマの編集

TwentyFifteenはシンプルなデザインで、モバイルにもよく対応もしており、とてもいいテーマだと思います。
ここでは、Twenty Fifteenのテーマを編集した際の手順を示しておきます。

 

子テーマの作成

まず、テーマを編集する際には子テーマを作っておきます。
子テーマを作っておくと、編集した部分がアップデートにより無駄になることがありませんし、管理がとてもしやすくなります。

子テーマを作る際には、まず、style.cssとfunction.phpを作成し、以下のように記述します。

 

style.css

/*
 Theme Name:   Twenty Fifteen Child
 Template:     twentyfifteen
 Author:       ken
 Version:      1.0
*/

※ AuthorとVersionはなくてもかまいません。

 

function.php

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

 

続いて、サーバーのディレクトリ「wordpress\wp-content\theme」に子テーマのフォルダ(twentyfifteen_child等)を作成し、ここに先程作成したstyle.cssとfunction.phpをアップロードします。

最後に、WordPressの管理画面から「外観」→「テーマ」で、子テーマを有効化します。

子テーマの有効化

これで子テーマが使えるようになりました。
(以下、管理画面の「外観」→「テーマの編集」から子テーマを編集していきます。)

 

フォントの編集

子テーマを有効化した直後は、style.cssに何も記述していないので、デザインは変わっていません。

Twenty Fifteenのテーマ

まず、やはりフォントです。TwentyFifteenは海外で作られており、日本語フォントでみると、とても見にくいです。

そこで、子テーマのCSSファイルに以下を追記します。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, button, input, select, textarea {
	font-family: sans-serif !important;
}

結構な量ですが、これだけ指定しないと綺麗にフォントが反映されません。(コメント欄等はこれだけ指定しないと反映されません)
今回は単純なゴシックのsans-serifをフォントとして指定しました。

Twenty Fifteenのテーマ

フォントを変えるだけで雰囲気がガラッと変わります。

※ ブラウザのキャッシュが残っていると、フォントが反映されない場合があるので、うまくいかないときは、一度キャッシュクリアーを試すとことをおすすめします。

ですが、あまりにも見出しが大きく、サイトタイトルが小さく、全体のバランスが悪いので、さらに以下を追記します。

.site-title {
	font-size: 38px;
}

.entry-title {
	font-size: 28px ;
	border-bottom: 1px solid #e9e9e9;
}

.entry-content {
	font-size: 16px;
}

フォントを少しいじっただけですが、サイトの印象が大分変わりました。

Twenty Fifteenのテーマ
 

ヘッダーの編集

TwentyFifteenのテーマは、ヘッダー部分がサイドバー内にあり、他のテーマとくらべて特殊です。そこで、最後にヘッダー部分を通常のテーマのように上に持ってくるように編集します。

まず、TwentyFifteenのテーマフォルダ内のheader.phpを子テーマフォルダにコピーし、<body <?php body_class(); ?>>以下を、次のように編集します。

<body <?php body_class(); ?>>
 	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>
	  <div id="site-header_0">
		<header id="masthead" class="site-header" role="banner">
			<div class="site-branding">
				<?php
					twentyfifteen_the_custom_logo();

					if ( is_front_page() && is_home() ) : ?>
						<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
					<?php else : ?>
						<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
					<?php endif;

					$description = get_bloginfo( 'description', 'display' );
					if ( $description || is_customize_preview() ) : ?>
						<p class="site-description"><?php echo $description; ?></p>
					<?php endif;
				?>
				<button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
			</div><!-- .site-branding -->
		</header><!-- .site-header -->
	  </div>
   <div id="page" class="hfeed site">
	<div id="sidebar" class="sidebar">
		<?php get_sidebar(); ?>
	</div><!-- .sidebar -->

	<div id="content" class="site-content">

新たなdiv要素、site-header_0を作り、そこに、header要素を移しています。

そして、CSSで以下を追記します。

/**
 * 16.4 Desktop Small 955px
 */
@media screen and (min-width: 59.6875em) {
	body {
		background: #fff;
	}
	
	body:before {
		position: relative;
	}

	.site-header {
		margin: 0;
		padding: 0;
	}

	.secondary {
		margin-top: 9.5%;
		padding-top: 9.5%;
	}

	#site-header_0 {
		padding-top: 40px;
		text-align: center;
		border-bottom: 1px solid #e9e9e9;
		width:100%;
		height:160px;
	}
}

@media screenを使って、デスクトップ画面だけでスタイルが反映されるようにしています。

このままだとレイアウトが崩れるので、theme\twentyfifteen\jsにある、function.jsで、サイドバーのスクロールを固定するスクリプト部分を削除します。(当然、スクロール固定機能はなくなります。)

function.js

98行目  削除ここから
97行目    // Sidebar scrolling.
~
177行目  削除ここまで
178行目   } )( jQuery );

これで一応は、header部分を、上に持ってくることができます。また、デスクトップ画面以外での表示は変わりません。

Twenty Fifteenのテーマ_ヘッダー編集後_デスクトップ表示
デスクトップ表示

Twenty Fifteenのテーマ_タブレット表示
タブレット表示

Fifteenのテーマ_モバイル表示
モバイル表示

(Chromeのデベロッパーツールでの表示画面です。)

以上でテーマの編集は終了です。
フォントのスタイルだけ変更しても、サイトの印象はかなり変わるのがわかります。ですが、それ以上の変更を加えようとすると、テーマそのものを理解しなければならず、非常に大変な作業になってしまいます。
できればテーマくらいは一から作りたいと思う今日このごろです。

※ 以上の編集はWordpPess 4.7.3、テーマ Twenty Fifteen ver.1.7で行っています。
※ テーマのアップデートがあれば、function.jsファイルを書き直す必要があります。
※ ヘッダーの編集では色々不具合が出るかもしれないので、そこら辺はご了承ください。

スポンサーリンク

パーマリンクをカスタム構造にすると、コメント欄が表示されない場合がある(WordPress)

原因がわかるまで結構時間がかかったのでメモ。

こちらでわかりやすく記載されています。

パーマリンク設定でカスタム構造にする時、%post_id% か、%postname%、あるいは、年・月・日・時・分・秒のすべてを含めないと、個別記事でのコメント欄が表示されないようです。

パーマリンクで、年・月・日を入れる際には、秒まで入れないとユニーク記事とみなされないということですが、これは・・・。

おそらく、WordPressのPHPファイル内での分岐条件を編集すればなんとかなりそうですが、そこまでの知識がないので、断念。

これって、結構重大なことであります。

コメント欄が表示されていないことに気づかない人もいると思うので、こういうことは、はじめのうちに知っておくことが重要です。

スポンサーリンク

(WordPress) InstantWPでのローカルサーバーの構築

WordPressのテーマを編集する際には、やはり、ローカルサーバーで作業した方が効率が上がります。
私は、PHPファイルとCSSファイルだけ編集して、ローカルで確認できればいいと思っていたので、簡単そうだったInstantWPを使ってローカルサーバーを構築しました。
InstantWPでローカルサーバーを構築する自体はとても簡単でしたが、その後のWordPressのデータベースを移転する作業に結構つまづきいています。
今回、これからのInstantWPを使ってローカルサーバーを構築する人のために、InstantWPのインストールからWordPressの移転までの作業手順を書いてみました。
参考になれば幸いです。

 

InstantWPを使ってのローカルサーバーの構築

wondows環境において、現時点でWordPress用ローカルサーバーを手軽に構築するには、XAMPPか、InstantWPを利用することになるのではないでしょうか。(MacだとMAMPが主流みたいです)
中でも、色々なサイトで紹介されているInstantWPはとっても簡単ということが言われています。
実際私もやってみて、拍子抜けするほど簡単でした。

以下、その作業順序です。

まず、下記のサイトからファイルをダウンロードします。
InstantWP

ファイルを実行して、C:\にインストールします。

これだけです。
(大切なことはC:\にインストールすること。私は、Program Filesにインストールしましたが、ブラウザでWordPresがうまく表示されませんでした。また、ディレクトリ名に全角文字が入っていたりしてもだめなようです。)

あとは、インストールしたフォルダにあるInstantWP.exeを実行すればInstantWPが起動されます。

また、デフォルトでは、サイトが表示されるブラウザがIEになっているので、以下の手順で変更できます。

「C:\InstantWP_4.5\iwpserver」内の「pms_config.ini」をメモ帳で開いて、「BrowserPath」を表示させたいブラウザのパス名に書き換えます。

BrowserPath=”C:\Program Files\Google\Chrome\Application\chrome.exe”
(上記はデフォルトのクロームのパスです。)

 

WordPressのファイルとデータベースの移転

次に、WordPressのファイルとデータベースの移転です。

WordPressのファイルのダウンロードはFTPクライアントソフトを利用します。(FFFTPが有名です。)

ダウンロードしたWordPressのファイルを、先程インストールしたInstantWPの以下のフォルダ内のファイルと入れ替えます。
C:\InstantWP_4.5\iwpserver\htdocs\wordpress

この時、「wp-config.php」だけは入れ替えないようにします。

以上で、WordPressのファイルの移転は終了です。

 

次に、WordPressのデータベースファイル(sql)のエクスポートとインポートです。

サーバーの管理画面からphpMyAdminを起動します。
(さくらインターネットであれば、コントロールパネル → データベースの設定 → 管理ツール ログイン)
データベース名を選んでから、エクスポートタブ、テーブルが全選択されていることを確認します。
(この時「DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT を追加」にチェックを入れると、インポート時に上書きしてくれます。)
後は何もいじらずに「実行」ボタンを押すと、sqlファイルが、エクスポートされます。

当然ですが、このままインポートして、ブラウザで表示しても、元のサーバーに接続されてしまいます。
そこで、エクスポートしたsqlファイル内のドメイン名を以下のように置換します。

サイトのドメイン名(例)
xxxxxxx.com

ローカルサーバーのドメイン名(InstantWPの場合)
127.0.0.1:4001/wordpress

置換箇所は数千箇所になると思うので、サクラエディタを使うことをおすすめします。このソフトはとても軽く、置換もすぐに完了します。

次に、置換したファイルをローカルサーバーのデータベースにインポートします。ですが、おそらくファイルサイズが大きく、そのままではインポートできないので、「C:\InstantWP_4.5\iwpserver\server\config_tpl」にある「php.ini」をメモ帳で開いて、以下の項目を検索して置換します。

memory_limit = 128M
post_max_size = 64M
upload_max_filesize = 32M

容量は目安です。
そして、一度InstantWPを再起動します。

あとは、InstantWPのphpMyAdminから、ドメイン名を置換したsqlファイルをインポートします。
(データベース名を選択してからインポートすることを忘れずに)

(変更したphp.iniが上手く認識されていれば、「ファイル選択」の右側の表示が(最長: 32MiB)となっているはずです。)

最後に、InstantWPの初期画面からWordPress Adminを実行します。

これで一応は、ローカル環境で、WordPressの編集ができると思います。

ですが、ウィジットは保存されません。
また、sqlファイルのドメイン名の置換ですが、Search-Replace-DB-masterというソフトを使用したほうがいいと言われている方もいます。→こちら
私のPC環境ではSearch-Replace-DB-masterが上手く機能しなかったので、今回のような方法を取っています。

追記
※ リンクが開けない場合があります。このようなときは、パーマリンク設定を保存し直したり、基本に戻すと正常に開ける場合があります。(こちらで書かれていることが参考になります)
※ 子テーマでsingle.phpやpage.phpを作っていても、リンクが正常に開けないようです。

スポンサーリンク