WordPressテーマSimplicityの私的カスタマイズ記録

WordPressテーマSimplicityの私的カスタマイズ記録

久々に、WordPressのテーマを変更しました。 以前はTwenty Fifteenをカスタマイズして使っていたのですが、ブログの方向性や集客力を考え、テーマを改めようと決心したのです。 最初はTwenty Seventeenをカスタマイズしようと思ったのですが、SNSとの親和性に重点を置いた場合に、Simplicityという結論が出ました。 以下は子テーマでのカスタマイズを前提としております。

スポンサーリンク

テーマ移行準備

他テーマからSimplicityに移行した際に、問題が起こることもあります。 まずは、そこを解決します。

「Regenerate Thumbnail」でアイキャッチ用サムネイルを再生成

Simplicityはアイキャッチ(サムネイル)を正方形で表示します。 「Regenerate Thumbnail」でアイキャッチ用サムネイルを再生成 今までのテーマで長方形でのアイキャッチを使用していた場合に、Simplicity内で縦横比がおかしく表示されることがあります。 このRegenerate Thumbnailというプラグインを使用すれば、所有画像から再度サムネイルを生成できます。 これで縦横比がおかしくなったアイキャッチ問題を解決できます。

「WordPress インポートツール」でブログを統合する

テーマ変更と同時にWordPressブログの統合をする場合に、WordPress インポートツールがとても役にたちました。 他のWordPressから記事を簡単に移植できます。

管理画面でのカスタマイズ

ダッシュボードの「外観 >> カスタマイズ」から設定する内容です。 ここだけでも、かなり多くのことができます。

基本情報の入力など

基本情報の入力など WordPressでの「設定 >> 一般」の内容とかぶりますが、サイト名やキャッチフレーズを入力します。 その他、サイトの配色やヘッダー画像、表示レイアウトなどもここから設定できます。 カスタマイズできる項目が多すぎて、正直ビビります。

ヘッダー画像の設定

ヘッダーとなる画像を設定するのだけど、少々コツがあります。 ここでは、

  • 「ヘッダー外側背景画像の画像」を設定
  • 「グローバルナビの画面幅いっぱいにする」にチェック

という前提です。 「ヘッダーの高さ」を指定しつつ画像を選択するのですが、「ヘッダーの高さ」のサイズよりも高さが大きい画像を準備してください。 ブラウザの横幅に合わせてヘッダー画像が自動的に伸縮するのですが、高さの小さな画像だと… ヘッダー画像の下に不自然な余白 こんな具合に、ヘッダー画像の下に不自然な余白ができてしまいます。 これ、意外にハマります。 余白が気になる場合には、ヘッダー画像の高さを大きくしましょう。 ちなみに、私は2000 x 1000 ピクセルの画像を使用して、ヘッダーの高さを400としています。

スマホでのメニュー表示

デフォルトでのスマホのサイトメニュー、慣れていない人には分かりづらいですよね。 ハンバーガーメニュー スッキリと収まって好きには好きなんだけど、気付いてもらえないのならば修正した方がいいに決まってる。

スライドインメニュー こんな感じにしていきます。 とても簡単でした! 外観 > カスタマイズ > レイアウト(モバイル) にて、モバイルメニュー項目にて、「スライドインライト(ボタン上)」を選択しました。 これだけでOKです! ※ 「完全レスポンシブ機能」がオフでないと、このメニューは表示されないようです。 参考:Simplicityでスライドインモバイルメニューを表示するには完全レスポンシブル表示をオフに

SNS関連の設定

SNS関連の設定 Twetter、Facebook、Google+、はてブ、Pocket、LINEなどのアカウントを入力しておけば、これらSNSとの連携も簡単に設定ができます。 いいねボタンなどもデフォルトで設置済なので、本当に助かります。 SNS離れが進んでいると言われていますが、まだまだ連携は必要かと思います。 絶対に設定すべきですね。

グローバルナビの装飾

