カスタマイズ – 暮らしのハンドノート

2017年5月21日2017年5月27日

Contact Form 7 に「ファィル添付」＆「CAPTCHA」設定

お問い合わせ内容にファイルが添付出来ないとご指摘がありましたので、ファイル添付出来るようにカスタマイズしました。

以前、「お問い合わせホームプラグインContact Form 7 のインストール方法から設置方法まで」で初期設定の方法は掲載しましたので、今回はカスタマイズ方法のみにさせて頂きます。

お問い合わせホームプラグインContact Form 7 のインストール方法から設置方法まで

1.フォームにファイルを添付できるようにする

1-1.ダッシュボードからコンタクトフォームにアクセスする

現在のフォームを編集する場合は、
ダッシュボードの「お問い合わせ」→「コンタクトホーム」→「編集したいタイトル」の編集をクリックするとフォーム画面になります。

※新規で作りたい場合は、
ダッシュボードの「お問い合わせ」→「新規追加」をクリックしてください。

1-2.ファイルをクリックします。

すると、次のようにフォームタグ生成画面になります。

1-3.フォームタグ生成画面

1-3-1.ファイルサイズの上限(バイト)を設定する。

ファイルサイズの上限(バイト):では、ファイルの上限を設定できます。

デフォルトでは、許容ファイルサイズは1 MB（1048576バイト）です。

許容される最大ファイルサイズを制限します。オプションで、kb（キロバイト）またはmb（メガバイト）の接尾辞を使用できます。接尾辞を省略すると、数値はバイトを意味します。

limit:1048576
limit:1024kb
limit:1mb

1-3-2.受け入れ可能なファイル形式を設定できます。

デフォルトのファイルタイプ（拡張子）は、jpg、jpeg、png、gif、pdf、doc、docx、ppt、pptx、odt、avi、ogg、m4a、mov、mp3、mp4、mpg、wav、wmvです。

複数指定する場合は、拡張子を,（カンマ）で区切ってください。

するとフォームタグ生成:ファイルの一番下にタグができます。

1-3-3.タグをフォームに追加する。

[file file-537 limit:2mb filetypes:jpg|png|pdf]をフォームに追加します。

訪問者がわかりやすいように

※<label>添付可能なファイル形式:jpg png pdf
ファイル容量:最大2mb </label>と表示するようにフォームに追加しました。

入力が終わりましたら、保存してください。

1-3-4.メールのタグをファイル添付にコピペする

最後に保存をしてください。

既存のフォームを編集された方はこれで終わりですが、新規でファイルを作成された方は、投稿、固定ページなどの新規追加でショートコードをテキストエディタにペーストしてください。

2.「CAPTCHA」でスパムから守る

スパム目的の自動投稿の防止としてCAPTCHAを利用することができます。

2-1.Really Simple CAPTCHAをインストールする

Contact Form 7は、Really Simple CAPTCHAを公式に認可されたCAPTCHAモジュールとして利用しているため、フォームにCAPTCHAを使用する前にReally Simple CAPTCHAプラグインをインストールする必要があります。

Word Prsessのダッシュボード「プラグイン」→「新規追加」→キーワードに「Really Simple CAPTCHA」と入力し「今すぐインストール」をクリックします。

2-2.reCAPTCHAのAPIの登録

まず、Googleアカウントにログインした状態で、recaptchaにアクセスして下さい。

すると、reCAPTCHAのAPIを使用する登録画面が表示されます。

画面になります。

2-2-1.Labelに詳細を設定する

Labelにサイト名と貴方が使用している表題を入力します。

2-2-2.Choose the type of reCAPTCHAを設定する

簡単に表示させたいので、reCAPTCHA V2のチェックボックスにチェックします。

2-2-2-1.reCAPTCTC V2とInvisible reCAPTCHAの内容

reCAPTCHA v2

reCAPTCHA v2は、ユーザーがロボットではないことを示すチェックボックスをクリックする必要があります。これにより、ユーザーはすぐに（CAPTCHAなしで）ユーザーに渡されるか、ユーザーが人であるかどうかを確認するようにユーザーに挑戦します。これは、統合するための最も簡単なオプションで、チェックボックスを表示するには2行のHTMLしか必要ありません。

Invisible reCAPTCHA

Invisible reCAPTCHAは、見えないRECAPTCHAでユーザーがチェックボックスをクリックする必要はなく、ユーザーがサイトの既存のボタンをクリックしたときに直接呼び出されるか、JavaScript API呼び出しによって呼び出すことができます。reCAPTCHA検証が完了すると、統合にJavaScriptコールバックが必要です。デフォルトでは、最も疑わしいトラフィックだけがキャプチャを解決するように促されます。この動作を変更するには、詳細設定でサイトのセキュリティ設定を編集します。

2-2-3.ドメインを設定する

Domeinsには、WordPressで使用しているブログのドメインを指定します。

ドメインはWord Pressの「設定」→「一般」からも確認できます。

例:WordPress アドレス (URL)が「https://xn--68j3b2d8le4af20azcz743e.com」

であれば、ドメインは「xn--68j3b2d8le4af20azcz743e.com」になります。

