WordPress

WordPressの定番の画像最適化プラグイン（EWWW Image OptimizerとImsanity）

WordPressの定番の画像最適化プラグイン（EWWW Image OptimizerとImsanity）

WordPressサイトの表示速度を向上させるには、EWWW Image OptimizerとImsanityという画像最適化プラグインが効果的です。EWWW Image Optimizerは画像圧縮に優れ、Imsanityは画像サイズの縮小に特化しており、サイト規模に応じて使い分けるとよいでしょう。ホームページに画像を載せると、見た目は良くなりますが、画像が大きすぎるとサイトの読み込みが遅くなってしまいます。そこで、ホームページの表示速度を速くするために、プラグインで画像を...

2025.03.31 2025.04.09

とりあえずのメモホームページ運用

投稿画面が「フォーム型」のWordPressは何が違う？（カスタムフィールドとwp_postmeta）

投稿画面が「フォーム型」のWordPressは何が違う？（カスタムフィールドとwp_postmeta）

WordPressサイトには、通常の投稿形式とカスタムフィールドを使用したフォーム型投稿があります。カスタムフィールドは一貫した情報サイトを作るのに役立ち、データベースの「wp_postmeta」テーブルに保存されます。効率的に使うには、Custom Field Templateプラグインなどで、投稿タイプごとに入力形式・表示形式を設定するのが有効です。フォーム型投稿とシンプルなWordPressの違い設定してもらったWordPressサイトで記事を投稿しようとしたら、フォー...

とりあえずのメモプログラミングホームページ運用

もっとも原始的なWordPressのバックアップ（ダウンロード）

もっとも原始的なWordPressのバックアップ（ダウンロード）

WordPressサイトの手動バックアップは、FTPクライアントを使ったファイルのダウンロードとサーバのphpMyAdminを使ったデータベースのエクスポートの2つの作業が必要です。バックアップしたファイルとデータベースは日付をつけて外付けハードディスクやクラウドストレージに保存し、定期的に更新すると安心です。手動バックアップは技術的知識が必要ですが、プラグイン不要でサーバー負荷が少なく、特に小規模サイト運営者に適しています。手動バックアップの基本知識WordPressサイト...

2025.03.27 2025.03.28

とりあえずのメモプログラミングホームページ運用

【基本】WordPressサイトの運営で必要な「更新」とは？

【基本】WordPressサイトの運営で必要な「更新」とは？

WordPressサイトの運営には、システム本体だけでなくサーバー契約やドメイン管理など様々な更新作業が必要です。定期的にコア本体、テーマ、プラグインの更新を行うとセキュリティが強化されます。更新前にはバックアップを取り、計画的にメンテナンスすることでサイトを安全かつ快適に運営できます。「WordPressサイトの更新」と一言で言っても？これまで WordPressサイトを他の方に管理してもらっていたのですが、今後は自分で管理したいです。ドメインはムームードメインで、サーバー...

2025.03.27 2025.03.28

とりあえずのメモホームページ運用

WordPressサイトのデータのバックアップとは？（手動とプラグイン）

WordPressサイトのデータのバックアップとは？（手動とプラグイン）

WordPressサイトは、サイトのファイルをダウンロードしておけば、手動でバックアップできます。ただし操作が面倒なので、レンタルサーバーのバックアップ機能を利用したり、WordPressプラグインを追加したりします。レンタルサーバーの機能は簡単に設定できますが、プランによって機能に制限があります。BackWPupは柔軟な設定ができる一方で操作が複雑で、All-in-One WP Migrationは初心者でも使いやすいですがファイルサイズに制限があります。WordPress...

2025.03.27 2025.03.29

とりあえずのメモホームページ運用作業効率化

[WordPress]アイキャッチ画像を最適化してページ表示速度を改善しようとした（LCP）

[WordPress]アイキャッチ画像を最適化してページ表示速度を改善しようとした（LCP）

