ワードプレスのテーマをTwenty TwentyからTwenty Twenty-Oneに変更

twenty twenty-one
公開日:

このサイトはワードプレスの無料テーマを使っているんだけど最近Twenty TwentyからTwenty Twenty-Oneに変更した。
最初はデザインがシンプル過ぎてイマイチに感じたのとあとバグもあったのですぐには変更しないで様子を見ていた。
しかし最近Googleに表示される順位があまりよくない。
Google Search Consolという自分のサイトをチェックするのがあるんだけどそれを見るとモバイルはいつもステータスが不良となっている。
GoogleのPageSpeed Insightsという読み込みのスピードを診断するサイトがあるのだがそれを試すといつもモバイルは30台といつも悪い結果となっていた。
なのでそこら辺を改善できないかと思い最新のテーマに変更することとした。

マジシャン出張/派遣マジックショーのご案内

目次

  1. 関連記事
  2. 修正箇所
  3. 動画

関連記事

修正箇所

headerの変更

Google Analyticsとdescriptionの追加
赤色が追加したところ

Twenty Twenty-One: テーマヘッダー (header.php)

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<?php wp_head(); ?>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-54971882-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-54971882-1');
</script>
	
	<!-- added description-->
<meta name="description" content="<?php echo strip_tags( get_the_excerpt() ); ?>" />
</head>

functions.phpの変更

最後に以下を追加

固定ページに抜粋(ディスクリプション)を追加

// ここから変更を追加

/** added description  */
add_post_type_support( 'page', 'excerpt' );

タイトルのセパレータを|に変更

// タイトルのセパレータを変更
function change_separator() {
  return "|"; // ここに変更したい区切り文字を書く
}
add_filter('document_title_separator', 'change_separator');

twitterカードを設置

	/*********************
	OGPタグ/Twitterカード設定を出力
	*********************/
	function my_meta_ogp() {
	  if( is_front_page() || is_home() || is_singular() ){
		global $post;
		$ogp_title = '';
		$ogp_descr = '';
		$ogp_url = '';
		$ogp_img = '';
		$insert = '';

		if( is_singular() ) { //記事&固定ページ
		   setup_postdata($post);
		   $ogp_title = $post->post_title;
		   $ogp_descr = mb_substr(get_the_excerpt(), 0, 100);
		   $ogp_url = get_permalink();
		   wp_reset_postdata();
		} elseif ( is_front_page() || is_home() ) { //トップページ
		   $ogp_title = get_bloginfo('name');
		   $ogp_descr = get_bloginfo('description');
		   $ogp_url = home_url();
		}

		//og:type
		$ogp_type = ( is_front_page() || is_home() ) ? 'website' : 'article';

		//og:image
		if ( is_singular() && has_post_thumbnail() ) {
		   $ps_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
		   $ogp_img = $ps_thumb[0];
		} else {
		 $ogp_img = 'https://magician.tokyo/wp-content/uploads/2019/02/Y1ap7bPVRZ2DfKsWgg6Ew_thumb_53de.jpg';
		}

		//出力するOGPタグをまとめる
		$insert .= '<meta property="og:title" content="'.esc_attr($ogp_title).'" />' . "\n";
		$insert .= '<meta property="og:description" content="'.esc_attr($ogp_descr).'" />' . "\n";
		$insert .= '<meta property="og:type" content="'.$ogp_type.'" />' . "\n";
		$insert .= '<meta property="og:url" content="'.esc_url($ogp_url).'" />' . "\n";
		$insert .= '<meta property="og:image" content="'.esc_url($ogp_img).'" />' . "\n";
		$insert .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'" />' . "\n";
		$insert .= '<meta name="twitter:card" content="summary_large_image" />' . "\n";
		$insert .= '<meta name="twitter:site" content="@hmagicn" />' . "\n";
		$insert .= '<meta property="og:locale" content="ja_JP" />' . "\n";

		//facebookのapp_id(設定する場合)
		$insert .= '<meta property="fb:app_id" content="397597987468612">' . "\n";
		//app_idを設定しない場合ここまで消す

		echo $insert;
	  }
	} //END my_meta_ogp

	add_action('wp_head','my_meta_ogp');//headにOGPを出力

パスワードをかけたページの設定


/* 保護中: を非表示*/
add_filter('protected_title_format', 'remove_protected');
  function remove_protected($title) {
    return '%s';
}

/* 保護中:の記事を一覧から非表示*/
function custom_pre_get_posts($query) {
  if(is_singular() || is_admin()) {
    return;
  }
  $query->set('has_password', false);
}
add_action('pre_get_posts', 'custom_pre_get_posts');

/* パスワードの保存期間を1日*/
function custom_postpass_time() {
  require_once ABSPATH . 'wp-includes/class-phpass.php';
  $hasher = new PasswordHash( 8, true );
  setcookie( 'wp-postpass_' . COOKIEHASH, $hasher->HashPassword( wp_unslash( $_POST['post_password'] ) ), time() + DAY_IN_SECONDS, COOKIEPATH );
  wp_safe_redirect( wp_get_referer() );
  exit();
}
add_action( 'login_form_postpass', 'custom_postpass_time' );

「使用していない JavaScript の削除」に出てたYouTubeの読み込みを遅延読み込みに

//iframeに loading="lazy" を追加
function oEmbed_iframe_lazyload($tag){
  if(strpos($tag, 'iframe') !== false){
    $tag = preg_replace('/iframe /', 'iframe loading="lazy" ', $tag);
  }
  return $tag;
}
add_filter('embed_oembed_html', 'oEmbed_iframe_lazyload');

以下は今回削除した