2-2-4.利用規約に同意する

Accept the reCAPTCHA Terms of Service(サービスのreCAPTCHAの利用規約に同意します。)

2-2-5.登録します。

「Register」をクリックします。

すると次の画面が表示されます。

表示されたサイトキーとシークレットキーをメモしておいて下さい。

2-3.reCAPTCHAをWord Prsess に設定する

これからreCaPTCHAで所得したSite keyとSecret keyをWord Pressに登録します。

2-3-1.インテグレーションにキーを設定する。

WordPressの管理画面に戻り、「お問い合わせ」メニューの中にある「インテグレーション」メニューをクリックして下さい。

次に、キーを設定するをクリックします。

メモしておいたサイトキーとシークレットキーを入力し「保存」をクリックして下さい。

2-3-2.コンタクトホームを編集する。

コンタクトフォームの編集画面を開き、「reCAPTCHA」ボタンをクリックして下さい。

CAPTCHAの設定画面が表示されます。テーマやサイズを選択して下さい。

フォームに[recaptcha]を記述して保存して下さい。

これで終わりです。

2017年4月27日2018年5月25日

Twenty Seventeenタイトル見出しの装飾方法

前回に引き続き子テーマを使ったTwenty Seventeenのカスタマイズ方法を記載します。

カテゴリーから選択した時に一覧で表示されるtitleと本文との境目がわかりずらかったので装飾してみました。

投稿記事のtitleや固定ページの記事titleをtemplate-partsを使ってカスタマイズします。

1.投稿記事タイトルを子テーマを使ってカスタマイズします

WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」→「twentyseventeen」→「template-parts」→「page」の順にタブルクリックします。すると、content-front-page.phpのファイルの中に下記のように記途されていると思います。

親テーマの34行目の

<?php the_title( ‘<h2 class=”entry-title”>’, ‘</h2>’ ); ?>

の部分にcssで装飾できるように<span>タグを使って囲みます。

↓Before

<?php
/**
 * Displays content for front page
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >

	<?php if ( has_post_thumbnail() ) :
		$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

		$post_thumbnail_id = get_post_thumbnail_id( $post->ID );

		$thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

		// Calculate aspect ratio: h / w * 100%.
		$ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100;
		?>

		<div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
			<div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>
		</div><!-- .panel-image -->

	<?php endif; ?>

	<div class="panel-content">
		<div class="wrap">
			<header class="entry-header">
				<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

				<?php twentyseventeen_edit_link( get_the_ID() ); ?>

			</header><!-- .entry-header -->

			<div class="entry-content">
				<?php
					/* translators: %s: Name of current post */
					the_content( sprintf(
						__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
						get_the_title()
					) );
				?>
			</div><!-- .entry-content -->

		</div><!-- .wrap -->
	</div><!-- .panel-content -->

</article><!-- #post-## -->

<?php

/**

* Displays content for front page

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.0

<?php if ( has_post_thumbnail() ) :

$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

$post_thumbnail_id = get_post_thumbnail_id( $post->ID );

$thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

// Calculate aspect ratio: h / w * 100%.

$ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100;

</div>

<?php endif; ?>

<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

<?php twentyseventeen_edit_link( get_the_ID() ); ?>

</header>

<?php

/* translators: %s: Name of current post */

the_content( sprintf(

__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),

get_the_title()

) );

</div>

</div>

</div>

</article>

↓After

<?php
/**
 * Displays content for front page
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >

	<?php if ( has_post_thumbnail() ) :
		$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

		$post_thumbnail_id = get_post_thumbnail_id( $post->ID );

		$thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

		// Calculate aspect ratio: h / w * 100%.
		$ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100;
		?>

		<div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
			<div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>
		</div><!-- .panel-image -->

	<?php endif; ?>

	<div class="panel-content">
		<div class="wrap">
			<header class="entry-header">
				<?php the_title( '<h2 class="entry-title"><span>', '</span></h2>' ); ?>

				<?php twentyseventeen_edit_link( get_the_ID() ); ?>

			</header><!-- .entry-header -->

			<div class="entry-content">
				<?php
					/* translators: %s: Name of current post */
					the_content( sprintf(
						__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
						get_the_title()
					) );
				?>
			</div><!-- .entry-content -->

		</div><!-- .wrap -->
	</div><!-- .panel-content -->

</article><!-- #post-## -->

<?php

/**

* Displays content for front page

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.0

<?php if ( has_post_thumbnail() ) :

$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

$post_thumbnail_id = get_post_thumbnail_id( $post->ID );

$thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

// Calculate aspect ratio: h / w * 100%.

$ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100;

</div>

<?php endif; ?>

<?php the_title( '<h2 class="entry-title"><span>', '</span></h2>' ); ?>

<?php twentyseventeen_edit_link( get_the_ID() ); ?>

</header>

<?php

/* translators: %s: Name of current post */

the_content( sprintf(

__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),

get_the_title()

) );

</div>

</div>

</div>

</article>

1-1.ファイルをメモ帳などに一旦保存します。

ファイルをメモ帳に保存する時の注意点
ファイル名・・「content-front-page.php」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して保存

