ひろし

目次/トップ/インフォ

マジシャンのサイトをWordPressのTwenty NineteenからTwenty Twentyに変更

マジシャンのサイトをWordPressのTwenty NineteenからTwenty Twentyに変更

投稿日

更新日

このマジシャンひろしのサイトではWordPressのTwenty Nineteenというテーマをしばらく使っていたのだけど20年になるタイミングで新しくリリースされたTwenty Twentyというテーマに変更した。
名前の通りTwenty Nineteenは2019年の少し前にTwenty Twentyは20年の少し前にリリースされた。
これはWordPressに最初からついてくる無料のテーマ。
有料のと比べるとシンプルで機能もあまりついてませんが逆に余計なのもついてないし多少自分で手直しすれば十分に使えるサイトになる。

Twenty Nineteenの要領で見た目などを変更したかったのだけどなかなかうまく行かずに苦労した。今日時点では前のTwenty Nineteenの方が見た目が良かったようにも思ったり多少問題もあったりするのだけどまだ変えたばかりだし少しずつ手直しをして使っていこうかなと思っている。

マジシャンの出張､派遣はこちら

WordPressを5.4にTwenty Twentyを1.2に更新

目次

表示が崩れた

で、新しいTwenty Twentyだけど変更したところ結構表示が崩れてかなり手直しが必要になってしまった。
左寄せにしていたものが画面の左端まで寄ったりAmazonのアフィリエイトは横に並んでいたのが縦になったり。出来るところはプラグインのSearch Regexを使って一括で変換して直し出来なかったところは一つ一つ手直し。
3が日はほとんど手直しばかりしていた。

選べるテンプレート

ページごとにテンプレートが選べるようになった。
カバーテンプレートを選ぶとヘッダにアイキャッチ画像が表示されるようになる。ただこれをアイキャッチ画像がないのに選ぶとタイトルなどが表示されなくなってしまう。
私は投稿一覧から一括でカバーテンプレートに変更してしまったのでその後一つずつページを開いてデフォルトテンプレートに変更した。これがかなりの手間でまだ終わってません。

カバーテンプレートは文字幅がかなり狭いの以下を参考に少し広げました。
横幅は以下にしている。
max-width: 96rem;

Twenty Twenty 1、本文エリアの幅を広げる

それと文字サイズもかなりでかいので調べて少し小さくした。ただまだでかいのでもしかしたらもう少し小さくするかもしれない。

https://tehehet.com/dev/twenty-twenty-7-font-size/

タイトル下の抜粋表示を削除する

これはなんでしょう？いらないような。消したいのだけど消し方がよくわからなかったのでそのままにしている。無くていいかな。

2020/03/28 追記

以下の設定で表示させなく出来た。

デフォルトテンプレートの設定変更

Twenty Twenty: entry-header.php (template-parts/entry-header.php)

変更前

		 if ( has_excerpt() && is_singular() ) {
			?>

			<div class="intro-text section-inner max-percentage<?php echo $intro_text_width; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>">
				<?php the_excerpt(); ?>
			</div>

			<?php
		}

変更後

表示させるところをコメントアウトしている。

		 if ( has_excerpt() && is_singular() ) {
			?>

			<!-- <div class="intro-text section-inner max-percentage<?php echo $intro_text_width; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>">
				<?php the_excerpt(); ?>
			</div> -->

			<?php
		}

カバーテンプレートの設定変更 2020/4/4 追記

Twenty Twenty: content-cover.php (template-parts/content-cover.php)

109行目辺り
コメントアウトを追加

                            if ( has_excerpt() ) {
                                ?>

                                <!-- <div class="intro-text section-inner max-percentage<?php echo esc_attr( $intro_text_width ); ?>">
                                    <?php the_excerpt(); ?>
                                </div> -->

                                <?php
                            }

                            twentytwenty_the_post_meta( get_the_ID(), 'single-top' );

                        }

メニューとディスクリプションの文字を大文字へ 追記 1/7

サイト上部に表示されるディスクリプション、マジックショーを東京から全国へ！、という部分と右のメニューが薄くて見づらかったので太字にした。

メニューの文字を太字へ

スタイルシート (style.css)
1613行
font-weight: bold;を追加

.primary-menu li {
font-size: inherit;
font-weight: bold;
line-height: 1.25;
position: relative;
}

ディスクリプションの文字を太く変更

スタイルシート (style.css)
1405行
font-weight: 500;から700に変更

.site-description {
margin-top: 1rem;
color: #6d6d6d;
font-size: 1.8rem;
font-weight: 700;
display: none;
letter-spacing: -0.0311em;
transition: all 0.15s linear;
}

Twenty Twentyはフッターにコピーライトが表示されるのだけれどこの表示が©2020と表示されていた。Googleなんかもこの表示なんだよね。ただ前に調べた限りではサイトをサイトに始めた年を書くのが正しいようだった。なので©2020はfooter.phpからコメントアウトして消して© 2013 と表示させている。
ただGoogleなどの例があるので今後も何が正しいとされるのかは注意して見ていこうかと思う。

Twenty Nineteenのフッターを修正、「Copyright」（著作権表示）をつける

最終更新日の挿入

今までphpファイルをいじって投稿日の横に表示していたのだけど前と同じ方法では出来なかったので以下のプラグインを入れてヘッダの下に挿入している。
しかしイマイチなので前のように出来る方法が見つかったらそちらに変えたいね。
WP Last Modified Info
2020/03/25追記 以下の方法で更新日を表示したのでプラグインは停止した。

Twenty Twentyで更新日を追加する方法

WordPressを5.4にTwenty Twentyを1.2に更新

アクセス数: 0