カテゴリー
メモ:PC設定

WordPress5.6へ更新

WordPress5.4から5.6へ更新しました。子テーマを使わない場合の手順です。テーマ(TwentyTwenty)の更新で一部、追加CSSを修正する必要がありました。


更新で影響が出たところ

  • 更新でサイトが動かなくなったり、今までに作成したサイトの表示が大きく乱れたりすることはありませんでした
  • WordPress5.6 + TwentyTwenty ver1.6 の場合、左寄せ画像直後にくる段落の全角ドロップキャップ、フォントサイズが大きいのでスマホで表示すると位置がちょっと惜しい感じ(前からだったかも?)。幅の狭いデバイスだと全角ドロップキャップが画像の真下に行ってしまうことがあります
    • 追加CSSをひらいてドロップキャップの設定(p.has-drop-cap:not(:focus):first-letter)でフォントサイズを少し小さめに設定しておけば改善します
  • WordPress5.6 + TwentyTwenty ver1.6 で新規にボタンを作成して、以前から使っている追加CSSでデザインを修正(ボタンの幅を指定する内容)しようとしても反映されず。デフォルトでボタンに適用されるCSSクラスが変わったことによるもの。そのままだとちょっと使いにくいので、新しい TwentyTwenty でも動作するように追加CSSを修正しました(ボタンのaタグのCSSクラスに "display:block" を設定しておきます)

更新の手順

WordPressの更新をする

  1. サーバ上の WordPress をバックアップ(データベースと WordPress をインストールしたディレクトリを丸ごとバックアップ)
  2. ダッシュボードから WordPress本体、プラグイン、テーマをすべて更新

いまのところテーマを修正するときに利用しているのは「追加CSS」と「functions.php」のみ。追加CSSはデータベースに保存されているので更新の影響を受けません。functions.php のみ復元作業をします。

  1. 更新されたテーマの functions.php をエディタで開いて独自に追加したコードをあらためて書き加える
    • 実際には functions.php に独自に加える変更は、すべて別ファイルにして管理している
    • 別ファイルになっている独自コードをテーマのあるディレクトリ(フォルダ)にコピー
    • functions.php にこの独自ファイルをインクルードする命令を書き加える。例えば:
      include( get_template_directory() . '/komm/add-functions.php' );
  2. 以上で更新完了です