お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。

Google Search Consoleで状況を確認してみることにする。(Google Analyticsやレンサバのログ解析も似たような結果になっている)

アクセス数は以前よりかなり落ちている。これはタイミングの問題かもしれない。もし、CMS変更が原因であれば、URL変更やHTMLの構造変更が影響しているのだろう。少なくともコンテンツは丸ごと移してるし、URLのリダイレクトもほとんどは機能しているはずだ。いや実際に機能しているかまで確認はしてないが…。

クリック数は落ちているがクリックレートは維持されていることが読み取れる

まぁアクセスが多くても負荷が高まってサーバーが落ちたりするので、このくらいが程よいのかもしれない。

またインデックスについては未登録URLがグッと増えた。グラフを見る感じWordPressのURLがまるっと未登録になり、adiaryの分が増えた感じだろう。adiaryの方が記事URLに対してサイトマップの登録率が高いが、これはadiaryとWordPressでサイトマップのファイル構成が異なることに起因している可能性がある。例えばadiaryはサイトマップが1ファイルなのに対し、WordPressは複数ファイルであるため、Google側の解釈に差が出ているとか、そもそもXMLの内容も違うはずなので、色々影響しているのかもしれない。

未登録URLが増え、登録済みURLも増えたことが読み取れる

インデックス状況についてはWordPressの頃は手動登録しないとインデックスされないことが少なくなかったが、adiaryでは何もせずともインデックスされるので、ここについては大きく満足している。やはりこれはWordPressよりadiaryの方が早いことに起因しているだろう。

投稿日:
ソフトウェア::CMS::WordPress

前々からGoogle Search Consoleがエラーでクロールできないと言っていたのだが、最近サイトがダウンしている瞬間に出くわすことが増え、やっと意味が分かった。負荷によってMySQLに繋がらない状態になっているのだ(ブーストすると解除されたので、恐らく何かしら制限かかけられているのだろう)

かつてMovaleTypeからBlognに移った時はテキストDBだったので軽くなり、BlognPlusに移った時にDBがMySQLになったのでサイトが重くなったのは記憶に深いし、WordPressにしてさらに重くなったのも記憶にある。うちはさくらのレンタルサーバーで共用なのでDBが重いのだと思う。

私が遭遇するのは深夜帯が多いが、このサイトはIT企業の業務時間中にアクセスが増える傾向があるので、そういったケースでも落ちている可能性がある(ログを見ていなないので推測だが)

更に昨日WordPressのテーマをアップデートしてからYet Another Related Posts Plugin (YARPP)のカスタムテーマが意味不明なエラーを吐き、動かなくなった。

エラーの内容は以下の通りだが、意味不明である。同じ行で同じ名前の関数が再定義されているとか言われている。

Fatal error: Cannot redeclare get_post_data() (previously declared in /wp-content/themes/sango-theme-child/yarpp-template-thumbnail.php:3) in /wp-content/themes/sango-theme-child/yarpp-template-thumbnail.php on line 3

というわけで、WordPressに見切りをつけるかどうか迷っていた矢先だったので、もうWordPressを捨てようと思った。早々にMarkdown parserを書いてadiaryに乗り換えるか、或いは表示が崩れている今でも乗り換えたほうがいい気がしてきたくらいだ。

週末を目途にadiaryへの移行作業を行おうと思う。幸いなことにWordPressからadiaryにリダイレクトするための.htaccessは2024/01/23の記事分までは作ってあるので、ちょっと足せば使える。

markedをadiaryのMarkdown parserに噛まして何とかするのも試したのだが、さつき構文がHTML化されてadiaryのパーサーが上手く食べてくれず、頑張って再パースする必要がありそうなので諦めた。そもそもMarkedのパーサーも地味にバグっていたり、注釈の出力が結構不便だったり不満はあるので、自分でパーサーを書くのは全然ありだと思った。或いはEditor.mdをadiaryにねじ込んで、どうにかしてさつき構文のパーサーを組み込めれば、それも一つだと思う。(が、こいつはクライアントサイドでHTMLを捏ねるのでadiaryの仕組みと相性が悪い)