1-2.FFFTPソフトで子テーマにアップロードします。

・FFFTPソフトのツールバーの「UTF-8」をクリック。

・下画像の右側(ホスト側)に「content-front-page.php」のファイルをドラッグ＆ドロップしてアップロードします。

・アップロードする場所は、WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」→「twentyseventeen-child」→「template-parts」→「page」フォルダの中です。

1-3.子テーマのスタイルシート(style.css)に追記します。

「外観」→「テーマの編集」からstyle.cssをカスタマイズ

/*--------------------------------------------------------------
12.0 投稿ページのtitleを装飾
--------------------------------------------------------------*/
h2.entry-title {
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em;
color: #454545;
}

/*--------------------------------------------------------------

12.0 投稿ページのtitleを装飾

--------------------------------------------------------------*/

h2.entry-title {

background: #dfefff;

box-shadow: 0px 0px 0px 5px #dfefff;

border: dashed 1px #96c2fe;

padding: 0.2em 0.5em;

color: #454545;

}

↓仕上がりの画像はこんな感じです。

配色は、ご自分のサイトに合わせてカスタマイズして下さい。

最後に更新を押して終了です。

2.固定ページの記事タイトルを子テーマを使ってカスタマイズします

WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」→「twentyseventeen」→「template-parts」→「post」の順にタブルクリックします。するとcontent.phpのファイルの中に下記のコードの記途があると思います。

これも先ほどと同じように親テーマの35行目の

the_title( ‘<h1 class=”entry-title”>’, ‘</h1>’ );

の部分にcssで装飾できるように<span>タグを使って囲みます。

↓Before

<?php
/**
 * Template part for displaying posts
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.2
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<?php
		if ( is_sticky() && is_home() ) :
			echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
		endif;
	?>
	<header class="entry-header">
		<?php
			if ( 'post' === get_post_type() ) :
				echo '<div class="entry-meta">';
					if ( is_single() ) :
						twentyseventeen_posted_on();
					else :
						echo twentyseventeen_time_link();
						twentyseventeen_edit_link();
					endif;
				echo '</div><!-- .entry-meta -->';
			endif;

			if ( is_single() ) {
				the_title( '<h1 class="entry-title">', '</h1>' );
			} elseif ( is_front_page() && is_home() ) {
				the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
			} else {
				the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
			}
		?>
	</header><!-- .entry-header -->

	<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
		<div class="post-thumbnail">
			<a href="<?php the_permalink(); ?>">
				<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
			</a>
		</div><!-- .post-thumbnail -->
	<?php endif; ?>

	<div class="entry-content">
		<?php
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
				get_the_title()
			) );

			wp_link_pages( array(
				'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
				'after'       => '</div>',
				'link_before' => '<span class="page-number">',
				'link_after'  => '</span>',
			) );
		?>
	</div><!-- .entry-content -->

	<?php if ( is_single() ) : ?>
		<?php twentyseventeen_entry_footer(); ?>
	<?php endif; ?>

</article><!-- #post-## -->

<?php

/**

* Template part for displaying posts

* @link https://codex.wordpress.org/Template_Hierarchy

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.2

<?php

if ( is_sticky() && is_home() ) :

echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );

endif;

<?php

if ( 'post' === get_post_type() ) :

echo '<div class="entry-meta">';

if ( is_single() ) :

twentyseventeen_posted_on();

else :

echo twentyseventeen_time_link();

twentyseventeen_edit_link();

endif;

echo '</div>';

endif;

if ( is_single() ) {

the_title( '<h1 class="entry-title">', '</h1>' );

} elseif ( is_front_page() && is_home() ) {

the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );

} else {

the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );

}

</header>

<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>

<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>

</a>

</div>

<?php endif; ?>

<?php

/* translators: %s: Name of current post */

the_content( sprintf(

__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),

get_the_title()

) );

wp_link_pages( array(

'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),

'after' => '</div>',

'link_before' => '<span class="page-number">',

'link_after' => '</span>',

) );

</div>

<?php if ( is_single() ) : ?>

<?php twentyseventeen_entry_footer(); ?>

<?php endif; ?>

</article>

↓After

