WordPress あれこれ

Twenty Sixteen のフォントを Twenty Fourteen のフォント設定に変えてみた ― その他色々

コメントする
固定ページのテーマを Twenty Sixteen に変更 ―― その 2。

固定ページの一部の表示を Twenty Sixteen に変更したことは前回報告した。
その時、フォントやウィジェットの配置などをチョコチョコいじった・・・と書いたが、本当にそんな感じだったのだ。

デフォルトテーマの Twenty Fourteen の表示に近づけたくて、フォントのところを数行、ウィジェットのところを数行、余分な空白を削除したくて @media screen のところを・・・なんて調子でやっていたので、もしアップデート通知なんかが来たらちょっと慌てなきゃならない状況だった。

そういう諸々（もろもろ）を少しずつ整理してきて、ずっと @import ディレクティブ（命令）で間に合わせていたフォントの件も前回の記事を契機に整理することができたので、今回はそのあたりの概略を報告する。
以下のコードウインドウに実際に使っているコードと CSS の一部、または全部を載せるので、申し訳ないがそれをもって詳細説明に代えさせて頂きたい。

スポンサーリンク

ポイント：

  • フォントの表示を Twenty Fourteen と同じにする。
  • 右横のメインサイドバーの広告表示位置を Twenty Fourteen と同じにする。
  • その他の表示では、ブログ、固定ページ間を移動した時の違和感をできるだけ小さくする。

Twenty Sixteen のフォント、スタイルの変更点：

  • フォントファミリーを Lato, sans-serif のセットに変更。
  • ページ下部に表示されるウィジェットを、右横のメインサイドバー内の表示に変更。
  • ヘッダー上部の余白の調整（削除）。
  • テキスト表示領域（テキストエリア）下部の余白の調整（削除）。
  • その他。

フォントファミリーを Lato, sans-serif のセットに変更:

functions.php に書かれている関数 twentysixteen_fonts_url の中に Lato 用のコードを追加した。追加箇所はデフォルトのフォントファミリーの処理部分の末尾だ。

Lato は Google Fonts が提供するフォントで、このサイトでは英数文字の表示に使っている。日本語は sans-serif を指定しているので、ブラウザ標準のフォントでゴシック体の文字が表示される。これは Twenty Fourteen の設定そのものだ。

CSS も変更するが、それは子スタイルシートでやっているので後でまとめて紹介する。

function twentysixteen_fonts_url() {
	$fonts_url = '';
	$fonts     = array();
	$subsets   = 'latin,latin-ext';

	/* ************** 中略 *************** */
	
	//	新しいフォント Lato を追加する。Edited by Bonkure.	2016/02/03
	if ( 'off' !== _x( 'on', 'Lato font: on or off', 'twentysixteen' ) ) {
		$fonts[] = 'Lato:300,400,700,900,300italic,400italic,700italic';
	}

	if ( $fonts ) {
		$fonts_url = add_query_arg( array(
			'family' => urlencode( implode( '|', $fonts ) ),
			'subset' => urlencode( $subsets ),
		), 'https://fonts.googleapis.com/css' );
	}

	return $fonts_url;
}

 

ページ下部に表示されるウィジェットを、右横のメインサイドバー内の表示に変更：

オリジナルのテンプレートを利用して sidebar-content-bottom-bonkure.php と sidebar-right.php というテンプレートを作成した。
page.php のサイドバーテンプレート呼び出し対象を、この二つのテンプレートに変更してある。

<?php

//	2015/12/18 条件文を変更。
if ( !is_active_sidebar( 'sidebar-3' ) ) {
	return;
}
?>

<aside id="content-bottom-widgets" class="content-bottom-widgets" 
			role="complementary">
	
	<!--	これはオリジナルのコード。-->
	<?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
		<div class="widget-area">
			<?php dynamic_sidebar( 'sidebar-3' ); ?>
		</div><!-- .widget-area -->
	<?php endif; ?>
</aside><!-- .content-bottom-widgets -->

<!--	2015/12/18 ウィジェットを右側のサイドバーに表示するようにした。-->

<?php if ( is_active_sidebar( 'sidebar-2' )  ) : ?>
	<aside id="secondary" class="sidebar widget-area" role="complementary">
		<?php dynamic_sidebar( 'sidebar-2' ); ?>
	</aside><!-- .sidebar .widget-area -->
<?php endif; ?>

<!--	これはオリジナルのコード。-->

<?php if ( is_active_sidebar( 'sidebar-1' )  ) : ?>
	<aside id="secondary" class="sidebar widget-area" role="complementary">
		<?php dynamic_sidebar( 'sidebar-1' ); ?>
	</aside><!-- .sidebar .widget-area -->
<?php endif; ?>

 

page.php のサイドバーテンプレート呼び出し命令の変更。

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php
		// Start the loop.
		while ( have_posts() ) : the_post();

		/* *********** 中略 *********** */	

	</main><!-- .site-main -->
	<?php echo do_shortcode('

		
スポンサーリンク

				
				
				

		
スポンサーリンク

				
				
				
'); ?>
	<?php get_sidebar( 'content-bottom-bonkure' ); ?>

</div><!-- .content-area -->

<?php get_sidebar('right');?>
<?php get_footer(); ?>

 

ヘッダー上部、テキストエリア下部の余白の調整（削除）、その他：

CSS でフォントファミリー、リンクテキストの色などを指定している。
Media Queries は、ヘッダー上部とテキストエリア下部の空白部を調整（削除）するために使っている。それと、デフォルトの  ins  では AdSense の表示で影のような部分が表示されるので、ついでにそれも見えないように設定した。

この子スタイルシートへの参照を header.php の </header><!– .site-header –> と書いてある部分の直前に挿入する。参照の書式は次のとおり。

<link rel=”stylesheet” href=”<?php bloginfo(‘template_url’) ?>/css/custom-style.css”>
body,
button,
input,
select,
textarea {
	color: #2b2b2b;
	font-family: Lato, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.60;
}

.required {
	color: #007acc;
	font-family: Lato, sans-serif;
}

.entry-title {
	font-family: Lato, sans-serif;
	font-size: 28px;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 1em;
}

.entry-content h6,
.entry-summary h6,
.comment-content h6,
.textwidget h6 {
	font-style: normal;
}

a {
	color: #24890d;
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: #41a62a;
}

.site-main {
	margin-bottom: 1.5em;
}

.site-main > article {
	margin-bottom: 1.25em;
	position: relative;
}

mark,
ins {
	background: transparent;
	color: #fff;
	padding: 0.125em 0.25em;
	text-decoration: none;
}

.site-header {
    padding: 0 7.6923%;
}

@media screen and (min-width: 44.375em) {

	.site-main {
		margin-bottom: 1.25em;
	}

	.site-main > article {
		margin-bottom: 1.25em;
	}

	.site-header {
		padding:0 7.6923%;
	}

}

@media screen and (min-width: 61.5625em) {
	.site-main {
		margin-bottom: 1.25em;
	}

	.site-main > article {
		margin-bottom: 1.25em;
	}

	.site-header {
		padding: 0 4.5455%;
	}
}

@media print {
	.site-main {
		margin-bottom: 0.5em;
	}

	.post-thumbnail,
	.site-main > article {
		margin-bottom: 0.5em;
	}
}

 

本当はこのあとに、テーマ切り替えに使ったプラグイン jonradio Multiple Themes のことを少し書くつもりだったが、思っていたより記事が長くなったので次回ということにさせて頂く。

スポンサーリンク

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です