何よりパーサーを書こうとしただけでブログ記事はポコポコ湧くし、Perlは面白いしで、いろいろ発見があり、退屈な日常が無駄に忙しくなったので、これは是非ともやっていきたいし、やろうという感じで、一旦WordPressを捨てadiaryに移ろうと思う。しばらく色んな記事で表示が崩れるだろうが、現状でもサイト自体にアクセスできないことがあると考えれば大差のない話だと思うし、どうでもよくなった。

むしろ能動的にサイトをいじれるほうがいいし、ある日突然謎のアップデートでサイトが壊れるとか、そういうのは要らないので、平穏なadiaryに移れれば精神的にも安定できるかもしれない。正直WordPress 5でGutenbergが実装されたときとか、軽く絶望したわけで…。Classic Editorがなかったらやっていけないレベル。

というわけで、十数年ぶりの真っ当なサイト制作、再開していきますか~

adiaryという和製CMSがある。昔どこかで見たような懐かしい見た目のCMSだ。

書き口ははてなブログが近い。あちらは、はてな文法とMarkdownが使えるように、こちらはさつき文法とMarkdownが使える。

お試しで簡単に作ってみて、こちらのブログの記事をある程度移植してみたのだが、使い勝手もいい。

試しに作ってみたもの

まずサイドバーのタグツリーだ。WordPressではこんなものは作れないし、ツリーのタグをクリックすると記事の一覧が取れて更にそこからフィルタをかけることができる。

サイドバーのタグツリーからタグを選ぶと、更に絞り込みをかけることができる

正直言ってこれはかなり魅力的だと思う。WordPressの検索プラグインは使い勝手が悪いものばかりで、ここまで本格的なものは私は知らない。これはブログをログ代わりに使っている私にとって非常に魅力的な機能だ。

しかも表示速度も速い。以下は測定サイトで比較した結果だが、adiaryの速さは明らかだ。というか普通に操作していても全然違う。

WordPress adiary
WordPressの表示速度1
adiaryの表示速度1
WordPressの表示速度2
adiaryの表示速度2

この圧倒的な速度差を見るとadiaryに惹かれてしまう。ぶっちゃけ今すぐにでも乗り換えたいぐらいだ。

しかし、個人的にはいくつか物足りない部分がある。それはadiaryがGitHub Flavor Markdownをそんなにサポートしていないことや、A11yやレスポンシブデザインへの対応状況が今一つなところだ。この辺りはリポジトリをフォークしたので時間があるときに自分好みにカスタマイズしていきたいと思う。

