パソコン – ページ 6 – 暮らしのハンドノート

2017年5月6日2017年7月6日

WordPress4.7.4で動作確認済みのおすすめプラグイン

Word Pressには色々なプラグインがありますが、探すのにかなりの時間がかかったりしますので、今回は、私が実際に試してよかったプラグインを管理画面のプラグイン検索から直接インストールできるものを抜粋しています。

プラグインは入れているだけでも負荷がかかりますので、ご自分のWord Press のテーマに存在する機能のプラグインや重複する機能が付いているプラグインなど選定して最小限度にインストールすることをおおすすめします。

1.WordPrressに必須と思われるプラグイン

1-1.WordPress Ping Optimizer

WordPress Ping Optimizer-Word Press Plugins

記事の投稿を編集するたびに送信されるPingを最適化するプラグインです。

WordPressのデフォルト設定では、
記事を修正した時でもその都度Pingが送信されてしまいます。

ピングスパマーとしてタグ付けされるのはあまり好ましくないので是非導入しておきましょう。

WordPress Ping Optimizerの設定方法

1-2.All In One SEO Pack

All In One SEO Pack-Word Press Plugins

SEOに関するカスタム投稿タイプの機能が細かく設定できるプラグインです。

特定の記事・固定ページ、カテゴリページ、タグページのnoindex設定
サイトトップページや各ページのtitle・meta description・meta keywordタグの設定
Google Analytics、Google Search Consoleのコードの簡易設置
SitemapXMLの生成

1-3.Contact Form 7

Contact Form 7-Word Press Plugins

お問い合わせフォームを簡単に育成できるプラグイン。

シンプルなコンタクトホーム、でも柔軟。

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

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

1-4.AddToAny Share Buttons

Add ToAny Share Buttons-Word Press Plugins

SNSシェアボタンを簡単に設置できるプラグインです。

カウンター機能
Floating share buttons
100以上のサービスから選んで表示

1-5.Google XML Sitemaps

Google XML Sitemaps-Word Press Plugins

Google、Bing、Yahoo、Ask.comなどの検索エンジンがブログをよりよく索引付けするための特別なXMLサイトマップを生成するプラグイン

すでにAll In One SEO Packをインストールしている場合All In One SEO Packの機能管理からXmlサイトマップをActiveにすればインストール不要です。

1-6.Throws SPAM Away

Throws SPAM Away-Word Press Plugins

日本語が存在しないコメントを捨ててしまうコメントスパムプラグイン

コメント内に日本語の記述が存在しない場合はあたかも受け付けたように振る舞いながらも捨ててしまうプラグイン

対応する最新バージョン: 4.7-RC1となってましたが、無事スパムコメントは0になりました。

1-7.BackWPup-Word Press Plugins

BackWPup-Word Press Plugins

サイトのデータを設定で定期的に自動でバックアップもしてくれるプラグインです。

データベースをバックアップ
ファイルバックアップ
インストールされたプラグインを使用してファイルを生成します

Word Pressの復元やデータ破損時にバックアップを取っておけば安心です。

1-8.001 Prime Strategy Translate Accelerator

001 Prime Strategy Translate Accelerator-Word Press Plugins

WordPressを日本語で表示させる場合には、英語と日本語を対訳させるja.moというファイルを読み込んでいます。
この日本語翻訳ファイルをキャッシュして高速化するプラグインです。

2.必要に応じてあると便利なプラグイン

2-1.TablePress

TablePress-Word Press Plugins

投稿やページに美しく機能豊富なテーブルを作成してくれるプラグインです。

面倒なHTMLコードを書かずに直感的に作成でき、Excelデータをインポートする機能も付いています。

投稿画面に作成したショートコードをコピペするだけで表示されます。

2-2.TinyMCE Advanced

TinyMCE Advanced-Word Press Plugins

ビジュアル・エディタのツールバー上に表示されているボタンを配置し自分の好みでカスタマイズできます。