デフォルト状態でもシンプルで素晴らしいのですが、ちょいと装飾することにしました。 この装飾は、下記参考ページのカスタマイズとほぼ同様です。 まずは、ダッシュボードの外観 > カスタマイズ 内の

  • スキンを「オレンジメニュー(サブなし)」に設定
  • 色の「グローバルナビ色」を #ffffff に設定
  • 色の「グローバルナビリンク色」を #a4a7ab に設定
  • 色の「グローバルリンクホバー色」を #ffffff に設定

そして、CSSを、

/*---------------------------------
グローバルナビ
--------------------------------*/
#navi {
	border-top:1px solid #F3F3F3;
	border-bottom:1px solid #F3F3F3;
}

/*ホバー時の線と文字の色を変更*/
#navi ul li a:hover{
	color: #f94848 !important;
	background-color:white;
}
#navi ul li a:before{
	background:#f94848 !important;
}
#navi ul,#navi{
	background-color:white;
}

としました。 グローバルナビの装飾 こんな具合になります。

トップページのカスタマイズ

トップページのみワンカラムにし企業サイト風に

トップページのみワンカラムにし企業サイト風に ちょっと、頑張ってみた! これ、Simplicityです! トップページをワンカラムにして、企業サイトっぽくしたかったんです。 そして、なんとかできました。 閃いた後は、意外とすんなりいきました。 編集するファイルは、

  • my-front.php(新規作成)
  • header-front.php(新規作成)
  • before-main.php
  • footer-front.php(新規作成)
  • style.css
  • mobile.css

です。詳細は下記です。

my-front.php

固定ページのテンプレートファイルとします。

<?php
/*
Template Name: my-front
*/
?>
<?php get_header(front); ?>

<?php get_footer(front); ?>

get_headerとか使わないで一つのファイルで済ませようよ!という声も聞こえてきそうですが、なんとなくです、なんとなく。 そして、呼び出すファイルもオリジナルファイルですので、悪しからず。

header-front.php

オリジナルのヘッダーファイルの不要部分を消すのですが、説明がやっかいだし、コードプリーズ!!な人も多いと思うので、全部載せます。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<?php
//////////////////////////////////
//ウェブマスターツール用のID表示
//////////////////////////////////
if ( get_webmaster_tool_id() ): ?>
<meta name="google-site-verification" content="<?php echo get_webmaster_tool_id() ?>" />
<?php endif;//ウェブマスターツールID終了 ?>
<meta charset="<?php bloginfo('charset'); ?>">
<?php //ビューポート
//モバイルもしくはページキャシュモードの時
if ( is_mobile() || is_responsive_enable() || is_page_cache_enable() ): ?>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
<?php else: ?>
	<meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
<?php endif ?>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php //AMPの案内タグを出力
if ( has_amp_page() ): ?>
<link rel="amphtml" href="<?php echo get_amp_permalink(); ?>">
<?php endif ?>
<?php //Wordpressのバージョンが4.1以下のとき
if ( get_wordpress_version() < 4.1 ):
	get_template_part('header-title-tag');
endif; ?>
<?php get_template_part('header-seo');//SEOの設定テンプレート?>
<?php //wp_enqueue_script('jquery');//jQueryの読み込み?>
<?php the_apple_touch_icon_tag();//Appleタッチアイコンの呼び出し ?>
<?php if ( is_facebook_ogp_enable() ) //Facebook OGPタグ挿入がオンのとき
	get_template_part('header-ogp');//Facebook OGP用のタグテンプレート?>
<?php if ( is_twitter_cards_enable() ) //Twitterカードタグ挿入がオンのとき
	get_template_part('header-twitter-card');//Twitterカード用のタグテンプレート?>
<?php get_template_part('header-insert');//ユーザーが子テーマからヘッダーに何か記述したい時に利用するテンプレート?>
<?php get_template_part('head-custom-field');//カスタムフィールドの挿入(カスタムフィールド名:head_custom)?>
<?php wp_head(); ?>
</head>
	<body <?php body_class(); ?> itemscope itemtype="http://schema.org/WebPage">
		<div id="container">

			<!-- 本体部分 -->
			<div id="body">
				<div id="body-in">

					<?php get_template_part('before-main'); //メインカラムの手前に挿入するテンプレート(3カラム作成カスタマイズ時などに) ?>
					
					<?php if (is_navi_visible())://ナビゲーションが表示のとき
						get_template_part('navi');//グローバルナビのためのテンプレート
					endif; ?>

