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

WordPressを「WordPress 5.2」に更新しました

このサイトで利用しているWordPressの新しいバージョンの「WordPress 5.2」がリリースされたので今日の1時過ぎの深夜から早朝にかけて更新しました。

子テーマを導入するかどうか

前回のアップデートの時にサイトを更新したら設定箇所が元の状態に戻ってしまい戻すのに結構大変だったことがありました。

調べてみると子テーマと言う構造を取る事によって更新でも上書きされないように出来ると言う事でした。

次のアップデートのタイミングで子テーマを導入しようと思ってましたが少し調べたところ面倒臭そうだったのとシンプルな構成の方がシロートにはいいかなと思い子テーマ導入は今回見送りそのまま上書きして変更したファイルは一から修正すると言う事にしました。

やってみた感想は意外と修正していて思い出しながらやったのでなんだかんだ時間がかかり大変でした。

手順

更新前に修正しているファイルをコピーします。

私の場合は

スタイルシート (style.css)、テーマのための関数 (functions.php) 、テーマヘッダー (header.php)、テーマフッター (footer.php) 、個別投稿 (single.php)

をコピーしました。

更新は表示されていたリンクをクリックしたらすぐに完了。

デザインなど元に戻ってしまっているのでここから1つ1つ修正です。

あと、一緒にTwenty Nineteenのバージョンも 1.4に更新しています。

今回しませんでしたがこれから変更するファイルは丸々コピーしておいたほうがいいですね。万が一のことがありますから。

今回修正中に表示がおかしくなることもありました。次にやるときはめんどくさいですがコピーを取るようにします。

修正箇所

修正箇所を備忘録をかねて記載しておきます。

テーマヘッダー (header.php)

以下を

		<!-- 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() ); ?>" />
	
	
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

ここの間に入力します。

<head>
〜
	<?php wp_head(); ?>

ここに入力

</head>

一つ目がGoogle Analytics
2つ目が固定ページにdescription(抜粋)の追加で (functions.php) にも変更が必要。
3つ目がFontAwesomeのWebフォントを使うためです。(twitter、Facebookのボタンのアイコン作成で使う)

テーマのための関数 (functions.php)

description(抜粋)の追加

以下を 一番下に追加

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

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

タイトルとキャッチフレーズを繋ぐ記号を「-」 から「 | 」に変更

以下を 一番下に追加

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

twitterカード設置

ブログをTwitterで共有する時にこの設定をしておくとサイトの写真が表示されるようになります。

functions.phpの一番下に追加

/*********************
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を出力

style.css

画面の幅を広く使う

Twenty Nineteenは画面をある程度広げると幅が固定されてセンター表示が左寄りになってしまいます。なのでどんなに広げても幅が広がりセンターに来るように修正しています。

/**/でコメントアウトして「max-width: none;」を追加しています。
数字は何行目にあったかの表示です。実際には無視してください。

3番目のところは
width: -webkit-fill-available;
width: -moz-available;
を追加。

3番目と4番目はクロームとファイヤーフォックス用に追加しています。

5207
@media only screen and (min-width: 1168px) {
  .entry .entry-content > *,
  .entry .entry-summary > * {
	 max-width: none; 
   /* max-width: calc(6 * (100vw / 12) - 28px); */
  }
}
5321
@media only screen and (min-width: 1168px) {
  .entry .entry-content > *.aligncenter,
  .entry .entry-summary > *.aligncenter {
	  max-width: none;
    /*max-width: calc(6 * (100vw / 12) - 28px);*/
  }
}


5767
@media only screen and (min-width: 768px) {
  .entry .entry-content .wp-block-image .aligncenter {
    margin: 0;
    /*width: calc(8 * (100vw / 12) - 28px);*/
	 width: -webkit-fill-available;
	 width: -moz-available;
  }
  .entry .entry-content .wp-block-image .aligncenter img {
    margin: 0 auto;
  }
}

5779
@media only screen and (min-width: 1168px) {
  .entry .entry-content .wp-block-image .aligncenter {
    /*width: calc(6 * (100vw / 12) - 28px);*/
	  max-width: none;
  }
  .entry .entry-content .wp-block-image .aligncenter img {
    margin: 0 auto;
  }
}

過去の投稿、次の投稿を広げる

投稿ページの下に出る過去の投稿、次の投稿を広げてセンター表示するには以下をコメントアウト。

3437
@media only screen and (min-width: 1168px) {
  .post-navigation .nav-links {
    flex-direction: row;
    margin: 0 calc(10% + 60px);
    /* max-width: calc(6 * (100vw / 12) - 28px); */
  }
}

ガジェットの最近の投稿フォントサイズ変更

フォントサイズがやけにでかいのでスタイルを削除しています。

/*font-size: calc(22px * 1.125);*/	
/*font-weight: 700;*/

single.php

twitterとフェースブックの共有ボタンを投稿ページに追加

endwhile; // End of the loop.
			?>

ここに
		</main><!-- #main -->
	</section><!-- #primary -->


<?php
get_footer();

以下を追加

		
			<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'|'.get_bloginfo('name');
?>
<div class="share">
  <ul>
    <!--Facebookボタン-->
    <li class="facebook">
      <a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
        <i class="fa fa-facebook"></i><span> facebook</span>
      </a>
    </li>
    <!--ツイートボタン-->
    <li class="tweet">
      <a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
        <i class="fa fa-twitter"></i><span> tweet</span>
      </a>
    </li>


  </ul>
</div>

あとCSSの追加も必要になります。

詳細は参考にさせていただいたリンク先をご参照ください。

SNSボタンをWordPressの記事やウィジェットにプラグインなしで追加する

footer.php

フッターをカスタマイズ

この下の間を削除して代わりに

		<div class="site-info">
			
			<?php

以下を挿入

		<div class="site-info">
			
			<a href="https://magician.tokyo/">マジシャン</a> <a href="https://magician.tokyo/">えいち</a> / <a href="https://magician.tokyo/">Magician</a> <a href="https://magician.tokyo/">H</a>		<!-- 追加 -->
			
© 2013 Hiroshi Tsuchiya<!-- 追加 -->


			<?php

この間に

        <?php endif; ?>

この間に

    </div><!-- .site-info -->

以下のリンクを挿入

        <?php endif; ?>

        <a href="https://magician.tokyo/">マジシャン出張</a> / <a href="https://magician.tokyo/">マジシャン派遣</a> / <a href="https://magician.tokyo/delivery">マジシャン出前</a> | <a href="https://hire.magician.tokyo/">ハイヤーマジシャン</a>

    </div><!-- .site-info -->

フッターのサイズ変更

デフォルトだとフッターの文字がかなり小さいので少し大きくした。
スタイルシート (style.css)2366行あたり。


h6 {
  font-size: 0.85em;
  /*font-size: 0.71111em;*/
}

WordPressの投稿ページと固定ページに更新日を表示させるはリンク先を参照ください。

総括

なんだかんだで朝日が昇るまでかかりました。

毎回だとしんどいですね。まあそうしょっちゅうあるわけでないので毎回やったことをちゃんとまとめておけばすぐに出来るようになるかな。

今朝起きてサイトをみたらホームページがかなりおかしな事になってました。おそらく寝る時に iPhoneのWordpressのアプリから余計な文字を削除したんですがそれの影響でしょうか?

リビジョン機能で戻すことができました。やはり慎重にやらないと怖いなと思ったのでした。

作成者: えいち/H

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