このマジシャンのサイトで使っているWordpressとテーマTwenty Twentyの更新が出てたので早速しました。
更新すると変更していた設定がまた元に戻ってしまうため再度設定し直してます。
設定箇所を備忘録で記載しておきます。
追記 : 2021/01/11にWordPressを5.6にTwenty Twentyを1.6に更新。
追記：2020/8/13にWordPressを5.5にTwenty Twentyを1.5に更新。基本一緒です。
目次
- Google Analyticsとdescriptionの追加
- functions.phpの変更
- 更新日の追加
- タイトル下の抜粋表示を削除する
- 記事の前後に同じカテゴリーを表示させる
- ヘッダの文字を変更
- フッターの設定
関連記事
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 = 'http://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="@hiroshitsutch" />' . "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">©
<?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="http://magician.tokyo/">マジシャンひろしつちや</a> / Hiroshi Tsuchiya <a href="http://magician.tokyo/privacy-policy"> プライバシーポリシー</a> 
<a href="http://magician.tokyo/">マジシャン出張</a> / <a href="http://magician.tokyo/">マジシャン派遣</a> | <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に変更