WordPress

[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した(calc, vw) とりあえずのメモ

[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した(calc, vw)

PageSpeed Insightsで計測したときに、CLS(Cumulative Layout Shift)が「0.33(不良)」になるのが気になっていました。主な原因は、トップページで表示しているカルーセルです。CSSの calc() を使って、画面の幅からカルーセルの高さを計算することで、CLSを 0 に改善できました。カルーセルがCLSに悪影響しているCLS(画面ズレ)が起こるのは、トップページにある「カルーセル」が原因です。確かに、サイトの表示を見てみると、一度 広...
【検討中】 jquery-migrateを減らしてみたけど、戻した [WordPress] とりあえずのメモ

【検討中】 jquery-migrateを減らしてみたけど、戻した [WordPress]

PageSpeed Insightsで「レンダリングを妨げるリソースの除外」を見てみると、jqueryに関する2つのスクリプトが目につきました。(Google CDN)jquery.min.js?ver=3.6.1(Cloudflare CDN)jquery-migrate.min.js?ver=3.0.1これを除外できないか試みてみました。jQueryスクリプトを入れ替えjQueryのスクリプトを入れ替えてみます。(参考)jQuery CDNfunction refresh...
[WordPress] サイト高速化のために不要なプラグイン処理を減らした(Plugin Load Filter, Site Kit by Google) とりあえずのメモ

[WordPress] サイト高速化のために不要なプラグイン処理を減らした(Plugin Load Filter, Site Kit by Google)

ページ表示速度を改善するため、Plugin Load Filterプラグインでトップページの Site Kit などを無効化した。PageSpeed Insights のパフォーマンスが「54」から「70」に改善できた。(「使用していないJavaScriptの削減」が 2.4 s ➤ 0.4 s に)プラグインの取捨選択は、サイト高速化にとってもオススメだね。ページの読込みが遅い気がする【54】モバイル端末でのトップページの読込みがやや遅い気がします。(2023/07/02 ...
[WordPress] プラグインの更新をしたら「Briefly unavailable」 とりあえずのメモ

[WordPress] プラグインの更新をしたら「Briefly unavailable」

WordPressのプラグイン更新を実行したら、進捗状況の画面ではなく「一時的に利用できない」というエラーが表示されました。そのまま 1分ほどしてサイトを表示し直してみたら、問題なく表示できました。プラグインの更新もちゃんと1つ進んでいました。グレーの画面に焦ったけど、プラグインの更新に時間がかかっただけだね。プラグインの更新をしたらエラー画面WordPressのプラグインの更新を開始したら、 エラー画面が表示されました。Briefly unavailable for sch...
[Cocoon] AMPとPWAをオフにした とりあえずのメモ

[Cocoon] AMPとPWAをオフにした

WordPressのテーマ、Cocoonのアップデートがあり、2.6.1になりました。興味深いのが、AMP・PWAが非推奨になったことです。Cocoon設定のAMPとPWA機能を非推奨化しました。AMP機能を有効化する(非推奨)PWAを有効化する(非推奨)これらは昨今のウェブ情勢を鑑みたところAMP・PWAを設定するメリットよりデメリットの方が上回ると考えられるからです。現時点で機能自体は利用できますが、後々に完全に廃止しようと思います。Cocoon 2.6.1公開。段落ブロ...
[WordPress] 自作プラグインに投稿文字数を計測するスクリプトを追加した【dbDelta】 とりあえずのメモ

[WordPress] 自作プラグインに投稿文字数を計測するスクリプトを追加した【dbDelta】

自作 WordPressプラグインに、一日の投稿文字数をカウントする機能を追加しました。大まかな処理の流れはプラグインの有効化時に投稿文字数カウント用のデータベースを作成するプラグイン表示時に、累計の投稿文字数を追加する(ただし、同じ日付のデータがあれば更新する)管理メニューでデータベース集計を表形式で表示する一日の成果を文字数で把握できると、ちょっとモチベーションアップになるかも?前回はこちら。データベースの作成(dbDelta)一番手間取ったのは、データベースを作成する処...
[WordPress]記事ごとの平均PVを集計するサブメニューを自作プラグインに追加した とりあえずのメモ

[WordPress]記事ごとの平均PVを集計するサブメニューを自作プラグインに追加した

どんな記事が安定して読まれているのか把握するために、平均PVを調べたいと思いました。前回作った月別ページビュー集計の自作プラグインに追加します。前回はこちら。管理ページにサブメニューを追加する(add_submenu_page)最終的に出来上がったのがこちら。ブログの勢いを将棋の駒でランク付けしています。書いた記事が、駒得で変換されるのでモチベーションが上がります。野球が好きなら、ヒットやホームランでもいいんだろうね。まずは、メニューに項目を追加します。WordPressプラ...
[WordPress] サイトのデータベースが接続できなかったけど修正できた(MySQLデータベースの確認) #PR含む

[WordPress] サイトのデータベースが接続できなかったけど修正できた(MySQLデータベースの確認)

WordPressの記事投稿中にインターネット接続が不安定になったのか、WordPressサイトがエラーになってしまいました。サーバ管理画面で「MySQLデータベース」をチェックしたら、復旧することができました。エラーから原因を考える「Error establishing a database connection」と表示されているので、データベース接続に問題があるようです。Error establishing a database connectionThis either...
【未解決】埋め込んだTwitterのフォントサイズを小さくしたい(けど、いったん断念)[WordPress] SNS

【未解決】埋め込んだTwitterのフォントサイズを小さくしたい(けど、いったん断念)[WordPress]

ただ、ツイートの埋め込みの文字サイズを本文に揃えたいだけなのに、めちゃくちゃ大変……。Twitterのツイートは、「ツイートを埋め込む」からコードを表示して、HTMLに埋め込むことができます。ところが、枠の幅や文字サイズなどは、ウェブサイトと異なるスタイルが適用されます。結論としては、あれこれ調べましたが、諦めました。「埋め込みツイート」が Twitterの仕様変更に依存しているので、サイト側で変更してもすぐに元に戻ってしまうからです。「twitter-tweet」のクラスを...
WordPress 6.2にしたら画像の「キャプション」がなくなった?【キャプションを追加】 とりあえずのメモ

WordPress 6.2にしたら画像の「キャプション」がなくなった?【キャプションを追加】

WordPress 6.2 にしたら、写真の下のキャプションの欄がなくなっているよ💦画像ブロックを選択すると、操作メニューに「キャプションを追加」ボタンがあります。画像の説明文は、必要なときに「追加」するようになりました。キャプションがない?WordPressでは、画像の下に説明文を入力できます。「キャプション」です。ところが、WordPress 6.2に更新したら、見つかりません。「キャプションを追加」ボタン実は、画像ブロックを選択すると画面上に「キャプションを追加」のボタ...
WordPress 6.2に更新したら「アウトライン」がなくなった?【リスト表示】 とりあえずのメモ

WordPress 6.2に更新したら「アウトライン」がなくなった?【リスト表示】

あれ?WordPress 6.2にアップデートしたら、「見出し一覧」がなくなっているよ。記事の構成を推敲するときに、見出し一覧をみる「アウトライン」が重宝します。WordPress 6.2 では、編集画面の「リスト表示」と一体化したボタンになりました。いったん「リスト表示」にしてから、タブから「アウトライン」に切り替えます。アウトラインを表示したまま編集できるようにもなっています。WordPress 6.1までは、画面左上に「( i )(詳細)」のボタンがありました。ほかにも...
[WordPress] テーマの更新があったので実行した とりあえずのメモ

[WordPress] テーマの更新があったので実行した

WordPressでは、更新情報が画面上や管理メニューの「更新」から確認できます。WordPress本体だけでなく、プラグインやテーマなども随時更新されているので、毎週のように何かしらの更新があります。更新するものを選択したら、「更新」ボタンを押すだけです。自動的に「メンテナンスモード」に以降し、完了すると戻ります。ちなみに、ごくまれに更新に失敗することがあります。私は一回経験しています。その場合、メンテナンスモードのままなので、サイトにアクセスなくなります。事前にバックアッ...
[WordPress] 投稿月でグループ分けした月別PV集計表を見るためのカスタムプラグインを作った【ChatGPTと】 とりあえずのメモ

[WordPress] 投稿月でグループ分けした月別PV集計表を見るためのカスタムプラグインを作った【ChatGPTと】

一ヶ月分のブログ公開がどれぐらいのページビューにつながっているのか、集計する自分用のWordPressプラグインを作成しました。自分にとっては未経験の分野でしたが、対話型AI「ChatGPT」に相談してみると、使える叩き台を用意してくれました。WordPressプラグインづくりははじめてでしたが、かなりの時間短縮。無事に完成しました。アクセス集計プラグイン一ヶ月分のブログ公開が、どれぐらいの成果になっているのか知りたいことがあります。これまでは、Google Analytic...
[CSS] ブログの記事一覧をInstagramっぽくしたい(いったん断念) とりあえずのメモ

[CSS] ブログの記事一覧をInstagramっぽくしたい(いったん断念)

ひとこと日記のアイキャッチ画像を、Instagramのように大きく表示できるようにしたいと思いました。カスタムHTMLウィジェットでスタイル設定カスタムHTMLのウィジェットで、styleを追加すると、特定のページにスタイルを追加できました。<style>.entry-card-snippet { display: none;}figure.entry-card-thumb { padding-bottom: 0em;} .entry-card-thumb { width: ...
[Cocoon] 表のスタイルで縦線をなしにした【横線のみのtable】 とりあえずのメモ

[Cocoon] 表のスタイルで縦線をなしにした【横線のみのtable】

最近は、表のデザインで、縦の枠線を付けないことが多いようです。Spotifyの「支払いに問題がある」?【クレジットカード情報の更新】より確かに、スッキリした印象になります。ブログ内の表を CSS を変更してみました。「border-width: 2px 0px;」という箇所が肝。横線(border-top, border-bottom)は 2px縦線(border-left, border-right)は 0px に指定されます。/** 表の枠の色(縦線なし) 2023-03...
[Cocoon] 表のデフォルトの枠線が黒になっている(style.min.css) とりあえずのメモ

[Cocoon] 表のデフォルトの枠線が黒になっている(style.min.css)

公開したブログ内の表の枠の色が、なぜか黒に変わっていました。原因は、「style.min.css」。この中に表(table)の枠線の色のスタイルがあるのですが、これが Cocoonのスタイルと競合しているのです。サイトの表の枠の色がおかしい?表の枠の色が、WordPressの編集画面ではオレンジなのに、公開すると黒になっていました。どうも、デフォルトの色に戻ってしまっているようです。Cocoonの表の枠の色Cocoonでは、テーマで選んだ色(サイトキーカラー)がスタイルでまと...
WordPressサイトはどうやってできているの?【3つのログイン】 わかりやすさ重視

WordPressサイトはどうやってできているの?【3つのログイン】

WordPressに興味があるのですが、どんなものなのですか?なんとなく、エディタでHTMLを作成するのと、ブログサービスに登録することの中間みたいな印象はあるのですが……。3つのログインページWordPressサイトの成り立ちを知るには、WordPressサイトを管理するための3つのログイン画面を知ることが近道です。レンタルサーバー企業の会員ページ借りたサーバーの管理ページWordPressの管理ページレンタルサーバの契約WordPressサイトを作るには、まずはレンタルサ...
「WordPress」とは? インターネット小話

「WordPress」とは?

「WordPress」を使えば 「自分専用」のブログシステムが作れます。レンタルサーバーにインストールして使います。
[Cocoon] 記事の関連タグをサイドバーに表示した・その2(ショートコードにできた) とりあえずのメモ

[Cocoon] 記事の関連タグをサイドバーに表示した・その2(ショートコードにできた)

結論としては、the_tag_links() ではなく、get_the_tag_links()を呼べばよかっただけでした。以前の方法の問題点以前、記事の関連タグをサイドバーに表示するときに、ショートコードにできず、テキストウィジェットでPHPコードを実行する、という方法でむりやり解決していました。ただし、この方法はウィジェットを確認するたびに、ビジュアル表示になって「コードが評価」されててまうため、作り直しが必要でした。ウィジェットを確認するだけで壊れてしまうのです……その後...
Cocoonで作った注目記事ランキングのショートコードを修正した とりあえずのメモ

Cocoonで作った注目記事ランキングのショートコードを修正した

Cocoonテーマのコードを利用して、自前の「注目記事ランキング」を作っていたのですが、更新によってエラーになってしまいました。改めて、コードを修正して直すことができました。サイトのPHPにエラーがある教室ホームページを見たら、ページにエラーが表示されて、レイアウトが崩れていることに気づきました。(2022年10月17日)。このサイトで重大なエラーが発生しました。WordPressのトラブルシューティングについては、こちらをご覧ください。このエラーは、WordPressサイト...