【Twenty Seventeenのちょこっと解説】バージョン1.2の変更点

こんにちは、mimiです。

WordPressの復習に手間取っている間に、Twenty Seventeenがバージョンアップしたようです。

今まではテーマのバージョンアップなんて全然気にせず何のバックアップも取らずに(!)アップデートしていたのですが、子テーマを使っていると流石にリリースノートをチェックしてみようという気になりますね。

リリースノートはこちら
https://codex.wordpress.org/Twenty_Seventeen_Theme_Changelog#Version_1.2

Declare jQuery dependency for navigation.js. (#40224)
Correctly escape translatable strings in HTML attributes. (#40216)
Fix incorrect heading hierarchy for front page posts. (#40264)

ヘッダータグの階層を修正とか普通にしてあった・・・。確かに変だなと思ったけれど・・・。

ヘッダータグのCSSをカスタムしているケースは結構あるのではなかろうか。こういうところもアップデートされるならば、ローカルテスト必須だなあ。

実際の差分はこちら
https://themes.trac.wordpress.org/changeset?old_path=twentyseventeen/1.1&new_path=twentyseventeen/1.2

つまり、トップページのエントリーのタイトルタグをh3タグに変更しているようですね。

・・・そこは気にするんだ?って思っちゃうけれど、より良いソースになるのは良いことだと唱えつつ、粛々と子テーマを修正しましょう(私は何も修正していませんが)。 “【Twenty Seventeenのちょこっと解説】バージョン1.2の変更点” の続きを読む

【WordPressの基礎】テーマにウィジェットを追加する「ウィジェットかサイドバーかそれが問題だ」

こんにちは、mimiです。

昨日に引き続き、プレーンなwordpress作りにチャレンジしているのですが、ウィジェット周りの設定方法を気持ちいいくらい忘れていたので、復習がてら書いておきます。

まず、ウィジェットを追加するサイドバーを作ってあげるためにfunctions.phpにwidgets_initを追加します。

//widgetsの設定
function my_widgets_init() {

	register_sidebar( array(
		'name' => 'main sidebar',
		'id' => 'main_sidebar',
		'before_widget' => '<div>',
		'after_widget' => '</div>',
		'before_title' => '<h2>',
		'after_title' => '</h2>',
	) );

	register_sidebar( array(
		'name' => 'sub sidebar',
		'id' => 'sub_sidebar',
		'before_widget' => '<div>',
		'after_widget' => '</div>',
		'before_title' => '<h2>',
		'after_title' => '</h2>',
	) );
}
add_action( 'widgets_init', 'my_widgets_init' );

こんな感じで、複数でもサイドバーを追加できます。
追加したら、管理メニューの外観に「ウィジェット」が表示されるはずなので、普通に必要なウィジェットをドラックドロップしましょう。

メニューの3番目に「ウィジェット」が入ります。

実際にサイトにウィジェット(サイドバー)を反映させるには、sidebar.phpなどに

<?php if ( is_active_sidebar( 'main_sidebar' ) ) : ?>
<div id="main_sidebar">
	<?php dynamic_sidebar( 'main_sidebar' ); ?>
</div>
<?php endif; ?>
<?php if ( is_active_sidebar( 'sub_sidebar' ) ) : ?>
<div id="sub_sidebar">
	<?php dynamic_sidebar( 'sub_sidebar' ); ?>
</div>
<?php endif; ?>

という風にdynamic_sidebar関数によってregister_sidebarで付けたidで呼び出します。
“【WordPressの基礎】テーマにウィジェットを追加する「ウィジェットかサイドバーかそれが問題だ」” の続きを読む

【WordPressのスリム化計画その1】ヘッダーの中を綺麗にしよう

こんにちは、mimiです。
仕事が一段落したらブログも一段落してしまいました。すっかり春ですね。心機一転、Wordpressのスリム化計画と題して書いていきたいと思います。

というのも久々にWordpressのプレーンな状態を作ろうとイチからテーマを作っていたら、デフォルトで色んなものを突っ込んでいたり、はたまた必要なものが無かったりしたのでその辺をメモしておきたいなあと。

先ずはheadタグの中を軽くお掃除したいと思います。

generatorは前からあったけれど、emojiタグなんてものも突っ込まれるようになったのですね・・・。
あと管理バーも最初からオフにしておきたいし、タイトルタグの自動生成も何処にいったかなと思ったらfunction.phpに移動してる・・・。

という訳で、fucntions.phpに以下を記述してあげるとemoji関連の記述が減って、headタグ内がちょっとスッキリしてくれます。

(もちろん、絵文字をサイトで使うという方はそのままにしておいてくださいね。)

function disable_emoji() {
     remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
     remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
     remove_action( 'wp_print_styles', 'print_emoji_styles' );
     remove_action( 'admin_print_styles', 'print_emoji_styles' );
     remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
     remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
     remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
     add_filter( 'emoji_svg_url', '__return_false' );
}
add_action( 'init', 'disable_emoji' );

generatorを消したければ

remove_action( 'wp_head', 'wp_generator' );

管理バーを消したければ

add_filter( 'show_admin_bar', '__return_false' );

を追記してください。

あとは、普通にテーマを使っていれば入っているはずですが、タイトルタグは

add_theme_support( 'title-tag' );

で自動生成されていますので、funtions.phpから消さないこと。

“【WordPressのスリム化計画その1】ヘッダーの中を綺麗にしよう” の続きを読む

【Twenty Seventeenのちょこっとカスタマイズ】フォントに游ゴシックを加えよう【CSS】

こんにちは、mimiです。今日は初心に帰って?ほんとにちょこっとカスタマイズです。

WordPressのテーマ、Twenty Seventeenは各言語に対してそれぞれfont-familyを指定しています。が、残念ながらヒラギノ角ゴシック、メイリオだけの指定になっているので、みんな大好き「游ゴシック」を追加しましょう。
ソースはstyle.cssのこのへん。

/* Typography for Japanese Font */

html[lang="ja"] body,
html[lang="ja"] button,
html[lang="ja"] input,
html[lang="ja"] select,
html[lang="ja"] textarea {
	font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}

“【Twenty Seventeenのちょこっとカスタマイズ】フォントに游ゴシックを加えよう【CSS】” の続きを読む

【Twenty Seventeenのちょこっと解説】ヘッダーイメージのCSSがアツイ【object-fit】

こんにちは、mimiです。今日はTwenty Seventeenのちょこっと解説として、CSSについてのお話。

ヘッダーメディアのインパクトが強いWordpressのテーマ、Twenty Seventeen。CSS覗くまでbackground-size使ってるんでしょ、とタカをくくっていたのですが。
なんとobject-fitが使われてる!と知って居ても立ってもいられず記事にしています。解説ていうか報告ていうか。

ソースはこのへん。

@supports ( object-fit: cover ) {
	.has-header-image .custom-header-media img,
	.has-header-video .custom-header-media video,
	.has-header-video .custom-header-media iframe,
	.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
		height: 100%;
		left: 0;
		-o-object-fit: cover;
		object-fit: cover;
		top: 0;
		-ms-transform: none;
		-moz-transform: none;
		-webkit-transform: none;
		transform: none;
		width: 100%;
	}
}

“【Twenty Seventeenのちょこっと解説】ヘッダーイメージのCSSがアツイ【object-fit】” の続きを読む

【Twenty Seventeenのちょこっとカスタマイズ】カテゴリーのページタイトルから「カテゴリー:」を取りたい

昨日に引き続き、Wordpressの新テーマTwenty Seventeenのカスタマイズについて。

カテゴリーのページタイトルに自動で出力される「カテゴリー:」を取りましょう。簡単です。

カテゴリーの一覧(アーカイブ)ページは、Twenty Seventeenではarchive.phpで出力されています。

問題のページタイトルの部分は

	<?php if ( have_posts() ) : ?>
		<header class="page-header">
			<?php
				the_archive_title( '<h1 class="page-title">', '</h1>' );
				the_archive_description( '<div class="taxonomy-description">', '</div>' );
			?>
		</header><!-- .page-header -->
	<?php endif; ?>

このあたり。the_archive_title()が曲者です。 “【Twenty Seventeenのちょこっとカスタマイズ】カテゴリーのページタイトルから「カテゴリー:」を取りたい” の続きを読む

【Twenty Seventeenのちょこっとカスタマイズ】投稿ページに表示される記事を絞り込む

前回に引き続き、Wordpressの新テーマ、Twenty Seventeenのカスタマイズについて。

フロントページに表示される記事一覧をあるカテゴリーに絞り込むことは出来たのですが、そうすると該当ページ(news)をクリックした時にはまだ全カテゴリーの記事が表示されてしまう事態が起きます。

これに対応するために、index.phpを弄ります。(なぜindex.phpなのかは前記事のプラス解説を参照してください。)

/wp-content/themes/twentyseventeen/index.php

を子テーマにコピーして

				/* Start the Loop */
				while ( have_posts() ) : the_post();

					/*
					 * Include the Post-Format-specific template for the content.
					 * If you want to override this in a child theme, then include a file
					 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
					 */
					get_template_part( 'template-parts/post/content', get_post_format() );

				endwhile;

ここのWhile文の中に条件を付け加えます。 “【Twenty Seventeenのちょこっとカスタマイズ】投稿ページに表示される記事を絞り込む” の続きを読む