<?php
/**
 * Template part for displaying posts
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.2
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<?php
		if ( is_sticky() && is_home() ) :
			echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
		endif;
	?>
	<header class="entry-header">
		<?php
			if ( 'post' === get_post_type() ) :
				echo '<div class="entry-meta">';
					if ( is_single() ) :
						twentyseventeen_posted_on();
					else :
						echo twentyseventeen_time_link();
						twentyseventeen_edit_link();
					endif;
				echo '</div><!-- .entry-meta -->';
			endif;

			if ( is_single() ) {
				the_title( '<h1 class="entry-title"><span>', '</span></h1>' );
			} elseif ( is_front_page() && is_home() ) {
				the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
			} else {
				the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
			}
		?>
	</header><!-- .entry-header -->

	<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
		<div class="post-thumbnail">
			<a href="<?php the_permalink(); ?>">
				<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
			</a>
		</div><!-- .post-thumbnail -->
	<?php endif; ?>

	<div class="entry-content">
		<?php
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
				get_the_title()
			) );

			wp_link_pages( array(
				'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
				'after'       => '</div>',
				'link_before' => '<span class="page-number">',
				'link_after'  => '</span>',
			) );
		?>
	</div><!-- .entry-content -->

	<?php if ( is_single() ) : ?>
		<?php twentyseventeen_entry_footer(); ?>
	<?php endif; ?>

</article><!-- #post-## -->

<?php

/**

* Template part for displaying posts

* @link https://codex.wordpress.org/Template_Hierarchy

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.2

<?php

if ( is_sticky() && is_home() ) :

echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );

endif;

<?php

if ( 'post' === get_post_type() ) :

echo '<div class="entry-meta">';

if ( is_single() ) :

twentyseventeen_posted_on();

else :

echo twentyseventeen_time_link();

twentyseventeen_edit_link();

endif;

echo '</div>';

endif;

if ( is_single() ) {

the_title( '<h1 class="entry-title"><span>', '</span></h1>' );

} elseif ( is_front_page() && is_home() ) {

the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );

} else {

the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );

}

</header>

<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>

<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>

</a>

</div>

<?php endif; ?>

<?php

/* translators: %s: Name of current post */

the_content( sprintf(

__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),

get_the_title()

) );

wp_link_pages( array(

'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),

'after' => '</div>',

'link_before' => '<span class="page-number">',

'link_after' => '</span>',

) );

</div>

<?php if ( is_single() ) : ?>

<?php twentyseventeen_entry_footer(); ?>

<?php endif; ?>

</article>

2-1.ファイルをメモ帳などに一旦保存します。

ファイルをメモ帳に保存する時の注意点
ファイル名・・「content.php」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して保存

2-2.FFFTPソフトで子テーマにアップロードします。

・FFFTPソフトのツールバーの「UTF-8」をクリック。

・下画像の右側(ホスト側)に「content.php」のファイルをドラッグ＆ドロップしてアップロードします。

・アップロードする場所は、WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」→「twentyseventeen-child」→「template-parts」→「post」フォルダの中です。

2-3.子テーマのスタイルシート(style.css)に追記します。

「外観」→「テーマの編集」からstyle.cssをカスタマイズします。

/*--------------------------------------------------------------
13.0 固定ページのtitleを装飾
--------------------------------------------------------------*/
h1.entry-title {
border-top:1px solid #004488;
border-bottom:2px solid #004488;
padding: 0 0 0 15px ;
line-height: 2;
}

/*--------------------------------------------------------------

13.0 固定ページのtitleを装飾

--------------------------------------------------------------*/

h1.entry-title {

border-top:1px solid #004488;

border-bottom:2px solid #004488;

padding: 0 0 0 15px ;

line-height: 2;

}

↓仕上がりはこんな感じで上に細いラインと下に少し太めのラインを入れてシンプルに仕上げてみました。

3.カテゴリー別に記事タイトルをカスタマイズする

カテゴリー別にしたいときは、子テーマのCSSに追記します。

.category-46 .entry-title {
background: #F8ECE0;
box-shadow: 0px 0px 0px 5px #F8ECE0;
border: dashed 1px #B45F04;
padding: 0.2em 0.5em;
}

.category-46 .entry-title {

background: #F8ECE0;

box-shadow: 0px 0px 0px 5px #F8ECE0;

border: dashed 1px #B45F04;

padding: 0.2em 0.5em;

}

.category-46→この数字はカテゴリーのIDです。

投稿→カテゴリーをクリックするとこれまで作成したカテゴリー一覧が表示されます。

IDを確認したいカテゴリータイトルをマウスオーバー(マウスカーソルを上に重ねる)してみましょう。すると、ブラウザのステータスバーにURLが表示されます。

このURLの中にある、ID=46&postの部分の数字が、このカテゴリーのIDになります。

※ステータスバーが表示されないとき
ブラウザの種類や設定内容によっては、ステータスバーが表示されない場合があります。そのときは、カテゴリー一覧画面でカテゴリーの名前をクリックして、カテゴリーの編集画面を開いてみましょう。このとき、ブラウザのアドレスバーに表示されるURLの中にあります。

Twenty Seventeenコピペで実装できるサンプル集

WP【Twenty Seventeen】初心者でも簡単にできる!タイトル見出しサンプル集22選

【WordPress】初心者向け1記事に装飾枠を付けるサンプル

2017年4月24日2021年1月23日

WordPressのテーマTwenty Seventeenで子テーマを作った一覧

４月20日にWordPress4.7.4が公開されTwenty Seventeenも４月18日にVersion upの更新情報が届いてましたね。

さっそくWordPressと私が使っているTwenty Seventeenのテーマを最新バージョンに更新しました。

実は、このフォルダ階層でちょとはまりましたので記載します。

1.子テーマを作るときのフォルダ階層一覧

まず、FFFTPソフトでサーバーにアクセスするとご自分のドメインがあります。これがWordPressをインストールしたディレクトリです。

※フォルダの作成方法がわからない方はWordPress初心者向け「Twenty Seventeen子テーマの作り方」で紹介してますので参考にしてください。