フォントサイズの選択
フォントファミリの選択
テーブルをExcelデータのようにセルの結合などができます

2-3.Crayon Syntax Highlighter

Crayon Syntax Highlighter-Word Press Plugins

HTMLなどのソースコードを記事上に綺麗に表示してくれるプラグイン

複数の言語、テーマ、URL、ローカルファイル、または投稿テキストを強調表示しますので、HTMLやCSS、PHPなどの解説をするサイトや、プログラミング言語を扱うサイトは便利なプラグインです。

対応する最新バージョン: 4.2.0となってましたが、4.7.4で使用した結果動作可能でした。

2-4.Hatom/hentry remover

Hatom/hentry remover-Word Press Plugins

Search Consoleの構造化データに役立つプラグインです。

このプラグインはpost_classフィルターで「.hentry」クラスを削除し、単にJavaScriptで再びタグを追加することによって、すべてのテーマをサポートしています。
これは、レイアウトをめちゃくちゃにせずに「構造化データ」のhentryとしてそれをインデックスからGoogleのを防ぐことができます。

対応する最新バージョン: 4.4.9となってましたが、構造化テストで「.hentry」クラスを削除し最終的なエラー数が減少しました。

2-5.WordPress Related Posts

関連記事を簡単に表示できるWordPressプラグイン

記事下などに設定した任意のレイアウトで画像やテキストを表示してくれます。

対応する最新バージョン: 4.6.5となってましたが、4.7.4でも関連表示可能でした。

2-6.Redirection

Redirection-Word Press Plugins

パーマリンクを変更したときやサイトを引越ししたときに役立つプラグインです。

301 リダイレクトを管理し、404 エラーをモニターするための WordPress プラグインです。

WordPressパーマリンク変更時に必須なリダイレクト設定方法

2-7.Simple Custom CSS

Simple Custom CSS-Word Press Plugins

テーマのCSSを直接編集しなくても、CSSを追加・上書きできるプラグインです。

~~対応する最新バージョン: 4.4.9となってましたが4.7.4で使用した結果、子テーマのcssをそのままコピペしても大丈夫でした。~~

2017.6.11訂正　クラス属性（class)で名前を付けて、CSS（スタイルシート）での指定が一部できませんでした。

2-8.fancybox for wordpress

FancyBox-Word Press-Word Press Plugins

画像をクリックすると画像を拡大表示してくれるプラグインです。

画像の細かい部分が見やすくなるのでおすすめです。

2-9.Table of Contents Plus

Table of Contents Plus-Word Press Plugins

記事の見出しごとに目次を自動で設置してくれるプラグインです。

投稿ペーシに<a href=”#”> </a>などのタグ入力が不要になります。

また、アンカーにジャンプするのではなくスクロールする機能が付いていますのでページ内のリンクに飛ぶとき滑らかにスクロールするプラグインです。

対応する最新バージョン: 4.4.9となってましたが、4.7.4で使用した結果設置は可能です。

2-10.Simple Scroll to Top Button

Simple Scroll to Top Button-Word Press Plugins

矢印など10種類のアイコンからボタンの背景色やボタンのサイズを自分の好みで色をカスタマイズできクリックすると記事の上部までスクロールするボタンです。

記事を読み進めた時記事のトップに速く戻れます。

2-11.WordPress Popular Posts

WordPress Popular Posts-Word Press Plugins
ウィジェットに人気記事を表示できるプラグインです。

人気の記事をページビュー数やコメント数を基本に、24時間・1週間・30日間・すべての時間単位で表示できるプラグインです。

対応する最新バージョン: 4.6.5となってましたが4.7.4でカスタマイズし、動作確認しました。

Twenty SeventeenでWordPress Popular Postsのサムネイルにタイトルを重ねて表示する方法をコピペでどうぞ

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に記途する場合空白があったり、編集を間違えると画面が真っ白になってしまいます。必ずバックアップを取って下さい。