【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のちょこっとカスタマイズ】投稿ページに表示される記事を絞り込む” の続きを読む

【Twenty Seventeenのちょこっとカスタマイズ】フロントページの記事のカテゴリーを絞る

昨日に引き続き、Wordpressのカスタマイズについてです。

Twenty Seventeenではフロントページのカスタマイズがかなり簡単になっています。4ページ分の固定ページのコンテンツを載せられて、そのうち一つは記事一覧も出せます。

でもブログっぽくないページを目指すには全記事一覧が出ちゃうとちょっとなあというケースがあると思います。そういうときは子テーマを作ってさくっとカスタマイズしてしまいましょう。

※ここでは、フロントページを固定ページに、投稿ページをnewsというニュース記事ページに設定している前提でお話してみます。

そもそも何処で動いているのか

まずはテーマオプションで指定できる、フロントページの最大4つのセクションを出力する箇所をピックアップしてみます。 “【Twenty Seventeenのちょこっとカスタマイズ】フロントページの記事のカテゴリーを絞る” の続きを読む

【Twenty Seventeenのちょこっとカスタマイズ】Powered by を書き換える

ひさびさにWordpressを弄っています。色々と変わりましたね。
子テーマとか楽しいなあ。カスタマイズがらくちん。だけれど忘れてしまうのでメモしておこうと思います。(子テーマの作り方は公式サイトなどを参考にしてください。)

Twenty Seventeen、とても良いテーマです。というか、4.7が良いのかな。子テーマまで踏み込まなくてもかなり簡単に色々とカスタマイズ出来ますね。

とはいえ、自分色に思う存分染められるのがWordpressの醍醐味。というわけで、先ずはちょっと申し訳ない気持ちは持ちつつも「Proudly powered by WordPress」をさくっと変更してしまいましょう。子テーマは作っておいてくださいね(このぐらいの変更なら直接親テーマをいじってしまっても良いでしょうけれど)。

Twenty Seventeenのソースの中から該当するファイルを見つけます。

/wp-content/themes/twentyseventeen/template-parts/footer/site-info.php

を子テーマ(ここではtwentyseventeen-child)にコピーします。 “【Twenty Seventeenのちょこっとカスタマイズ】Powered by を書き換える” の続きを読む

WORDPRESSのDBをローカルに落とした時に変更する箇所

wordpressのDBを本番サーバーからコピーしてローカルに突っ込んでテストする、ということがありますが、
そのままだとローカルのwordpressではなく本番サーバーのwordpressにログインしてしまうので
2箇所ほどDBを弄る必要があります。

とっても簡単で、テーブル名「wp_options」の「home」と「siteurl」を本番のURLからローカルのURLへと書き換えるだけ。

なんだけれど、忘れやすいのでメモ。

WORDPRESSの投稿サムネイルについて

WORDPRESSの2.9から追加された投稿サムネイルの機能を今頃しったのでメモ。

テーマのfunction.phpに

if ( function_exists( 'add_theme_support' ) ) { 
  add_theme_support( 'post-thumbnails' ); 
}

を追加すると投稿画面の右下側に「アイキャッチ画像」という項目が追加される。

表示させるfunctionは
基本はループの中で

the_post_thumbnail

を使う。

ループの外や、変数に読み込みたい時などは

get_the_post_thumbnail

URLだけ欲しい時は

$medium_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'medium');
$main_image = $medium_image_url[0];

とかしてattachment関連の関数を使う。

参照ページ:

“WORDPRESSの投稿サムネイルについて” の続きを読む