ブログから特定のカテゴリーを表示させなくする

//特定のカテゴリの除外
function exclude_category( $query ) {
  if ( $query->is_home() && $query->is_main_query() ) {
    $query->set( 'cat', '-193,-194,-195' );//マイナスをつけてカテゴリIDを除外する
  }
}
add_action( 'pre_get_posts', 'exclude_category' );

更新日を追加

二箇所変更

Twenty Twenty-One: content-single.php (template-parts/content/content-single.php)

<header class="entry-header alignwide">
		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
		<?php twenty_twenty_one_post_thumbnail(); ?>
<div style="text-align:center;">
			<span title="公開日">
  公開日:<time itemprop="datePublished" datetime="<?php the_time('c');?>"><?php the_time('Y年n月j日');?></time>
</span>
<?php if( get_the_time('Ymd') !== get_the_modified_date('Ymd')){ ?>
  <span title="更新日">
    更新日:<time itemprop="dateModified" datetime="<?php the_modified_date('c');?>"><?php the_modified_date('Y年n月j日'); ?></time>
  </span>
			</div>
<?php } ?>
	</header>

Twenty Twenty-One: content-page.php (template-parts/content/content-page.php)

<?php twenty_twenty_one_post_thumbnail(); ?>
<div style="text-align:center;">
			
  <span title="更新日">
    更新日:<time itemprop="dateModified" datetime="<?php the_modified_date('c');?>"><?php the_modified_date('Y年n月j日'); ?></time>
  </span>
			</div>
</header>

フッターの設定

Twenty Twenty-One: テーマフッター (footer.php)

?>

アドセンスの追加

<div style="text-align:center;">
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5993653051176297" data-ad-slot="9960928309"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</main><!-- #main -->
		</div><!-- #primary -->
	</div><!-- #content -->

アドセンスの追加

<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5993653051176297" data-ad-slot="2181898291"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
	<?php get_template_part( 'template-parts/footer/footer-widgets' ); ?>

コメントアウト

<!-- <div class="powered-by">
				<?php
				printf(
					/* translators: %s: WordPress. */
					esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
					'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
				);
				?>
			</div> --><!-- .powered-by -->

コピーライトとリンクを追加

<!-- 追加 -->
			<p class="footer-copyright">&copy;
							<?php
							echo date_i18n(
								/* translators: Copyright date format, see https://www.php.net/manual/datetime.format.php */
								_x( 'Y', 'copyright date format', 'twentytwentyone' )
							);
							?>
                     <a href="https://magician.tokyo/">ひろしつちや</a> / <a href="https://magician.tokyo/">HiroshiTsuchiya</a> <a href="https://magician.tokyo/privacy-policy">&thinsp;プライバシーポリシー</a>&thinsp;
                    <a href="https://magician.tokyo/">マジシャン出張</a>&thinsp;/&thinsp;<a href="https://magician.tokyo/">マジシャン派遣</a>&thinsp;|&thinsp;<a href="https://magicianh.com/"> MagicianH </a><!-- 追加 -->
		</div><!-- .site-info -->

記事の前後に同じカテゴリーを表示させる

不明

Twenty Twenty-One: スタイルシート (style.css)

記事の幅を広げる
610から720へ

@media only screen and (min-width: 822px) {

	:root {
		--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 720px);
		--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
	}
}

ヘッダにできる横線を/**/でコメントアウト 3932

/*.site-header > .site-logo {
	width: 100%;
	padding-bottom: calc(var(--global--spacing-vertical) * 1.5);
	border-bottom: 1px solid;
	text-align: center;
}*/

ロゴの右マージンをautoから変更 3939

.site-logo .custom-logo {
	margin-left: auto;
	margin-right: 10px;
	max-width: var(--branding--logo--max-width-mobile);
	max-height: var(--branding--logo--max-height-mobile);
	height: auto;
	display: inline-block;
	width: auto;
}

追加CSS

/*ウィジット上の空間を削除*/
.no-widgets .site-footer, .widget-area {
	margin-top: calc(0 * var(--global--spacing-vertical));
}

/*タイトル上の空間を削除*/
.site-header {
		padding-bottom: calc(0 * var(--global--spacing-vertical));
	}

/*トップの空間を削除*/

.site-header {
		padding-top: calc(1.2 * var(--global--spacing-vertical));
	}

/*SNSアイコン上の空間を削除*/
.footer-navigation {
	margin-top: calc(0 * var(--global--spacing-vertical));
	margin-bottom: calc(0 * var(--global--spacing-vertical));
}

/*ウィジェット上の空間を削除*/
.site-footer > *,
	.widget-area > * {
		margin-top: calc(0 * var(--global--spacing-vertical));
		margin-bottom: var(--global--spacing-vertical);
	}

/*投稿ページのタイトル文字サイズ*/
.singular .entry-title {
	font-size: calc(0.6 * var(--global--font-size-page-title));
}

/*カテゴリーページのタイトル文字サイズ*/
.page-title {
	font-size: calc(0.6 * var(--global--font-size-page-title));
}

/*カテゴリーページの説明文字サイズ*/
.archive-description {
	margin-top: var(--global--spacing-vertical);
	font-size: calc(0.5 * var(--global--font-size-xl));
	line-height: var(--global--line-height-heading);
}

動画

YouTubeで変更箇所などについて喋ってる。

作成者: ひろしつちや(えいち/H)

マジシャンのひろしつちや(えいち/H)です。 東京で出張、派遣のプロマジシャンをやってます。 記事の感想、コメント、質問などはTwitterにお願いします。 フォローも良かったらお願いします。 Instagram / YouTube / Facebook