カテゴリー
コミュニケーションズ

WordPressを5.4にTwenty Twentyを1.2に更新

このマジシャンのサイトで使っているWordpressとテーマTwenty Twentyの更新が出てたので早速しました。
更新すると変更していた設定がまた元に戻ってしまうため再度設定し直してます。
設定箇所を備忘録で記載しておきます。

追記:2020/8/13にWordPressを5.5にTwenty Twentyを1.5に更新。基本一緒です。

目次

関連記事

Google Analyticsとdescriptionの追加

Twenty Twenty: テーマヘッダー (header.php)
線の引いてある部分を追加。

		<?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の変更

Twenty Twenty: テーマのための関数 (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を出力

更新日の追加

投稿ページ

Twenty Twenty: template-tags.php (inc/template-tags.php)

364行目

// Post date.
				if ( in_array( 'post-date', $post_meta, true ) ) {

					$has_meta = true;
					?>
					<li class="post-date meta-wrapper">
						<span class="meta-icon">
							<span class="screen-reader-text"><?php _e( 'Post date', 'twentytwenty' ); ?></span>
							<?php twentytwenty_the_theme_svg( 'calendar' ); ?>
						</span>
						<span class="meta-text">
							<a href="<?php the_permalink(); ?>"><?php the_time( get_option( 'date_format' ) ); ?></a> | <?php the_time( get_the_modified_date(get_option('date_format')) ); ?> 更新
						</span>
					</li>
					<?php

				}

固定ページのカーバーテンプレート

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

92行目あたり

					if ( is_page() ) {
								?>

								<div class="to-the-content-wrapper">

									<a href="#post-inner" class="to-the-content fill-children-current-color">
										<?php twentytwenty_the_theme_svg( 'arrow-down' ); ?>
										<div class="screen-reader-text"><?php _e( 'Scroll Down', 'twentytwenty' ); ?></div>
									</a><!-- .to-the-content -->

								</div><!-- .to-the-content-wrapper -->


<br/>
<span class="modified">
							<?php the_time( get_the_modified_date(get_option('date_format')) ); ?> 更新
						</span>
								<?php
							} else {

固定ページのデフォルトテンプレート

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

		// Default to displaying the post meta.
		twentytwenty_the_post_meta( get_the_ID(), 'single-top' );
		?>
		
		
		<?php if ( is_page() ) : ?>
<br/>
<span class="modified">
							<?php the_time( get_the_modified_date(get_option('date_format')) ); ?> 更新
						</span>
		<?php endif; ?>
		

	</div><!-- .entry-header-inner -->

</header><!-- .entry-header -->

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

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

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
		}

カバーテンプレートの設定変更

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' );

                        }

「ダッシュボード」→「外観」

Twenty Twenty: navigation.php (template-parts/navigation.php)

10、11行目の()にtrueを追加する。

$next_post = get_next_post(true);
$prev_post = get_previous_post(true);

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

1573行
500から700へ

ul.primary-menu {
display: flex;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: -0.0277em;
flex-wrap: wrap;
justify-content: flex-end;
margin: -0.8rem 0 0 -1.6rem;
}

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

1404行
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;
}

検索の文字を大きくする

4891行
1.2から1.8へ変更

/* HEADER TOGGLES */

.toggle-inner .toggle-text {
    font-size: 1.8rem;
}

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

アドセンス追加

			<footer id="site-footer" role="contentinfo" class="header-footer-group">
				
				<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>
				
				<br/>

				<div class="section-inner">
                <div class="footer-credits">

                    <p class="footer-copyright">&copy;
                        <?php
                        echo date_i18n(
                            /* translators: Copyright date format, see https://www.php.net/date */
                            _x( 'Y', 'copyright date format', 'twentytwenty' )
                        );
                        ?>
                        <!-- <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
                    </p> --><!-- .footer-copyright -->

                    <!-- <p class="powered-by-wordpress">
                        <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
                            <?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
                        </a>
                    </p> --><!-- .powered-by-wordpress -->


                    <!-- 追加 -->
                     <a href="https://magician.tokyo/">マジシャンえいち</a> / Hiroshi Tsuchiya <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><!-- .footer-credits -->

Twenty Twenty: スタイルシート (style.css)
サイズを少し小さく変更
5620行あたり

/* FOOTER BOTTOM */

#site-footer {
    font-size: 1.6rem;
    padding: 4.3rem 0;
}

関連記事

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

作成者: えいち/H

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