5丁目通信(仮称)

とある5丁目で活動する還暦を過ぎたWebプログラマーの覚え書きです。それとかかってくる迷惑電話や、家業のアパート経営について。

タグ: WordPress

  • WordPressのカラムブロックにリンクが貼れない話し

    WordPressのカラムブロック全体にリンクを貼ろうと思ったらできませんでした。一応はできると言う記事があって、EditorsKitプラグインをインストールしてもダメでした。

    こちらのEditorsKitは投稿や固定ページには、カラムブロックにリンクはできるのですが、やりたいことはトップページのブログホームなのです。何か違いがあるのでしょうか?

    だったらHTMLで直接aタグを書こうと思っても、カラムブロックにはHTML編集ができないのですね。テンプレートに書き出しても同じようです。

    以上で断念。リンクのテキストをカラムブロックに挿入してお茶を濁します。何かよい方法があったら考えてみます。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/28 17:08時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

  • WordPressの再利用ブロックがパターンに統合されていた話し

    ここのブログでもWordpressの再利用ブロックが挿入できなくなったとか、再利用可能ブロックの管理はどこでやるのかと書きました。

    BardとかEdgeのAIチャットに聞いてみると(ChatGPTでは解決できませんでした)、再利用可能ブロックはWordpress6.3からパターンに統合されていたみたいです。どこかでニュースリリースでも書かれていたもしれませんが、私は見逃していたようです。

    気を取り直して、Wordpressのグーテンベルクの編集画面を見てみると、右上のオプションメニューから「パターンを管理」でパターンの管理画面に入ると、以前定義した再利用可能ブロックも一緒にパターン一覧に表示されていました。ここから再利用可能ブロックの編集と削除ができました。

    しかしながら、従来の再利用可能ブロックがパターンの未分類に入っていて、未分類が名前を付けて分類できないとか、並び順が設定できないなど、まだ解決できない部分がありますけど、これでよしといたしましょう。

    以上のことから、Wordpressのパターンとか再利用可能ブロックの話題があまり出てこないと言うことは、あまり使われていないということなのかな?

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/28 17:08時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

  • またWordPressの再利用可能ブロックが挿入できなくなった話し。納得いかないけど解決した話し

    WordPressの記事の作成で何回も同じことを書くことがあるので、再利用可能ブロックにまとめてしまいます。再利用可能ブロックは、一つの記事で変更すると、同じブロックは同じように変更してくれますので、とても便利に使っています。

    以前、再利用可能ブロックがグーテンベルクの記事の編集画面から選択できなくなって改善されたと書きましたが、また選択できなくなってしまいました。再利用可能ブロックの代わりにメディアというタグが追加されています。

    同じさくらインターネットのレンタルサーバーの上で動いているWordpressのサイトがありますが、こちらも同じような現象が起こっています。

    また、さくらインターネットのサーバーが原因なのでしょうか? それとも、Wordpressに何か不具合があるのでしょうか? まさか、グーテンベルクの編集画面から再利用可能ブロックの挿入ができなくなっているのでしょうか? これは無いかと思うけど・・・。

    この障害も時間が経てばさくらインターネットが対応してくれて改善されるのでしょうか。どうせ、さくらインターネットに聞いても、レンタルサーバー上の中の障害については答えてくれないでしょうから。

    今は、別の記事から再利用可能ブロックをコピペしてしのいでいます。よく使っている再利用可能ブロックは、ブロックの先頭で/を入力するとリストに表示されるので、こちらでもとりあえずは挿入できています。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/28 17:08時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

    追記(2023年10月6日)

    再利用可能ブロックの挿入方法を見つけました。

    パターンの未分類にまとめてありました。これが仕様なのでしょうか? なぜここにあるがわかりません。再利用可能ブロックはパターンに統合されたのでしょうか?

    しかしながら、グーテンベルクの編集画面の右上のオプションメニューに再利用可能ブロックの管理へのリンクがなくなっています。再利用可能ブロックの管理画面へはどうやって行ったらいいのでしょうか? 

    とりあえずは、再利用可能ブロックの挿入、編集ができるからいいかな・・・。

    続きの話しはこちら

    とりあえず解決した話し。

  • WordPressのサイトがTexoPressプラグインのせいでページが文字化けした話し

    一応は一日一回このサイトにアクセスしているのですが、本日アクセスしたらページが文字化けしていました。

    まず疑ったのは、Wordpressのバージョンアップです。再度6.3.1に再バージョンアップします。それでも文字化けはなおりません。

    次に疑ったのはプラグインです。一つづつプラグインを無効にしていきます。無効にして正しく表示できたのは、TexoPressです。タグの管理プラグインです。とりあえずは、TexoPressを無効にしておきます。

    TexoPressプラグインの代わりはあるのでしょうか? それともTexoPressプラグインが文字化けしないまでバージョンアップを待ちましょうか?

    それにしてもTexoPressプラグインを無効にしてしまうとタグの選択が面倒です。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/28 17:08時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

    追記(2023年9月29日)

    それにしてもWordpressのこちらのサイトが微妙におかしい。たとえば、Wordpressのグーテンベルクの編集画面で再利用可能ブロックの一覧が表示できない障害がまた出ている。そして、やけにページの保存に時間がかかるようになった。

    再利用可能ブロックの件は、以前にも障害があったが、こちらはサイトのホスティング元のさくらインターネットのサーバーの改修で改善されたので、おそらくさくらインターネットのサーバーの問題なのだろう。

    時間が解決するのか、放っておけば解決するのかはわからない。

    追記(2023年9月29日)

    3日前にTexoPressプラグインがアップデートされたようで、文字化けが直っていた。これでタグの管理が楽になる。

    再利用可能ブロックが出てこないのはまだ直っていない。再利用可能ブロックの代わりにメディアというタブが出てきているけど、この影響なのかな? とにかく再利用可能ブロックが挿入できないを辛い。しかたないから、他のページからコピペした対応する。でも面倒。

  • 相談だけでは儲けが出ないという話し

    知らない電話番号から着信があった。出てみると、以前からお付き合いのある会社の社長だった。その会社とは担当者は知っているけど、社長は初めて話す。

    話しを聞いてみると、その会社が請け負ったサイトのメンテナンスの話しだった。

    何でも請け負ったサイトがWodpreddで作られていて、大昔のサイトだったからPHPが5.3(!)でMySQLも相当古いバージョンで、サイトを動かしているさくらインターネットから警告が来ているそうな。

    そこでサイトを作成して会社にWordpressのサイト環境にバージョンアップの見積もりを依頼したらべらぼうな値段でふっかけられてそうな。そこで、その値段より安く作業できないかという相談だった。

    具体的な作業の値段を教えてくれないので、安いとか高いとかは言えないので、常識的というか当たり障りのない範囲で答えておく。

    早いところWordpressはバージョンアップしたほうがいいと言っておいた。さくらインターネットならレンタルサーバーでWordpressのインストールが簡単に出てきてしまうので、新しくサーバーを契約してサイトを移行してしまえば、PHPやMySQLも新しいバージョンで利用できることを伝えた。

    ただし、そのサイト固有のWordpressのプラグインとか何か改造しているのであれば、それ相当の手間と費用がかかることも言っておいた。

    どのようなさくらインターネットのサーバーを契約しているか、ましてどのようなサイトであるかも把握していないようなので、これで話しは終了した。

    デザイン志向の会社なのであまり技術的なことはわかっていないようだ。

    以上、15分位ほど話しをして適格な回答をしたけど、全く儲けにはならないのでした。これ以上、この案件は進まないのだろうな。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/28 17:08時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

  • WordPressのサイトがアクセスできなくなったので対応した話し

    お客さんからサイトがアクセスできなくなったと連絡がありました。こちらはWordPressで作ったサイトです。この前と同じようなエラーです。

    phpMyAdmin でMySQLデータベースにアクセスしてプラグインを無効にしてみます。無効の方法はエラーのページにあるトラブルシューティングに書いてある通りです。

    プラグインを無効にしてあげると正常にアクセスができるようになりました。今度もBackWPupプラグインが悪さしていると思って、一旦BackWPupプラグインを削除して、その他のプラグインを有効にしてみます。

    するとまだエラーがでてアクセスできません。

    ここは面倒でも一つずつプラグインを有効にしていって、どのプラグインがエラーになっているかを確かめてみます。

    エラーを起こしているのは、WP-SCSSプラグインでした。

    WP-SCSSプラグインを有効にするとエラーになります。そこでWP-SCSSプラグインを削除してしまいます。もし、SCSSからSCCの変換が必要であれば、自分でCSSに変換してCSSファイルに追加しておきます。

    以上で無事にWordPressのサイトにアクセスができるようになりました。同じエラーだからと言っても同じ原因だと決めつけてはいけません。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/28 17:08時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

  • BackWPupプラグインが致命的なエラーを起こしてWordPressサイトがアクセスできなくなった話し

    このサイトはWordpressで構築されていますが、今朝アクセスできなくなっていました。エラーはこんな感じです。適当にディレクトリ名は隠しています。

    Fatal error: require(): Failed opening required '/home/(ユーザー)/www/(サイト)/wp-content/plugins/backwpup/vendor/composer/../amphp/amp/lib/functions.php' (include_path='/home/(ユーザー)/www/(サイト)/wp-content/plugins/backwpup/vendor/pear/pear_exception:/home/(ユーザー)/www/(サイト)/wp-content/plugins/backwpup/vendor/pear/console_getopt:/home/(ユーザー)/www/(サイト)/wp-content/plugins/backwpup/vendor/pear/pear-core-minimal/src:/home/(ユーザー)/www/(サイト)/wp-content/plugins/backwpup/vendor/pear/archive_tar:.:/usr/local/php/7.4/lib/php') in /home/(ユーザー)/www/(サイト)/wp-content/plugins/backwpup/vendor/composer/autoload_real.php on line 59
    
    このサイトで重大なエラーが発生しました。
    
    WordPress のトラブルシューティングについてはこちらをご覧ください。

    エラー表示を見るとBackWPupプラグインが悪さしていることが想像つきます。

    素直にWordPress のトラブルシューティングのページを見ています。解決方法がズバリ書かれています。まずはプラグインの無効化です。

    phpMyAdmin でMySQLデータベースにアクセスして(MySQLデータベースのサーバー、ID・パスワードを探すのに手間取った)、トラブルシューティングに書かれている通り

    1. wp_options テーブルの option_name カラム (フィールド) で active_plugins という行を見つける
    2. option_value フィールドの値を a:0:{} に変更する

    を実行して、サイトにインストールされているすべてのプラグインを無効化します。

    今度は正常にアクセスできました。プラグインが原因のようです。念のために一つずつプラグインを有効化して、どのプラグインがエラーを発生させているかを確認していきます。

    やはりBackWPupを有効にするとエラーになります。再度プラグインを無効化してBackWPup以外を有効にします。

    BackWPupを一旦削除して再インストールしてみます。今度はエラーが出ません。

    気になるのは、エラーになったBackWPupのバージョンが4.0と表示されていました。しかし、BackWPupの最新版は3.10なのです。プラグインの自動アップデートが、おかしなバージョンを配信してしまったのでしょうか?

    再インストールしてみると今度はバージョンが3.10になっています。今までのバックアップ設定も残っていたのは助かりました。設定が初期化されていたら、最初から設定しないといけないので面倒なくてよかったです。

    以上でWordpressのサイトで致命的なエラーになる件は解決です。今回の教訓はこちらです。

    WordPressで致命的なエラーがでたら、プラグインを無効にしてみよう。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/28 17:08時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

    追記(2022年11月20日)

    BackWPupプラグインは正常にバックアップを実行していました。

    続きの話しはこちらから

    同じようなエラーでしたが、WP-SCSSプラグインが原因でした。

  • まだWordPressのクラッシックエディタを使っているのと、WordPress div divサイトの話し

    こちらの話しの続きです。

    既にクラシックエディタでWordpressの記事を書けない体になってしまいました。もちろん、今書いているWordpressの記事もブロックエディタで書いています。

    ある案件で、Wordpressの既存のサイトを更新という案件があるのですが、これがまだクラッシックエディタで固定ページを作っているいうサイトです。しかも、記事をHTMLでdiv divと多用して作成していくという、私(だけ)が呼ぶところの「Wordpress div divサイト」です。

    お客さんからはクラッシックエディタを辞めてグーテンベルクのブロックエディタで作成してもいいよ、と言われているのですが、何とテーマがグーテンベルクに対応していない相当古いテーマ(有料なのに)なので、Gutenbergプラグインをインストールしても動きません。

    今更テーマを変更するなんて無謀なことができませんし、時間もお金もいただけないので、そのままdiv divのHTMLで作成していくことになります。

    問題のWordpress div divサイトは、その会社の支店で横にサイトがコピーされていきますので、支店が増えるたびにWordpress div divサイトが量産されていくことになり、またメンテナンスはdiv divで悩まされることになります。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/28 17:08時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

  • 外部リンクをPz-LinkCardプラグインとオリジナルパターンでWordPressのリンクカードを挿入した話し

    WordPressの記事中に外部リンクを貼り付けるには、今までは引用ブロックを使っていました。引用ブロックを使う場合は、貼り付けるページのURLとタイトルを拾って貼り付けていました。タイトルを貼り付けるの意外と面倒で、サイトのソースのtitleタグを見つけて拾ってきていました。

    意外と面倒くさい外部リンクの貼り付けを何とかしたいと思って考えてみました。

    最初は、ブロックに埋め込みリンクを探してみましたが、Twenty Twenty-Twoのテーマには残念ながら用意されていませんでした。仕方ないので、プラグインを探します。見つかったのは、Pz-LinkCardというプラグインです。以下のサイトを参考にしました。あまりプラグインを増やしたくないので、これまた仕方ありません。

    こちらはPz-LinkCardプラグインでリンクカードを生成しています。

    Pz-LinkCardプラグインをインストールしてみましたが、こちらの要求する機能はあります。貼り付けたカードはリンクカードとか、ブログカードと言うのですね。これは知りませんでした。oEmbedをサポートしているサイトなら、リンクカードを生成してくれます。

    Pz-LinkCardプラグインで生成されたリンクカードのデザインは、行間とかフォントスタイルなどが気に入らないところがありますので、スタイルシートを調整してしまいます。追加したスタイルシートは以下の通りです。Pz-LinkCardプラグインの設定も多少調整しています。

    .lkc-title-text,
    .lkc-domain,
    .lkc-title-text {
      font-family: var(--wp--preset--font-family--system-font) !important;
    }
    .lkc-content>div {
      margin-bottom: 10px;
    }

    あとは、リンクカードを使いしていくだけと思いましたが、Pz-LinkCardプラグインのショートコードをいちいち入力していくのも、これまた面倒です。最初は再利用可能ブロックで実現しようとしましたが、こちらは登録は簡単なのですが、いちいち通常ブロックに変換するのが面倒なのでやめました。そこで、WordpressのパターンにPz-LinkCardプラグインのショートコードを追加します。

    こんなコードをテーマのfunction.phpに追加します

    // Pz-LinkCard リンクカードショートカットのためのパターンを登録
    add_action('admin_init', function () {
      //1 パラメータの設定
      $pattern = [
        "title" => "Pz-LinkCard リンクカードショートカット",
        "categories" => ["original", "featured"],
        "descripiton" => "",
        "content" => '<!-- wp:paragraph --><p>[blogcard url=""]</p><!-- /wp:paragraph -->',
      ];
    
      //2 ブロックパターンの登録
      register_block_pattern($pattern["title"], $pattern);
    
      //3 カテゴリーの登録
      register_block_pattern_category('original', ['label' => 'オリジナル']);
    });

    参考にしたのはこのサイトです。こちらのソースを丸ごとコピーさせていただきました。

    こちらはサイトがWordpressなのでリンクを貼り付けるだけでリンクカードを自動的に生成してくれます。

    以上のサイトの通りに書くとパターンのカテゴリーがオリジナルだけになります。それだけではカテゴリーからオリジナルを選択してなんて作業が一つ入ってこれまたまた面倒なので、パターンの最初に表示されてくる”注目”カテゴリーにPz-LinkCard プラグインのショートカットが表示されるように追加しています。こちらでこのようにパターンにPz-LinkCardプラグインのショートカットが表示されます。

    このパターンを選択すると、以下のショートカットが記事に挿入されます。

    [blogcard url=""]

    こちらのショートカットのダブルクォーテーションの中に外部リンクで表示したいサイトのURLを貼り付ければリンクカードが表示されるはずです。

    もし、リンクカードが表示されない場合は、サイトがoEmbedをサポートされていないので諦めて引用ブロックやリンクで誤魔化しておきましょう。

    Pz-LinkCardプラグインを使わなくてもWordpressのほうでリンクを貼り付けてあげれば、自動的にリンクカードを生成してくれればいいのです。現にリンクを貼り付けてあげれば、一応はタイトルやサムネール画像が表示してくれるので、一応はサイトの情報は取得してくれているのではないかと思います。しかも外部リンクがWordpressのサイトであれば、今も自動的にリンクカードにリンクを変換してくれています。すべての外部リンクがリンクカードにしてくれるように望みます。

    以上、面倒なことを重なってPz-LinkCardプラグインを使ってリンクカードを生成する話しでした。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/28 17:08時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

    追記(2022年10月19日)

    現在、主立ったページのあるリンクを引用ブロックからPz-LinkCardプラグインのリンクカードに手作業で変更しています。

    リンクで気になったのは、あるページでリンク先がアダルトサイトへのリンクに置き換わっている箇所があったことです。おそらく、リンク先が乗っ取られたのでしょうか? リンクを外しておきましたが、外部のリンクを埋め込む場合には注意が必要です。

    追記(2022年10月31日)

    最近Wordpressがアップデートしたようで、パターンの選択が味気ないUIに変わってしまった。プレビューが最初に表示されなくなったのは寂しい。

    今まではパターンを選択すれば、すぐにPz-LinkCardプラグインのショートカットが選択できたのに、一度「注目」か「オリジナル」のメニューを選択しなければいけなくなった。ワンクッション動作が増えるのは、なにげに面倒である。

    WordPressは、たまにこのようによく使う機能へのUIが変わってしまうのは辛い。

  • WordPressの画像ブロックのテキスト回り込みがモバイルでアクセスしたときに気持ち悪いので対応の話し

    WordPressでグーテンベルクを使っていますか? 私は完全にクラッシックエディタからグーテンベルクに乗り換えました。多少、ブロックエディタは融通が利かないのですが、その一つの対応の紹介です。

    画像にテキストを回り込ませたいときには、画像ブロックの配置の設定で左寄せ、右寄せで簡単に設定できます。例えば以下のように実現できます。グーテンベルクのブロックエディタでプレビューがおかしいというのは置いておいて・・・。

    これをモバイルからアクセスするとこんな感じになります。

    左のマージンがそのままですので、画像が右に寄って気持ち悪いですね。おそらく今使っているTwenty-Twenty-twoのテーマが細かくモバイルに対応していないのが原因でしょう。

    そこでちょっとスタイルを改造してしまいます。本来ならばwenty-Twenty-twoテーマのスタイルシートを編集すれば素直なんですが、今回は簡単に画像にクラスを設定して、JetpackのカスタムCSSで対応してしまいます。まずはJetpackのカスタムCSSを有効にしてください。

    画像ブロックに追加CSSクラスで適当にクラスを設定しておきます。今回は、inline-imagesとしておきました。すべての画像ブロックの回り込みを修正したいときには、やはりテーマから修正したほうがいいでしょう。

    WordPressの「外観」-「追加CSS」で以下のCSSコードを追加しておきます。

    @media (max-width: 600px) {
      .inline-images {
        float: none!important;
        margin: 0 auto!important;
      }
    }

    !importはあまり使いたくないのですけど、テーマによっては深いクラスを書かなければいけないので、これでよしとします。モバイルの画面幅はサイトに合わせて適当に変更してください。後は適当にスタイルを設定してください。画像幅の設定をやった方がいいかもしれません。

    これでモバイルでアクセスしたときに、テキストが回り込まずに画像が中央に配置されています。

    気に入らないブロックのスタイルは、追加CSSを設定して修正してしまいましょう。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/28 17:08時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。