WordPress

Cocoonで注目記事ランキングのショートコードを作成した【SQLって何?からのデータベース操作】 ニッチな話題

Cocoonで注目記事ランキングのショートコードを作成した【SQLって何?からのデータベース操作】

記事のアクセスランキング(人気記事)は、なかなか上位の記事が変わらない傾向があります。そこで、WordPressの記事のアクセス数の前週比のランキング(急上昇の記事)を作りたいと思いました。Cocoonのコードを読んでみるとアクセスランキングは、SQLクエリで生成されていました。完成したものCocoonのget_access_ranking_recordsのSQLクエリCocoonのアクセスランキングは、「lib/page-access/access-func.php」の「f...
[Cocoon] 記事のタグをサイドバーに表示した(タグクラウドではない) インターネット小話

[Cocoon] 記事のタグをサイドバーに表示した(タグクラウドではない)

ブログのサイドバーの項目を見直してみました。WordPressのサイドバーに記事のタグを追加したカスタム検索とナビゲーションメニューの間に、・リンク・目次・タグ・関連記事を追加しました。とくに、記事のタグを追加するのが、大変だったのでメモします。「タグ」を表示する今回、サイドバーにタグを設置しようと思ったのは、検索が面倒な人に関連記事を探しやすくしたいからです。Cocoonテーマでは、記事のタイトル上下や本文下には、「タグ」を表示することができます。Cocoonの投稿にタグを...
AMP用ページを見やすくしたりメニューをつけたり(note風スタイル第7弾) ニッチな話題

AMP用ページを見やすくしたりメニューをつけたり(note風スタイル第7弾)

cocoonのAMP機能で生成しているCocoonテーマのAMP設定でAMPページを生成しています。通常ページとAMPページの差デフォルトスタイルだと、AMPページのスタイルは通常ページとだいぶ差があります。ヘッダーロゴが大きい。画面を圧迫しているモバイルメニューがない。検索からの流入が他のページに移動しにくい。そこで、メニューを追加したいと思います。ウィジェットにナビゲーションメニューを追加まずは、ウィジェットでナビゲーションメニューを追加します。ただ、このままだとメニュー...
Goolgle XML Sitemapsプラグインが検索で見つからない(改名していた) ニッチな話題

Goolgle XML Sitemapsプラグインが検索で見つからない(改名していた)

以前に紹介したGoolgle XML Sitemapsプラグインを、別サイトで利用しようとしたら、検索で見つかりませんでした。ポイント「Google XML Sitemaps」から「XML Sitemaps」に名前が変わっていました。プラグイン検索で見つからないプラグインで「Google XML sitemaps」で検索(2021年3月)3ヶ月前は確かにあったんです。プラグインで「Google XML sitemaps」で検索(2020年12月)プラグイン詳細で確認するすでに...
LiteSpeed Cacheプラグインをオン・オフで比較してみた ニッチな話題

LiteSpeed Cacheプラグインをオン・オフで比較してみた

LiteSpeed Cache(v3.6.4)プラグインの「キャッシュ機能」のオン・オフでどれぐらい違うのか、比較してみました(2021年3月23日現在)。もしかして、誤差の範囲……?もう少し詳しく比較してみましょう。比較無効のときプラグインが無効のときも比べてみます。オフのときオンにした直後オンにして再分析比較結果 モバイルのラボデータ無効オフオン(直後)オン(2回目)First Contentful Paint(秒)2.32.12.12.1Speed Index(秒)5....
Cocoonで記事一覧の画像と文字の位置を逆にした(note風スタイル第6弾?) インターネット小話

Cocoonで記事一覧の画像と文字の位置を逆にした(note風スタイル第6弾?)