アイキャッチ画像のファイルサイズを小さくしつつ表示サイズを維持することで、WordPressサイトの表示速度を改善できます。子テーマのfunctions.phpに専用コードを追加すると、LCPの値が16,130ミリ秒から15,380ミリ秒へと少し短縮できました。理想的な表示速度にはまだ達していないため、サーバー応答時間の改善やLazy Load設定の見直しなど追加対策も必要です。 .title { font-size: 24px; font-weight: bold; fil...

2025.03.12 2025.03.13

とりあえずのメモプログラミングホームページ運用

[WordPress] ウィジェット構造をMarkdown形式で出力するプラグインを作ってみた

[WordPress] ウィジェット構造をMarkdown形式で出力するプラグインを作ってみた

WordPressのウィジェットは便利ですが、いじっているうちに「前はどうなっていたっけ？」という状況になることがあります。そんな時に役立つ、ウィジェットの構造をわかりやすく記録できるプラグインを作りました。このプラグインを使うと、現在のウィジェット配置とその設定内容をMarkdown形式で出力できます。WordPressのウィジェット構造をメモしたいWordPressでウェブサイトを作っているとき、サイドバーやフッターにあるウィジェットの調整は頻繁に行います。しかし、調整し...

とりあえずのメモプログラミングホームページ運用

WordPressの古いリビジョンをまとめるカスタムプラグインを作った

WordPressの古いリビジョンをまとめるカスタムプラグインを作った

WordPressの古いリビジョンを整理するカスタムプラグインを作成しました。このプラグインは一週間以上前のリビジョンから日ごとに最新の一つだけを残し、データベースの肥大化を防ぎます。管理画面からリアルタイムで進行状況を確認でき、毎日自動実行されるため効率的なサイト管理ができます。WordPressの記事保存の処理は、体感ではそこまで速くはなりませんでした。編集履歴を管理するプラグインを作ったWordPressで記事を保存する処理が遅くなってきた気がします。リビジョン（編集履...

2025.03.05 2025.03.06

とりあえずのメモプログラミングホームページ運用作業効率化操作には要注意

[WordPress]カスタムプラグインで投稿文字数の自動集計機能を追加した

[WordPress]カスタムプラグインで投稿文字数の自動集計機能を追加した

WordPressの投稿文字数を日々集計し、データベースに保存するプラグインを作成しました。従来は集計画面表示時のみ実行されていた処理を、記事保存時に自動実行するように改善しました。下書き保存時の処理は負荷を考慮して省略し、公開・更新・削除時のみ実行する仕様としました。

とりあえずのメモプログラミングホームページ運用作業効率化

[WordPress]ウィジェットタイトルを非表示にするCSS

[WordPress]ウィジェットタイトルを非表示にするCSS

WordPressの管理画面で多数のウィジェットを区別しやすくするため、タイトルをつけると便利です。しかし、管理用のタイトルがサイト上で表示されてしまうのは困ります。これは簡単なCSS設定で解決でき、サイト運営の効率が向上しました。ウィジェットタイトルの表示設定についてWordPressサイトでは、多数のウィジェットを配置していると、管理画面での区別が難しくなることがあります。各ウィジェットに管理用のタイトルをつければ楽です。しかし、サイト上でも表示されてしまうため、これまで...

2025.01.16 2025.01.17

とりあえずのメモプログラミングホームページ運用勉強中のメモ

WordPressの編集画面での差し替えた画像が古い状態で表示される？（画像キャッシュ）

WordPressの編集画面での差し替えた画像が古い状態で表示される？（画像キャッシュ）

WordPressの画像キャッシュ問題により、差し替えた画像が古い状態で表示されることがあります。これは、ブラウザのキャッシュと画像URLの仕様が主な原因でした。キャッシュが読み込まれないように、functions.phpに管理者用に JavaScriptのコードを追加して、動的に画像URLにタイムスタンプを付与するようにしました。WordPressの画像キャッシュ問題WordPressでサイトを運営しているのですが、差し替えた画像ファイルをプラグイン（Media Clean...

とりあえずのメモプログラミングホームページ運用

WordPress創設者とWP Engineの対立（OSSの難しさ）

WordPress創設者とWP Engineの対立（OSSの難しさ）

WordPressの共同創設者マット・マレンウェッグ氏とWP Engineの間で、商標使用と貢献度をめぐる対立が起きています。WordPress.orgはWP Engineからのアクセスを遮断しました。オープンソースと商業利用のバランス、コミュニティへの影響など、多くの課題を提起しています。「OSSで大きな利益を出したなら還元しろ」ってことなのかな。OSSはコミュニティで運営しているから個人開発より盤石だと思っていたけど、リーダーの一存であっという間に変質してしまうんだね。O...

とりあえずのメモニュースから考えるホームページ運用

ブロックエディタを狭い画面で表示するときの文字サイズを小さくした

ブロックエディタを狭い画面で表示するときの文字サイズを小さくした

ブロックエディタを狭い画面で表示する際の文字サイズを小さくしました。画面幅1080px以下の時に、文字や余白を調整するカスタムCSSを追加しました。これにより、AI画面を表示させた狭い画面でも、文章の全体像が見やすくなりました。ブラウザにサイドバーを表示すると「狭い」ブラウザのサイドバーにAI画面などを表示させると作業がスムーズになるものの、表示画面は狭くなります。特に、WordPressのブロックエディタを使っているときに、文章の全体像が見えにくく感じます。一時的にサイドバ...

とりあえずのメモプログラミングホームページ運用作業効率化

WordPressにSVG画像をアップロードできるようにした（functions.php）

WordPressにSVG画像をアップロードできるようにした（functions.php）

WordPressではセキュリティ上の理由からSVGファイルのアップロードが制限されています。functions.phpにカスタム関数を追加すれば、ブログエディタでのSVGアップロードを許可できます。ただし、アップロードを許可する場合、リスクも認識しておくことが大事です。「このファイルタイプ（SVG）をアップロードする権限がありません」WordPressにSVGファイルをアップロードしようとしたらエラーになりました。このファイルタイプをアップロードする権限がありません。fun...

とりあえずのメモセキュリティプログラミングホームページ運用

[Cocoon] ブログカードのHTML構造でCSSを整理した（style.css）

[Cocoon] ブログカードのHTML構造でCSSを整理した（style.css）

Cocoonテーマのブログカードの追加CSSを整理しました。ブログカードのHTML階層構造とメディアクエリで順序立ててまとめました。スタイルを追加するときは、はじめから構造を意識しておけばよかったね。style.cssに追加コードを整理したいstyle.cssに追加コードが増えて来たので、整理したいと思います。ただし、優先順位の問題があるので、並び順やCSSクラスの重ねた修飾の仕方も重要です。ブログカードの階層構造Cocoonテーマのブログカードは、HTMLの階層構造になって...

とりあえずのメモプログラミングホームページ運用

[WordPress]ランダムな記事へのボタンを追加した（functions.php）

[WordPress]ランダムな記事へのボタンを追加した（functions.php）

過去の記事を「掘り起こして」読んでもらう仕掛けとして「ランダムな記事へのボタン」を追加しました。WordPressブログにランダムな記事へのボタンを追加するカスタムウィジェットを作成しました。きっかけは、ブログの「アーカイブ」としての機能を強化したいと思ったからです。カスタムウィジェットを作成するPHPコード前の記事、ランダムな記事、次の記事へのリンクを表示するカスタムウィジェットを作りました。WordPressテーマのfunctions.phpファイルの末尾に追加したら、ウ...

とりあえずのメモプログラミングホームページ運用

[WordPress] H2タグの文字の前に番号を追加するカスタムスクリプト（functions.php）

[WordPress] H2タグの文字の前に番号を追加するカスタムスクリプト（functions.php）

H2タグの前に番号を付けるために、WordPressの functions.php にカスタムスクリプトを追加しました。H2タグを検出し文字列を置き換える処理を、フィルターとして 'the_content'に追加します。H3タグでも同様に階層的な番号付けができます。

とりあえずのメモプログラミングホームページ運用

[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS）

[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS）

WordPressサイトで、ワイド画面の左側の空きスペースを活用し、目次を左サイドバーとして表示するカスタマイズを行いました。このカスタマイズは、使っていないウィジェットエリアを、CSSで転用して実現しています。画面幅に応じて表示を切り替える仕組みも導入し、小さな画面では従来の記事内目次を表示するようにしました。すぐに見出しに飛びたいパソコンで記事を読んでいるときに、スムーズに見出しに移動できるように、左サイドに目次を追加しました。従来の目次は、導入文の後（１つ目の見出しの前...

2024.08.29 2024.08.30

とりあえずのメモプログラミングホームページ運用

[Cocoon] アイコンリストで二項対立のスライドを作るCSS

[Cocoon] アイコンリストで二項対立のスライドを作るCSS

2つの事柄を対比して説明することが多いです。毎回、Keynoteで図解を作るのは大変。テキスト入力だけでかんたんに作成できると便利です。そこで、Cocoonテーマのアイコンリストを二項対立のスライドにするCSSを作りました。追加CSSクラスにslide dichotomyを入れるアイコンリストの追加 CSS クラスに「slide dichotomy」を入力すると、二項対立（dichotomy）のスライドになります。追加されたCSSポイントは、 display: flex; j...

2024.08.18 2024.08.19

とりあえずのメモプログラミングホームページ運用

[WordPress]画像キャプションをalt属性を自動設定するカスタムスクリプト（functions.php）

[WordPress]画像キャプションをalt属性を自動設定するカスタムスクリプト（functions.php）

WordPressの画像ブロックにおいて、キャプションをalt属性に自動設定するカスタムスクリプトを作成しました。このスクリプトは、figcaptionタグ内のテキストを優先的にalt属性に設定します。functions.phpに追加することで、画像のアクセシビリティを向上させることができます。画像のキャプションをalt文字列に活用したいWordPressの画像ブロックには、キャプションを付けることができます。画像にAlt文字列が設定されていないときに、もしキャプションがあれ...

とりあえずのメモプログラミングホームページ運用

次のページ

1 2 … 7