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://hiroshitsuchiya.com/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="@hiroshitsuch" />' . "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://hiroshitsuchiya.com/">マジシャン</a> <a href="https://hiroshitsuchiya.com/">ひろし</a> / <a href="https://hiroshitsuchiya.com/">Magician</a> <a href="https://hiroshitsuchiya.com/">H</a>		<!-- 追加 -->
			
© 2013 Hiroshi<!-- 追加 -->


			<?php

この間に

        <?php endif; ?>

この間に

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

以下のリンクを挿入

        <?php endif; ?>

        <a href="https://hiroshitsuchiya.com/">マジシャン出張</a> / <a href="https://hiroshitsuchiya.com/">マジシャン派遣</a> / <a href="https://hiroshitsuchiya.com/light">マジシャン出前</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のアプリから余計な文字を削除したのだけどそれの影響だろうか？

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

アクセス数: 0

ひろし

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

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

手順

修正箇所

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

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

description（抜粋）の追加

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

twitterカード設置

style.css

画面の幅を広く使う

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

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

single.php

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

footer.php

フッターをカスタマイズ

フッターのサイズ変更

総括

子供会のクリスマス会でマジックショー in 横浜市,神奈川県

誕生パーティーにマジシャンが英語で子供向けマジックショー in 品川

9歳男児平日開催誕生会でマジックショー渋谷区, 東京都

マジシャン

スケジュール

Instagram

マジシャンのサービス

出張､呼ぶ､雇う

ライトプラン

プライベートマジックレッスン