久々にホームページのCSSをいじりました。今回は、記事一覧の画像と文字の配置です。これも、note風スタイルの一環ですね。大きな字で見やすいタイトルと正方形のアイキャッチアイキャッチ画像より、タイトル文に目がいくようにする意図で、変更しました。常に左から読んで行けるほうが、目にラクな気がします。といって、そこまでブログ一覧はアクセスがないんですが……笑CSSCSSはこんな感じです。display: flexで下位の要素の順番(order)を変更できるようにしています。/** ...
WordPress 5.7にアップデートした 【インサータからドラッグ】 インターネット小話

WordPress 5.7にアップデートした 【インサータからドラッグ】

ダッシュボードにWordPress 5.7の通知が来ていました。そろそろ更新してみるわたしはプラグインの対応を確認してから更新したいので、WordPress本体は自動更新にはしていません。しばらく放置していましたが、バックアップのタイミングで更新することにしました。失敗したら戻せばよいし。データをダウンロード中…2分ほどで更新できました。WordPressのアイキャッチは、毎回 美しいですよね。メジャーアップデートで機能が増えたWordPress 5.6.2から 5.7 にな...
WordPressのエディタが異常に遅い? 【バージョン更新の意味】 ニッチな話題

WordPressのエディタが異常に遅い? 【バージョン更新の意味】

WordPressで「エディタ画面が異常に遅い」という相談を受けました。これは、WordPressとテーマのバージョン相性が原因でした。結論エディタの反応が異常に遅かったが、WordPressとテーマを最新版に更新すると直った。入力可能になるまでちょっとタイムラグエディタ画面で操作すると、マウスでクリックしてから、入力可能になるまで、ちょっとタイムラグがあります。エディタ画面の不具合は遅いだけでなく、文字色も反映されなかったり、CSSがうまく動作していないようでした。バージョ...
「index.php?xml_sitemap=params=」XMLサイトマップのURLがおかしい?  【WordPressのパーマリンク】 ニッチな話題

「index.php?xml_sitemap=params=」XMLサイトマップのURLがおかしい? 【WordPressのパーマリンク】

XML Sitemapsプラグインで、XMLサイトマップを作ったけれど、なんかアドレスがおかしい。結論WordPressのXMLサイトマップのURLが「index.php?xml_sitemap=params=」なのは、パーマリンク設定が「基本」だから。それ以外の設定に変更すると、「sitemap.xml」にできる。XML Sitemap Generatorプラグインを確認するXML Sitemapのプラグインには、サイトマップのインデックスファイルのURLが表示されています...
[Cocoon] カルーセルの「CLSに関する問題」を改善したいけれど難しそう ニッチな話題

[Cocoon] カルーセルの「CLSに関する問題」を改善したいけれど難しそう

読んでいる文章をずらされると腹が立つだろう。だから、そういうページは直した方がよい。さて、どうやって? という話。CLS(累積レイアウト変更)とはウェブページはあとから画像が表示されると、下にある文章がずれます。これを「累積レイアウト変更(CLS:Cumulative Layout Shift)」といいます。広告が多いページだと気になるのよねーユーザーの利便性が大事Googleサーチコンソールでは、このようなレイアウトのずれを指摘してくれます。CLSに関する問題:0.25超(...
Googleアドセンスのアンカー広告を下に固定する[Cocoon] ニッチな話題

Googleアドセンスのアンカー広告を下に固定する[Cocoon]

スマートフォンのユーザーの画面上下にずっと表示する広告を、アンカー広告(あるいはオーバーレイ広告)といいます。アンカー広告がメニューバーと重なると不便なので、今回はGoogle広告のアンカー広告の位置を変更しようと思います。ウェブサイト運営者向けの話ですポイントスクリプトで上部アンカー広告を抑制できる。上下にメニューがあると、アンカー広告の配置に影響がある。【追記】パソコン画面にも表示されるようになります。(2021年7月9日)追記(2023-07-17)アンカー広告の位置指...
note風スタイル第5弾!引用とコード ニッチな話題

note風スタイル第5弾!引用とコード

note風デザインもそろそろ簡単な微調整です。今回は引用文(blockquote)とコード(pre)のデザイン。ビフォア・アフター元のデザインに比べて、小さくグレー基調にしました。以前は引用部分が長いと「うるさい」印象があったので、全体が見通せるようになりました。ただ、文字は少し小さいかもしれません。こんな感じの引用。こんな引用元code is here { something.}引用ブロック引用ブロックは、かなりスッキリしました。.entry-content blockqu...
note風スタイル第4弾!目次のデザイン ニッチな話題

note風スタイル第4弾!目次のデザイン

「note風スタイル」ということで、ブログのスタイルシートを編集しています。今回は、目次について。主な変更点は……文字を細く・小さく・薄く背景色をグレーに項目の間に線を追加noteの目次の特徴は、「控えめ」なこと。記事によっては目次を付けていないものも多いです。目次(table of contents)のHTML構造.toc.toc-title.toc-contentol.toc-listliaリスト構造(ol, li)とアンカーリンク(a)の関係で、かなり複雑な入れ子になっ...
[Cocoon] ブログ記事の作成日時・更新日時を2段にする 【white-space pre】 ニッチな話題

[Cocoon] ブログ記事の作成日時・更新日時を2段にする 【white-space pre】

ブログ記事のタイトル部分のスタイルを少しいじりました。作成日時と更新日時を2段になるようにしました。こちらがCSSです。.entry-header .date-tags { order: 3; color: #a8abb1; font-size: 16px;}.entry-header .date-tags .post-update:after { content: "\A" ; white-space: pre ;}少し、文字の色や大きさも変更していますが、メインになるのは...
WordPressのバックアップ復元がずっと終わらない…… 【Softaculous】 ニッチな話題

WordPressのバックアップ復元がずっと終わらない…… 【Softaculous】

ヒヤリとした話です💦WordPress 5.6のアップデートが思うようにいかず、いったんバックアップから5.5に復元することにしました。そのときに、バックアップ作業がずっと進まない状況になったので、レポートします。注意バックアップに失敗するとデータを失う場合があります。十分に注意した上で、自己責任で操作して下さい。WordPress 5.5に戻したいWordPress 5.6にアップデートしたところ、よく使っているプラグイン(Change Block Keywords)が対応...
note風スタイル第3弾! Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】 ニッチな話題

note風スタイル第3弾! Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】

Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。これもnoteのデザインを参考にしています。タイトルと本文の位置が近くなるので、読みやすいですよね。Cocoon設定やPHP編集もいいけれど……アイキャッチ位置を変更する方法をざっと調べると…Cocoonの設定でアイキャッチを非表示にして本文中に画像挿入する方法content.phpを書き換えて表示位置を変更する方法が紹介...
note風スタイル第2弾!モバイルメニューを編集 ニッチな話題

note風スタイル第2弾!モバイルメニューを編集

こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート(CSS)を変更しました。前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。今回のメインは モバイルメニューです。どうすれば、スマホユーザーにとって集中して読みやすいか、というテーマでnoteのUIを参考に、ブログのスタイルをいろいろ試してみましたので、レポートします。モバイルメニューボタンをいろいろ変更した上部バーはすっきりさせました。下部バーはLINE登録、ツイッ...
LiteSpeed CacheがアップデートされてJQueryが遅延読込みされている 【ただしサイトスピードは高速化】 ニッチな話題

LiteSpeed CacheがアップデートされてJQueryが遅延読込みされている 【ただしサイトスピードは高速化】

ほとんどタイトルが全てなんですが、LiteSpeed Cacheプラグインのアップデートについてメモしておきます。プラグインのアップデート一つでこんなに変わるんですね。LiteSpeed Cacheのバージョンが3.5.0.1にアップグレードされたLiteSpeed CacheはWordPressのプラグインで、mixhostサーバーではサイトスピード向上のために利用することができます。最近(2020年9月29日)バージョンが3.4.2→から3.5にアップデートされました。そ...
[mixhost] 自分のサイトにアクセスできない【データベース接続確立エラー】 #PR含む

[mixhost] 自分のサイトにアクセスできない【データベース接続確立エラー】

ブログの編集をしていたら、いきなりアクセスできなくなりました。どうもレンタルサーバの一時的なエラーで、1時間ほど待つと無事に復旧されました。はじめてのことでびっくりしましたので、その顛末を記録しておきます。Error establishing a database connectionとは?自分のサイトにアクセスしたら、こんなメッセージが表示されました(2020-09-26 17:33)。Error establishing a database connectionThis...
[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた ニッチな話題

[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた

Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。ビフォー・アフターを比べる元のデザインがこれでちょっとラベルボックスに比べると間延びしている気がします。こんなふうにしました。ほんとはさらにリストタイトルをラベルのようにしたかったんですが、ボーダーをつけるdiv要素を変えるのは大変だったので、やめました。Cocoonのラベルボックスのいいところ記事の中のポイントが目立って、読みやすいことです。Cocoonのアイコンリス...