ひろしつちや

Twenty Twenty

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

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

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

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

http://magician.tokyo/wordpress54-twenty-twenty12-update

目次

表示が崩れた

で、新しい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などの例がありますので今後も何が正しいとされるのかは注意して見ていこうかと思います。

http://magician.tokyo/twenty-nineteen-footer-copyright

最終更新日の挿入

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

http://magician.tokyo/twenty-twenty-add-modified

WordPressを5.4にTwenty Twentyを1.2に更新

投稿日

カテゴリー:

投稿者:

ひろしつちや(えいちH)

タグ:

,