時間がある方は、オリジナルのファイルとどこが違うのかを探してみてください。 グローバルナビの場所が変わっていることには、注意をしてください。

my-front.php

<?php
//メインカラムの手前に何かを挿入したいときは、このテンプレートを編集
//例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。

	if (is_front_page()){
		
		?>

		<div class="front-wrapper">
			<h1>WEB工房しずおか</h1>
			<div class="front-inside">
			
					時代は恐るべき速度で進化しています。<br />
					WEBもまた、同様に進化をしております<br /><br />
					
					WEB制作において大事なことは、その時代の波に乗ることだと考えます。<br />
					WEB工房しずおかでは、時代に合ったWEBページの提案をいたします。<br />
					<img src="http://web-shizuoka.net/wp-content/uploads/2017/04/20170414.png" class="aligncenter size-full"/><br />
					現在では、インターネットをするデバイスについて、スマホ割合が完全にPCを抜いています。<br />
					モバイルフレンドリーなくして、WEB制作は考えられません。<br />
					WEB工房しずおかでは、スマホ表示に特化しつつもPC表示でのデザインにこだわってWEBサイト制作いたします。
					
			</div>
		</div>
		
		<?php

	}

?>

せっかくなんで、先ほどの画像と同じ内容で載せますね(笑)

footer-front.php

こちらも新規作成ファイルです。

				</div><!-- /#body-in -->
			</div><!-- /#body -->

			<!-- footer -->
			<footer itemscope itemtype="http://schema.org/WPFooter">
				<div id="footer" class="main-footer">
					<div id="footer-in">

						<?php //フッターにウィジェットが一つも入っていない時とモバイルの時は表示しない
						if ( (is_active_sidebar('footer-left') ||
							is_active_sidebar('footer-center') ||
							is_active_sidebar('footer-right') ) &&
							!is_mobile() ): ?>
						<div id="footer-widget">
							 <div class="footer-left">
							 <?php if ( dynamic_sidebar('footer-left') ) : else : ?>
							 <?php endif; ?>
							 </div>
							 <div class="footer-center">
							 <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-center') ) : else : ?>
							 <?php endif; ?>
							 </div>
							 <div class="footer-right">
							 <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-right') ) : else : ?>
							 <?php endif; ?>
							 </div>
						</div>
					<?php endif; ?>

					<div class="clear"></div>
						<div id="copyright" class="wrapper">
							<div class="credit">
									<?php echo get_site_license(); //サイトのライセンス表記の取得 ?>
							</div>

							<?php if ( is_local_test() && is_responsive_test_visible() ): //ローカルかつ設定で表示になっている場合のみ?>
								<br /><a href="<?php echo get_template_directory_uri().'/responsive-test/?'.get_this_page_url(); ?>" target="_blank" rel="nofollow">レスポンシブテスト</a>
							<?php endif; ?>
						</div>
				</div><!-- /#footer-in -->
				</div><!-- /#footer -->
			</footer>
			<?php get_template_part('button-go-to-top'); //トップへ戻るボタンテンプレート?>
			<?php get_template_part('buttons-footer-mobile'); //フッターモバイルボタンのテンプレート?>
		</div><!-- /#container -->
		<?php wp_footer(); ?>
		<?php get_template_part('footer-custom-field');//カスタムフィールドの挿入(カスタムフィールド名:footer_custom)?>
		<?php get_template_part('footer-slicknav'); //SlickNav用のテンプレート(ツリー式モバイル用メニュー)?>
		<?php get_template_part('footer-javascript'); //フッターで呼び出すJavaScript用のテンプレート?>
		<?php get_template_part('analytics'); //アクセス解析用テンプレート?>
		<?php get_template_part('footer-insert'); //</body>手前のフッターにタグを挿入したいとき用のテンプレート?>
	</body>
</html>

style.css