1-1.Twenty Seventeen-childのフォルダを作る

WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」の順にタブルクリックします。

twentyseventeenのフォルダが表示されている状態でtwentyseventeen-childをつくります。

1-2.template-partsのフォルダとfooterのフォルダを作る

・twentyseventeen-childのフォルダをダブルクリックしてこの中に「template-parts」のフォルダを作ります。

・次にtemplate-partsをダブルクリックし「footer」のフォルダを作ります

これでフォルダ作成は終わりましたので次にファイルを作ります。

2.Twenty Seventeen-child子テーマのファイルを作る

前回の記事でも紹介しましたが、今回は、一覧として表示したいと思います。

2-1.基本となるstyle.cssを作る

まず、スタイリストシートの必須項目となる部分を作ります。

/*
Theme Name: twentyseventeen-child
Theme URI: http://テーマのURL/
Description: twentyseventeen Child Theme
Author: 子テーマの作者名
Author URI: http://←テーマ作者のサイト
Template: twentyseventeen
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
 
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.
Text Domain: twentyseventeen-child
*/

Theme Name: twentyseventeen-child

Theme URI: http://テーマのURL/

Description: twentyseventeen Child Theme

Author: 子テーマの作者名

Author URI: http://←テーマ作者のサイト

Template: twentyseventeen

Version: 1.2

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

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.

Text Domain: twentyseventeen-child

その次に追加したい項目があればこの後に記途します。

私が子テーマのスタイリストシートに追加したのは、

2-1-1.リンク色とホバー色の変更

これは、親テーマのlinksの部分のみをコピーして下記のように加工したものです。

・リンク色の変更

①文字の色を黒【color; #222】→青【color: #0000FF;】に変更
②下線の色を黒【rgba(15, 15, 15, 1);】→青【rgba(0, 0, 255, 1);】に変更

・ホバー色の変更

①【color: #000;】をオレンジ【color: #FF8000;】のタグに変更。

②【rgba(0, 0, 0, 1)】の部分を同様のカラータグ【255, 128, 0, 1】にします。

/*--------------------------------------------------------------
10.0 Links
--------------------------------------------------------------*/

a {
	color: #0000ff;
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	color: #000;
	outline: 0;
}

/* Hover effects */

.entry-content a,
.entry-summary a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.widget_authors a strong {
	-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-title a,
.entry-meta a,
.page-links a,
.page-links a .page-number,
.entry-footer a,
.entry-footer .cat-links a,
.entry-footer .tags-links a,
.edit-link a,
.post-navigation a,
.logged-in-as a,
.comment-navigation a,
.comment-metadata a,
.comment-metadata a.comment-edit-link,
.comment-reply-link,
a .nav-title,
.pagination a,
.comments-pagination a,
.site-info a,
.widget .widget-title a,
.widget ul li a,
.site-footer .widget-area ul li a,
.site-footer .widget-area ul li a {
	-webkit-box-shadow: inset 0 -1px 0 rgba( 0, 0, 255, 1);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
	text-decoration: none;
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
	color: #FF8000;
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(255, 128, 0, 1);
}

/* Fixes linked images */
.entry-content a img,
.widget a img {
	-webkit-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
}

.post-navigation a:focus .icon,
.post-navigation a:hover .icon {
	color: #222;
}

a {
	color: #0000FF;
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	color: #000;
	outline: 0;
}

/* Hover effects */

.entry-content a,
.entry-summary a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.widget_authors a strong {
	-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-title a,
.entry-meta a,
.page-links a,
.page-links a .page-number,
.entry-footer a,
.entry-footer .cat-links a,
.entry-footer .tags-links a,
.edit-link a,
.post-navigation a,
.logged-in-as a,
.comment-navigation a,
.comment-metadata a,
.comment-metadata a.comment-edit-link,
.comment-reply-link,
a .nav-title,
.pagination a,
.comments-pagination a,
.site-info a,
.widget .widget-title a,
.widget ul li a,
.site-footer .widget-area ul li a,
.site-footer .widget-area ul li a {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
	text-decoration: none;
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
	color: #FF8000;
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba( 0, 0, 0, 1);
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(255, 128, 0, 1);
}

/* Fixes linked images */
.entry-content a img,
.widget a img {
	-webkit-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
}

.post-navigation a:focus .icon,
.post-navigation a:hover .icon {
	color: #222;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

/*--------------------------------------------------------------

10.0 Links

--------------------------------------------------------------*/

a {

color: #0000ff;

text-decoration: none;

}

a:focus {

outline: thin dotted;

}

a:hover,

a:active {

color: #000;

outline: 0;

}

/* Hover effects */

.entry-content a,

.entry-summary a,

.widget a,

.site-footer .widget-area a,

.posts-navigation a,

.widget_authors a strong {

-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);

box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);

-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}

.entry-title a,

.entry-meta a,

.page-links a,

.page-links a .page-number,

.entry-footer a,

.entry-footer .cat-links a,

.entry-footer .tags-links a,

.edit-link a,

.post-navigation a,

.logged-in-as a,

.comment-navigation a,

.comment-metadata a,

.comment-metadata a.comment-edit-link,

.comment-reply-link,

a .nav-title,

.pagination a,

.comments-pagination a,

.site-info a,

.widget .widget-title a,

.widget ul li a,

.site-footer .widget-area ul li a,

.site-footer .widget-area ul li a {

-webkit-box-shadow: inset 0 -1px 0 rgba( 0, 0, 255, 1);

box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);

text-decoration: none;

-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}

