サイトの設定色々 – テアちゃん最強伝説

1.ワードプレスの投稿画面の幅を広くする

　Wordpressの編集画面いつも狭くって、ブログ投稿が超しづらいとか思ってたら良い方法をアップしている人がいたのでメモ。これはとても助かる。詳しくは下記のリンクをクリック。

ワードプレス編集画面の幅が狭くて使いづらい場合は広げよう！　
https://kodawari-style.com/wordpress-editor/　

(2024.6.29追記)
　久しぶりにWordpressの記事を作成しようと思ったら、また編集画面の横幅が狭くなってしまった。functions.phpに以下のコードを記述しているのに。効果がなくなってしまった模様。
ということで別の方法を調べたのでそのメモ。

wp-content/themes/twentytwentyone/ の中に editor-styles.cssを作る

editor-styles.cssの内容は下記の通り

.wp-block {
max-width: 1000px !important;
}

コンソールのvi editor を使って作る

functions.phpを編集する

下記のコードを追記する。

// ブロックエディタのスタイルをカスタムCSSファイルで読み込む
add_action( 'enqueue_block_editor_assets', 'custom_block_editor_styles' );

function custom_block_editor_styles() {
    wp_enqueue_style( 'custom-editor-styles', get_stylesheet_directory_uri() . '/editor-styles.css', array(), '1.0', 'all' );
}

これでうまく行った。
　

1.1 子テーマを作る

　Twenty-twenty one の更新をするたびに設定しな直さなきゃならないのが面倒なので子テーマというのを作ることにした。

子テーマを作成する手順は下記の通り。コンソールを使ってサーバーにログインして管理者権限で下記を実行。
1.1.1 子テーマディレクトリの作成
wp-content/themes/ ディレクトリ内に、新しいディレクトリを作成。
twentytwentyone-child という名前にする。

# cd themes
# mkdir twentytwentyone-child

　1.1.2 子テーマのスタイルシートを作成
子テーマディレクトリ内に style.css ファイルを作成

# vi style.css

style.cssは中身は下記

/*
Theme Name: Twenty Twenty-One Child
Template: twentytwentyone
*/

/* Add custom style here */

1.1.3 子テーマのfunctions.phpを作成
　子テーマディレクトリ内に functions.php ファイルを作成。中身は下記の通り。

<?php
// Enqueue parent theme styles
function twentytwentyone_child_enqueue_styles() {
    wp_enqueue_style('twentytwentyone-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('twentytwentyone-child-style', get_stylesheet_directory_uri() . '/style.css', array('twentytwentyone-style'));
}
add_action('wp_enqueue_scripts', 'twentytwentyone_child_enqueue_styles');

// Enqueue custom CSS for the block editor
function custom_block_editor_styles() {
    wp_enqueue_style('custom-editor-styles', get_stylesheet_directory_uri() . '/editor-styles.css', array(), '1.0', 'all');
}
add_action('enqueue_block_editor_assets', 'custom_block_editor_styles');

1.1.4 editor-styles.cssを作成
　子テーマディレクトリ内に editor-styles.cssファイルを作成。中身は下記の通り

.wp-block {
    max-width: 1000px !important;
}

1.1.5 WordPress の管理画面から子テーマを有効化
WordPress の管理画面にログインし、「外観」→「テーマ」から、作成した子テーマ (Twenty Twenty-One Child) を有効化。

これで、親テーマをアップデートしても、カスタマイズが子テーマ内に保持されるため、アップデートによって消えることはなくなるが、「Options for Twenty Twenty-One 」の方の設定はChildの方でも設定（上記画面のカスタマイズ）をする必要がある。

2.「更新に失敗しました返答が正しいJSONレスポンスではありません」の対応方法

　SiteGuardのログを見るとブロックされていることが分かる。今のインターネットの契約だと、IPアドレスが固定ではないので時間が経つと変わってしまう。その度に設定し直す必要があって、毎回方法を調べては忘れてしまうので変更方法メモしておく。詳しくは下記のリンク。

解決法：更新に失敗しました返答が正しいJSONレスポンスではありません。【WordPress/SiteGuard】
https://m-kenomemo.com/wordpress-siteguard/

　このサイトに紹介されている方法を参考にして、「カスタム・シグネチャ」を編集する。接続元のIPアドレスを追加すればいい。IPアドレスの調べ方もこのサイトで紹介されている。SiteGuardのログで調べてもいいのでそうする。

　で。問題なのは書き方。IPアドレスを正規表現で記述する必要がある。そこの説明はこのサイトあまり詳しく書いてない。ネットで調べたりして、さくらインターネットのサポートに相談して教えてもらった。その時の書き方は下記の通り。たとえばIPアドレスが「192.168.1.100」だったとすると書き方はこうなる。

^192\.168\.1\.100$

　最初に「^」、最後に「$」でIPアドレスを挟む。
　　　　　「.」の前に「\」を入れる。（「.」と「\.」では意味が異なる。）
　　　　　「\」は「/」ではなく「\」バックスペースの左の「￥」のキーの方を押す。
　　　　　「？」キーを押して出る[/]ではない。見た目が似ているので注意。

IPv4 プライベートアドレスにマッチする正規表現
https://qiita.com/noraworld/items/e55871c3851e9a35dfa0

3.ページ内リンクを作り方

　目次をの作り方はリンク先の見出し選択して
　「ブロック」→「高度な設定」→ 「HTMLアンカー」
　このテキストボックス内に、AとかBとか、なんでもいいので入れる。
　目次の方に箇条書きのリストを作ったら、そのテキストを選択してリンク作成ボタンを押して　
　＃をつけてAとかBを入力する。　詳しくは下記のサイトを参照。

参考サイト　WordPressでページ内リンクを作る方法を徹底解説
https://webst8.com/blog/inpage-link/#st-toc-h-4

目次