本記事のグローバルナビの装飾のカスタマイズを施しています。 グローバルナビの装飾で紹介したコードは下記には含みませんので、注意してください。 画像ファイルの指定は、書き直してくださいね(笑)

/*---------------------------------
トップページ表示
--------------------------------*/
body.home {
	/* 画像ファイルの指定 */
	background-image: url(http://web-shizuoka.net/wp-content/uploads/2016/12/header-20161222.jpg);
	
	/* 画像を常に天地左右の中央に配置 */
	background-position: center center;
	
	/* 画像をタイル状に繰り返し表示しない */
	background-repeat: no-repeat;
	
	/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-attachment: fixed;
	
	/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-size: cover;
	
	/* 背景画像が読み込まれる前に表示される背景のカラー */
	background-color: #464646;
}

.front-wrapper {
	background: rgba(0, 0, 0, 0.50);
}
.front-wrapper h1 {
	padding: 10px;
	color: #fff;
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 15px;
}
.front-inside {
	width: 60%;
	min-width: 300px;
	margin: auto;
	color: #fff;
}

.home #footer {
	background: none;
}

/*---------------------------------
グローバルナビ
--------------------------------*/
.home #navi {
	border-top:1px solid #0d0d0d;
	border-bottom:1px solid #0d0d0d;
}

/*ホバー時の線と文字の色を変更*/
.home #navi ul li a:hover{
	color: #f94848 !important;
	background: rgba(0, 0, 0, 0.50);
}
.home #navi ul li a:before{
	background:#f94848 !important;
}
.home #navi ul,
.home #navi{
	background: rgba(0, 0, 0, 0.50);
}

モバイル対応・mobile.css

このままだと、スマホ表示がおかしいので対応します。 カスタマイザーのレイアウト(モバイル)項目を開き、モバイルメニュータイプスライドインライト(ボタン上)を選択してください。 その後mobile.cssに下記コードを加えます。

/*---------------------------------
トップページ
--------------------------------*/
.front-wrapper {
	margin-top: 30px;
}

.front-inside {
	width: 96%;
}

.home #footer {
	background: none;
}

/*---------------------------------
グローバルナビ
--------------------------------*/
.home #navi {
	border-top:1px solid #F3F3F3;
	border-bottom:1px solid #F3F3F3;
}

.home #navi ul li a:hover{
	color: #f94848 !important;
	background-color:white;
}
.home #navi ul li a:before{
	background:#f94848 !important;
}
.home #navi ul,
.home #navi{
	background-color:white;
}

仕上げ

最後に、任意のタイトルで固定ページを作成し、固定ページのテンプレートを先ほど作成した「my-front」にしてください。 おそらく、記事タイトルは「ホーム」でよろしいかと。 本文は空でOKです。 その後、WordPressの「表示設定」で、フロントページの表示項目のフロントページを今回作成した固定ページに設定してください。 これで、完成!!

トップページのみに固定ページ内容を表示をする

フロントページの設定は最新の投稿としているのですが、トップページのみにサイト紹介的な内容を表示させたいなと思いました。 トップページのみに固定ページ内容を表示をするこれはトップページなのですが「この部分」という場所には、特定の固定ページの内容が表示されています。 トップページにのみ表示、という部分で少しハマったので、同じ悩みがある方のお役に立てれば幸いです。 編集ファイルするは「home.php」。 ファイルの中身は数行だけです。

<?php get_header(); ?>

の下に、

<?php if ( is_home() && ! is_paged() ) : ?>
<?php
$page_id = xxx;    //xxxに 固定ページIDを入力
$content = get_page($page_id);
echo "<h2>" . $content->post_title . "</h2>";
echo $content->post_content;
?>
<?php endif; ?>

こうすることで、フロントページを「最新の投稿」に設定をし、記事一覧を表示しつつ、トップページにのみ必要な情報を表示できます。 is_paged()の表記の有無で、挙動がだいぶ変わります。 ここでハマりました。 最近では、インターネットをする端末において、スマホユーザーが圧倒的に多く全体の7割を超えているらしいです。 タブレットPCを含めれば8割以上になるのでしょうか。 スマホにて見やすいページが大事ということになりますね。 どんな改変においても、スマホファーストでいこうと思います。