.entry-content a:focus,

.entry-content a:hover,

.entry-summary a:focus,

.entry-summary a:hover,

.widget a:focus,

.widget a:hover,

.site-footer .widget-area a:focus,

.site-footer .widget-area a:hover,

.posts-navigation a:focus,

.posts-navigation a:hover,

.comment-metadata a:focus,

.comment-metadata a:hover,

.comment-metadata a.comment-edit-link:focus,

.comment-metadata a.comment-edit-link:hover,

.comment-reply-link:focus,

.comment-reply-link:hover,

.widget_authors a:focus strong,

.widget_authors a:hover strong,

.entry-title a:focus,

.entry-title a:hover,

.entry-meta a:focus,

.entry-meta a:hover,

.page-links a:focus .page-number,

.page-links a:hover .page-number,

.entry-footer a:focus,

.entry-footer a:hover,

.entry-footer .cat-links a:focus,

.entry-footer .cat-links a:hover,

.entry-footer .tags-links a:focus,

.entry-footer .tags-links a:hover,

.post-navigation a:focus,

.post-navigation a:hover,

.pagination a:not(.prev):not(.next):focus,

.pagination a:not(.prev):not(.next):hover,

.comments-pagination a:not(.prev):not(.next):focus,

.comments-pagination a:not(.prev):not(.next):hover,

.logged-in-as a:focus,

.logged-in-as a:hover,

a:focus .nav-title,

a:hover .nav-title,

.edit-link a:focus,

.edit-link a:hover,

.site-info a:focus,

.site-info a:hover,

.widget .widget-title a:focus,

.widget .widget-title a:hover,

.widget ul li a:focus,

.widget ul li a:hover {

color: #FF8000;

-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);

box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(255, 128, 0, 1);

}

/* Fixes linked images */

.entry-content a img,

.widget a img {

-webkit-box-shadow: 0 0 0 8px #fff;

box-shadow: 0 0 0 8px #fff;

}

.post-navigation a:focus .icon,

.post-navigation a:hover .icon {

color: #222;

}

a {

color: #0000FF;

text-decoration: none;

}

a:focus {

outline: thin dotted;

}

a:hover,

a:active {

color: #000;

outline: 0;

}

/* Hover effects */

.entry-content a,

.entry-summary a,

.widget a,

.site-footer .widget-area a,

.posts-navigation a,

.widget_authors a strong {

-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);

box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);

-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}

.entry-title a,

.entry-meta a,

.page-links a,

.page-links a .page-number,

.entry-footer a,

.entry-footer .cat-links a,

.entry-footer .tags-links a,

.edit-link a,

.post-navigation a,

.logged-in-as a,

.comment-navigation a,

.comment-metadata a,

.comment-metadata a.comment-edit-link,

.comment-reply-link,

a .nav-title,

.pagination a,

.comments-pagination a,

.site-info a,

.widget .widget-title a,

.widget ul li a,

.site-footer .widget-area ul li a,

.site-footer .widget-area ul li a {

-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 255, 1);

box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);

text-decoration: none;

-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}

.entry-content a:focus,

.entry-content a:hover,

.entry-summary a:focus,

.entry-summary a:hover,

.widget a:focus,

.widget a:hover,

.site-footer .widget-area a:focus,

.site-footer .widget-area a:hover,

.posts-navigation a:focus,

.posts-navigation a:hover,

.comment-metadata a:focus,

.comment-metadata a:hover,

.comment-metadata a.comment-edit-link:focus,

.comment-metadata a.comment-edit-link:hover,

.comment-reply-link:focus,

.comment-reply-link:hover,

.widget_authors a:focus strong,

.widget_authors a:hover strong,

.entry-title a:focus,

.entry-title a:hover,

.entry-meta a:focus,

.entry-meta a:hover,

.page-links a:focus .page-number,

.page-links a:hover .page-number,

.entry-footer a:focus,

.entry-footer a:hover,

.entry-footer .cat-links a:focus,

.entry-footer .cat-links a:hover,

.entry-footer .tags-links a:focus,

.entry-footer .tags-links a:hover,

.post-navigation a:focus,

.post-navigation a:hover,

.pagination a:not(.prev):not(.next):focus,

.pagination a:not(.prev):not(.next):hover,

.comments-pagination a:not(.prev):not(.next):focus,

.comments-pagination a:not(.prev):not(.next):hover,

.logged-in-as a:focus,

.logged-in-as a:hover,

a:focus .nav-title,

a:hover .nav-title,

.edit-link a:focus,

.edit-link a:hover,

.site-info a:focus,

.site-info a:hover,

.widget .widget-title a:focus,

.widget .widget-title a:hover,

.widget ul li a:focus,