とはいえ、WordPressもそれはそれで捨てがたいところがあり、悩むところである…。あとあちらはプレビュー機能がないので書きづらい(WordPressのエディタと違ってチープなのでスマホで書くときは便利そうだが

しかしMarkdownさえ快適に書ければ今にでも乗り換えたいので、やはり乗り換えたい気がする。というか乗り換えないと一生手出ししない気もするしなぁ…。とはいえ表示バグってるしなぁ…(記事として一部読めないのがある

投稿日:
ソフトウェア::CMS::WordPress

YARPP – Yet Another Related Posts Pluginのサムネイル表示がどうにも気に入らなかったのでSANGOのスタイルに合わせるだけのやつを作りました。YARPPのカスタムテーマとしてSANGOのアドセンス関連記事型広告ウィジェットに差し込むことを想定しています。

こんな感じで、SANGO標準の関連記事表示と変わらないやつです。

カスタムテーマの見た目

Gistに置いてるので、もし欲しい人がいたら持っていって好きに改造して使ってください。

最初はプラグインにして配布しようとか思ったのですが、 構造的に無理だったので諦めました。パッと見はWordPressのエコシステムに上手いことインジェクションしてやってるのかと思ったのですが、内部の処理としてはYARPPがTemplateファイルをrequired_onceで読み込んで内部でWordPressのエコシステムを再現することで実現しているという事が解り、YARPPの管理外にあるプラグインでは実現が難しかったため、一番無難なテンプレート形式に収めて終わりにしました。

投稿日:
ソフトウェア::CMS::WordPress

WordPressの組み込みURL埋め込みがクソなので自作しようとしたら意味不明な挙動に出会ったので残しておく。

確認環境

  • WordPress 6.2
    • Classic Editor

起きた現象

端的に書くとshortcodeでAタグの中にブロック要素を含ませるような出力を記事本文中ですると初回だけAタグが外れます。

イメージ的にはこういう感じのやつ

<a href="https://example.com">
  <figure>
    <img src="https://example.com/foo.jpg" alt="" width="200">
    <figcaption>foo</figcaption>
  </figure>
</a>

例えば以下のような出力が起きます。ちょっとなんかかなりHTML崩壊してませんかね…?

理想 現実
理想の出力
現実の出力

参考までにショートコードを二回以上書くと二回目以降はPタグなどのゴミが混ざるものの理想に近い出力になります。原因は不明。WordPressのバグかなんかじゃないかな…。

再現コード

このショートコードを記事本文に二回書くと二回目にはAタグが効くことが確認できます。

function emb_test($atts) {
  $url = $atts["url"];
  $img = $atts["img"];
  $title = $atts["title"];

  return <<<EOD
<a href="$url>
  <figure>
    <img src="$img" alt="" width="200">
    <figcaption> $title </figcaption>
  </figure>
</a>

EOD;
}
add_shortcode('emb', 'emb_test');
出力結果
出力結果

何故起きるのか?

wpautop のせいだとは思います。この機能自体は普段記事を書く上で便利ですし、タグやカテゴリの説明にadd_filterしてやるといい感じに改行が反映されたりして便利なのですが、shortcodeの中に入ってくるとかなり邪魔ですね…。

因みにAタグの中にインライン要素を入れてる限り、この現象は起きないのですが、その場合CSSでブロック要素にする必要があるのと、セマンティクスとかコーディング的な微妙さを感じたので、それはしないことにしました。

取り敢えずWordPressで良い感じにURLを埋め込むのは余り現実的ではなさそうなので諦めることにしました。正直WordPress 組み込みの埋込機能は使い勝手が悪く微妙です。有名SNSだけ埋め込めればいい人にはこれでいいでしょうけど…。

仕方がないので5年くらい前に使って体験が微妙だった Pz-LinkCard を使ってみたらかなり良くなっていたので、Pz-LinkCardを使うことで解決することにしました。ありがとうPz-LinkCard…ありがとう…。

コードの供養

書いたけど期待通り動かなかった本来やりたかったコードです。

function embed($atts) {
	$url = count($atts) > 0
	  ? $atts[0]
	  : "";
    $dom = new DOMDocument();

    $data = wp_remote_get($url);
    if (is_wp_error($data)) {
        return;
    }

    $html = $data['body'];
    $doc = new DOMDocument();
    @$doc->loadHTML($html);
    $metas = $doc->getElementsByTagName('meta');
    $title = '';
    $description = '';
    $image = '';
    foreach ($metas as $meta) {
        if ($meta->getAttribute('property') == 'og:title') {
            $title = $meta->getAttribute('content');
        }
        if ($meta->getAttribute('property') == 'og:description') {
            $description = $meta->getAttribute('content');
        }
        if ($meta->getAttribute('property') == 'og:image') {
            $image = $meta->getAttribute('content');
        }
    }
    if (!empty($title) && !empty($description)) {
		return <<<EOD
<a href="$url">
  <figure>
    <img src="$image" alt="$title">
    <figcaption>
    $title
    $description
    </figcaption>
  </figure>
</a>
EOD;
    }
}
add_shortcode('embed', 'embed');