特定のカテゴリーページをカスタマイズ

あるカテゴリーのみ、カテゴリーページの表示を変えるようにしてみました。 カテゴリーのスラッグを「test」だと仮定して紹介します。 親テーマから

  • category.php
  • list.php

をコピーし、子テーマフォルダに配置。それぞれファイル名を

  • category-test.php
  • list-test.php

に変更する。

category-test.phpの編集

<?php get_header(); ?>

の下に、

<?php if ( ! is_paged() ) : ?>
<?php
$page_id = xxx;    //xxxに 固定ページIDを入力
$content = get_page($page_id);
echo "<h2>" . $content->post_title . "</h2>";
echo $content->post_content;
?>
<?php endif; ?>

を加えて、特定の固定ページ内容を表示するようにします。 カテゴリーの説明などをこの部分に表示させます。 続いて、

<?php get_template_part('list') ?>

を、

<?php get_template_part('list-test') ?>

に変更します。

list-test.phpの編集

特定のカテゴリーページをカスタマイズ 「アーカイブのタイトル」という部分のh1タグ表示部分を編集します。

<?php
////////////////////////////
//アーカイブのタイトル
////////////////////////////
if (!is_home() && !is_search()) { ?>
  <h1 id="archive-title">明日屋のWordpressカスタマイズ</h1>
<?php } ?>

こうすることで、デフォルト状態で「XXXX」一覧と表示されていた部分を変えることができます。

wp_headを編集しページタイトル自動生成をやめる

テーマというよりかはWordPressの仕様により、現時点での最新バージョンのWordPressでは、header.phpファイル内のwp_head()という関数により、titleタグが自動生成されてしまいます。 よって、上述した特定のカテゴリーページをカスタマイズなどで、ブラウザのタブ部分に表示されるページタイトルを変更したくても、なかなかうまくいきません。 titleタグの自動生成をさせずに、自分でページタイトルを出力する方法を紹介します。

functions.phpの編集

remove_action('wp_head', '_wp_render_title_tag', 1);

これを、functions.php内の末尾に足します。

header.phpの編集

<?php wp_head(); ?>

のすぐ手前に、

<title>
	<?php
		global $page, $paged;
		
		if(is_front_page()):
			bloginfo('name');
			
		elseif(is_single()):
			wp_title('');
			
		elseif(is_page()):
			wp_title('');
			
		elseif(is_archive()):
			wp_title('|',true,'right');
			bloginfo('name');
			
		elseif(is_search()):
			wp_title('-',true,'right');
			
		elseif(is_404()):
			echo'404 - ';
			bloginfo('name');
			
		endif;
		
		if($paged >= 2 || $page >= 2):
			echo'-'.sprintf('%sページ',
			max($paged,$page));
		endif;
	?>
</title>

を記述すれば、基本的なページタイトルを表示することが可能です。 あとは、この部分を適宜編集すれば、OKです。 私の場合は、前出の特定のカテゴリーページをカスタマイズに加えて、header.phpを親テーマからコピーし、

  • header-test.php

にファイル名を改め、 category-test.php内の

<?php get_header(); ?>

<?php get_header(test); ?>

とし、 header-test.phpのタイトルタグ部分を

<title>
	<?php
		global $page, $paged;
		
		echo'希望のページタイトル';
			
		if($paged >= 2 || $page >= 2):
			echo' '.sprintf('page %s',
			max($paged,$page));
		endif;
	?>
</title>

というようにしました。 こうすることで、カテゴリーページを、まるで固定ページかのように編集することができます。 ※タイトル変更がうまくいかない場合は、All in One SEOなどのタイトル生成をしそうなプラグインをストップしてみてください。

吹き出しの会話風表現

Simplicityはデフォルトで吹き出しでの表記ができますが、それをもうちょっとリッチにした感じにしました。 別記事になりますので、そちらをご覧ください。 ※ Simplicity以外のテーマでも使いまわせます。

こんな感じのものだーーーー!

これだーーーー!

WordPressでLINE会話風の吹き出し AMP対応 プラグイン不使用

コメント