.widget ul li a:hover {

color: #FF8000;

-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba( 0, 0, 0, 1);

box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(255, 128, 0, 1);

}

/* Fixes linked images */

.entry-content a img,

.widget a img {

-webkit-box-shadow: 0 0 0 8px #fff;

box-shadow: 0 0 0 8px #fff;

}

.post-navigation a:focus .icon,

.post-navigation a:hover .icon {

color: #222;

}

※この部分の変更はTwenty Seventeen のリンク色を変更する方法で詳しく記載しています。

ご自身に会う色で変更してください。

2-1-2.ページサイズを1200幅に変更

/*--------------------------------------------------------------
11.0 ページのサイズを1200に変更
--------------------------------------------------------------*/
@media screen and (min-width: 48em) {
	.wrap {
		max-width: 1200px;/*記事・サイドバー・余白の全幅*/
		padding-left: 2em;/*記事の左余白*/
		padding-right: 2em;/*サイドバーの右余白*/
	}
	.has-sidebar:not(.error404) #primary {
		float: left;
		width: 67%;/*記事幅*/
	}
	.has-sidebar #secondary {
		float: right;
		padding-top: 0;
		width: 29%;/*サイドバー幅*/
	}
	.navigation-top .wrap {
		max-width: 1200px;/*メニューバー幅*/
		padding: 0.75em 3.4166666666667em;
	}
	.site-content {
		padding: 2.5em 0 0;/*メニューバーと記事の間隔*/
	}
}

/*--------------------------------------------------------------

11.0 ページのサイズを1200に変更

--------------------------------------------------------------*/

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

.wrap {

max-width: 1200px;/*記事・サイドバー・余白の全幅*/

padding-left: 2em;/*記事の左余白*/

padding-right: 2em;/*サイドバーの右余白*/

}

.has-sidebar:not(.error404) #primary {

float: left;

width: 67%;/*記事幅*/

}

.has-sidebar #secondary {

float: right;

padding-top: 0;

width: 29%;/*サイドバー幅*/

}

.navigation-top .wrap {

max-width: 1200px;/*メニューバー幅*/

padding: 0.75em 3.4166666666667em;

}

.site-content {

padding: 2.5em 0 0;/*メニューバーと記事の間隔*/

}

2-1-3.<h2>見出しの装飾

左に青の下線が入り見出しの背景に少し色を入れたパターンです。

↓　　　↓

CSSを追加した後に投稿ページで下記2パータンのいずれかで入力。

①ビジュアルモードで「段落」からh2を選択する

②テキストモードで<h2>ここに文字を入れる</h2>

.entry-content h2 {
 border-left: 5px solid #205a97;
 padding: 0 0 0 15px ;
 line-height: 2;
 font-size: 28px;
 background-color: #f6f6f6;}

.entry-content h2 {

border-left: 5px solid #205a97;

padding: 0 0 0 15px ;

line-height: 2;

font-size: 28px;

background-color: #f6f6f6;}

2-1-4.<h3>タグを使った見出しの装飾

下に青の下線が入ったタイプです。

　↓　　　↓

CSSを追加した後に投稿ページで下記2パータンのいずれかで入力。

①ビジュアルモードで「段落」からh3を選択する

②テキストで<h3>ここに文字を入れる</h3>

.entry-content h3 {
 border-bottom: 2px solid #205a97;
 padding: 0 0 0 15px ;
 line-height: 2;
 font-size: 25px;
 background-color: #fff;}

.entry-content h3 {

border-bottom: 2px solid #205a97;

padding: 0 0 0 15px ;

line-height: 2;

font-size: 25px;

background-color: #fff;}

※保存場所は「twentyseventeen-child」フォルダの中です。

2-2.functions.phpを作る

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

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );

}

注意:functions.phpに記途する場合空白があったり、編集を間違えると画面が真っ白になったり、RSSなどうまく機能しなくなったりしますので気をつけてください。

※保存場所は「twentyseventeen-child」フォルダの中です。

2-3.header.phpを作る

Search ConsoleHTMLタグ、Adsenseのコードなどを親テーマに入力している場合は親テーマのhwader.phpをコピーして子テーマに保存します。

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
//ここにAdsenseのショートコードを入力
//Search ConsoleのHTML タグを入力
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>

	<header id="masthead" class="site-header" role="banner">

		<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

		<?php if ( has_nav_menu( 'top' ) ) : ?>
			<div class="navigation-top">
				<div class="wrap">
					<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
				</div><!-- .wrap -->
			</div><!-- .navigation-top -->
		<?php endif; ?>

	</header><!-- #masthead -->

	<?php
	// If a regular post or page, and not the front page, show the featured image.
	if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :
		echo '<div class="single-featured-image-header">';
		the_post_thumbnail( 'twentyseventeen-featured-image' );
		echo '</div><!-- .single-featured-image-header -->';
	endif;
	?>

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

<?php

/**

* The header for our theme

* This is the template that displays all of the <head> section and everything up until <div id="content">

* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.0

?><!DOCTYPE html>

<html <?php language_attributes(); ?> class="no-js no-svg">

<head>

//ここにAdsenseのショートコードを入力

//Search ConsoleのHTML タグを入力

<?php wp_head(); ?>

</head>

<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

<?php if ( has_nav_menu( 'top' ) ) : ?>

<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>

</div>

</div>

<?php endif; ?>

</header>

<?php

// If a regular post or page, and not the front page, show the featured image.

if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :

echo '<div class="single-featured-image-header">';

the_post_thumbnail( 'twentyseventeen-featured-image' );

echo '</div>';

endif;

※保存場所は「twentyseventeen-child」フォルダの中です。

2-4.site-info.phpを作る

フッターのproudly powered by wordpress表記をCopyright （C）にカスタマイズしたデータを保存する時に使用しますが、

元のデータは

<?php
/**
* Displays footer site info
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/

?>
<div class=”site-info”>
　<a href=”<?php echo esc_url( __( ‘https://wordpress.org/’, 
‘twentyseventeen’ ) ); ?>”><?php printf( __( ‘Proudly powered by %s’, ‘twentyseventeen’ ), ‘WordPress’ ); ?></a>
</div><!– .site-info –>

<?php

/**

* Displays footer site info

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.0

　<a href=”<?php echo esc_url( __( ‘https://wordpress.org/’,

‘twentyseventeen’ ) ); ?>”><?php printf( __( ‘Proudly powered by %s’, ‘twentyseventeen’ ), ‘WordPress’ ); ?></a>

</div><!– .site-info –>

となっており13～14行目を削除しこれをコピーライトに変更する時に使用します。

<?php
/**
 * Displays footer site info
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>
<div class="site-info">
	Copyright (C) <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( '暮らしのハンドノート', 'display' ) ); ?>" rel="home"><?php bloginfo( '暮らしのハンドノート' ); ?> </a>All Rights Reserved.
</div><!-- .site-info -->

<?php

/**

* Displays footer site info

* @package WordPress

* @subpackage Twenty_Seventeen

* @since 1.0

* @version 1.0

</div>

※このファイルの保存場所は、「twentyseventeen-child」→「template-parts」→「footer」のフォルダの中に「site-info.php」のファイルを保存してください。

次回は、タイトル見出しの装飾方法を子テーマを使用して解説します。

2017年4月20日2018年5月25日

WordPress初心者向け「Twenty Seventeen子テーマの作り方」

先日、子テーマについて記載したのですが、本日は、子テーマの作成方法について記載したいと思います。

子テーマを何故作るのか?

親テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれませんが、子テーマを使用すれば親テーマがアップデートされても子テーマは確実に保持されますので、自分がカスタマイズした内容が保持できます。

1.子テーマの作り方

子テーマを作るのには、サーバーで直接作る方法とFFFTPソフトを使って作成する方法がありますが、今回はFFFTPソフトを使って作成する方法を記載します。

FFFTPソフトのイントール方法や初期設定がわからない方はsynclogue-navi.comさんに設定方法など記載がありますので参考にして下さい。

1-1.FFFTPソフトを使ってフォルダを作ります。

FFFTPソフトでサーバーに接続します。
WordPressがインストールされているフォルダをダブルクリック→「Public_html」→「wp-content」→「themes」の順にダブルクリックすると以下のフォルダーが表示されます。

上の画像表示の状態でFFFTPソフトのツールバーの中にあるフォルダ作成をクリック↓

ポップアップ画面に「twentyseventeen-child」と入力し「OKをクリック」

するとtwentyseventeenの下にtwentyseventeen-childのフォルダができます。

フォルダ作成はこれで完了です。

※子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されますが、必須ではありません。

1-2.子テーマを有効にするため最低限のファイルを作る

子テーマを有効にする為にはstile.cssとfunctions.php

この2つのファイルが最低限必要です。

1-3.style.cssを作る

Search Console(旧:ウェブマスターツール)構造化エラーの対処方法でも記載しましたがSearch Consoleの構造化データーにエラーがでましたので

WordPress codex日本語版を参考にさせていただきました。

※style.cssに追加する場合以下のコードの後に記途してください。

Twenty Seventeen Version1.1をお使いの方でフォルダ名をtwentyseventeen-childと付けられた方は、

Theme URI: http://テーマのURL/
Author: 子テーマの作者名
Author URI: http://←テーマ作者のサイト

この３項目をご自分用に書きかえればOKです。

メモ帳に貼り付けて、ディスクトップなどわかりやすい場所に保存してください。

ファイルを保存する時の注意点
ファイル名・・「style.css」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して保存

するとstyle.cssが下の画像のようにディスクトップにできているのが確認できます。

フォルダに保存した場合の画像

↓

ディスクトップに保存した場合の画像

↓

1-4.functions.phpを作る

functions.phpに、親テーマのスタイルシートを呼び出す記述を書き込みます。

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

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );

}

※functions.phpに機能を追加する場合は、” ?> “の前に記途して下さい。

ファイルを保存するときの注意点
ファイル名・・「functions.php」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して「保存」

注意:functions.phpに記途する場合空白があったり、編集を間違えると画面が真っ白になってしまいます。必ずバックアップを取って下さい。