HPBUILD

「うっかり記事を上書きしてしまった…」「前の内容に戻したい…」 そんなときに役立つのが、WordPressに標準で備わっているリビジョン（Revision）機能です。 この記事では、投稿・固定ページを以前の状態に戻す具体的な方法や、リビジョンが表示されない場合の対処法を初心者向けに解説します。 リビジョンとは？ リビジョンとは、記事を保存・更新するたびに、その時点の内容が自動的に履歴として保存される機能です。 つまり、万が一うっかり誤って編集・更新しても、過去の状態に復元することができます。 元に戻す手順 投稿や固定ページの編集画面で、以下の手順を行います。 投稿・固定ページの編集画面を開く 画面右の「文書」タブにある「リビジョン」欄を探す 「◯件のリビジョン」などのリンクをクリック 比較画面が表示されるので、スライダーで戻したい日時を選ぶ 画面右上の「このリビジョンを復元」ボタンをクリック これで以前の内容に戻った状態になります。 リビジョンが表示されないときの原因と対処 「リビジョン」の項目が見当たらない場合は以下を確認してください： 1回も保存していない：保存履歴がなければリビジョンは表示されません 表示設定がオフになっている： 編集画面右上の「表示オプション」または「パネル」設定から「リビジョン」を表示可能にできます テーマやプラグインで無効化されている：functions.phpなどで無効化されていることがあります 過去のリビジョンと現在の違いを比較する リビジョン画面では、新旧の差分が色付きで表示され、どこが変更されたか一目でわかります。 変更されたテキストは赤・緑で表示され、確認しながら復元できます。 リビジョンの保存回数を制限したいとき 記事の履歴が増えすぎるとデータベースに負担がかかることも。以下のようにwp-config.phpに記述することで、保存回数を制限できます。 コピー define('WP_POST_REVISIONS', 5); // 最新5件のみ保存 完全にオフにしたい場合は、falseを指定しますが、おすすめはしません。 おわりに WordPressのリビジョン機能は、知らずに損している人も多い便利機能です。 万が一のミスや保存忘れに備えて、仕組みを理解しておくと安心です。 「更新ボタンを押しちゃった…」そんなときも、焦らずリビジョンをチェックして、簡単に元の状態に復元してみましょう！

ブログや技術記事でコードを読みやすく美しく表示したいときに活躍するのが、Prism.jsという軽量ライブラリです。 HTML・CSS・JavaScriptなどのコードをカラフルにハイライト表示でき、テーマ変更や行番号の追加も簡単。 この記事では、Prism.jsを実際に入手して使う具体的な手順を、初心者向けに丁寧に解説します。 Prism.jsとは？ Prism.jsは、コードにシンタックスハイライト（構文色付け）を加えるための軽量かつ高機能なJavaScriptライブラリです。 公式サイトでは、使いたい言語・テーマを選んで必要最小限の構成を自分で作成できます。 Prism.jsを入手する手順 以下の手順で、自分専用のPrism.jsファイルを入手できます。 以下のURLにアクセス： https://prismjs.com/download.html 使いたい言語（例：HTML、CSS、JavaScriptなど）にチェック プラグイン（任意）：行番号、行ハイライトなどを選択 テーマを選択（おすすめ：Tomorrow、Okaidia など） 「Download JS」ボタンをクリックしてJavaScriptファイルを保存 「Download CSS」ボタンでテーマのCSSも保存 これで自分だけのPrism.js構成が完成します。 CDNで簡単に使いたい場合 まずは試してみたいという方は、CDN経由で読み込むのがおすすめです。 コピー <!-- Prism CSS（テーマ） --> <link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-tomorrow.css" rel="stylesheet" /> <!-- Prism.js本体 --> <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script> <!-- 必要な言語（例：CSS、JS） --> <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-css.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-javascript.min.js"></script> WordPressの場合：header.phpまたはfooter.phpに貼り付けます。 コードの書き方 記事内で表示したいコードは、<pre><code>タグで囲い、クラスにlanguage-○○を付けます。 コピー <pre><code class="language-html"> <div class="box">Hello!</div> </code></pre> これだけで、ハイライト表示が自動的に適用されます。 人気テーマの一覧 Prismには多数のテーマが用意されています： prism.css（標準） prism-tomorrow.css（ダーク） prism-okaidia.css（黒×紫系） prism-coy.css（明るめポップ） 行番号を表示したい場合 以下を追加することで行番号を表示できます： コピー <script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.css" rel="stylesheet" /> <pre class="line-numbers"><code class="language-css"> body { margin: 0; } </code></pre> 注意点とアドバイス ビジュアルエディターでは崩れやすい：テキストモードでの入力推奨 多くの言語を読み込むと重くなる：必要なものだけに絞る WordPressテーマのCSSと干渉する場合：Prismのスタイルが優先されるように工夫が必要 おわりに Prism.jsは、軽量・シンプル・美しいという3拍子揃ったコード装飾ライブラリです。 特に技術系ブログやポートフォリオにおいて、読みやすさや信頼感を高めてくれます。 ぜひPrism.jsを導入して、あなたの記事やサイトの魅力をさらに引き立てましょう！

WordPressでテーマを作成するときに必ず必要なのが、style.cssのコメントヘッダーです。 このヘッダー部分に正しい情報を書いておくことで、WordPressに「これはテーマです」と認識させることができます。 この記事では、コメントヘッダーの役割や記述例、エラーにならないためのポイントなどを初心者向けにわかりやすく解説します。 コメントヘッダーとは？ style.cssの冒頭にある以下のような部分を「コメントヘッダー」と呼びます： コピー /* Theme Name: My Original Theme Theme URI: https://example.com/ Author: あなたの名前 Author URI: https://example.com/ Description: オリジナルのWordPressテーマです。 Version: 1.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: my-original-theme Tags: custom-theme, responsive, simple */ この部分はWordPressがテーマとして認識するために必要な情報で、テーマの情報パネルや管理画面での表示に使われます。 各項目の意味 Theme Name：テーマの名前（日本語OK） Theme URI：テーマの詳細情報ページ（なくてもOK） Author：作成者の名前 Author URI：作成者のWebサイト Description：テーマの説明 Version：バージョン番号（例：1.0） License / License URI：ライセンス情報（GPLを推奨） Text Domain：翻訳ファイル用の識別名（テーマ名と一致させるのが一般的） Tags：公式テーマディレクトリ用のタグ（省略可能） よくあるエラーと注意点 Theme Nameがない：WordPressがテーマと認識してくれない コメントの閉じ忘れ：*/がないとCSSとして無効になる style.cssがテーマ直下にない：必ずテーマフォルダ直下に設置 子テーマのコメントヘッダー例 子テーマを作成する場合は、以下のように「Template」を指定する必要があります： コピー /* Theme Name: My Child Theme Template: twentytwentyfour Description: Twenty Twenty-Fourの子テーマです。 Version: 1.0 */ Templateには、親テーマのフォルダ名（例：twentytwentyfour）を記述します。 おわりに style.cssのコメントヘッダーは、テーマを正しく動作させるための「名刺」のようなものです。 一見ただのコメントに見えますが、WordPressがテーマ情報を読み込む大切な仕組みになっています。 ぜひ正しい書き方を身につけて、オリジナルテーマや子テーマの作成に役立ててください！

WordPressでは、「投稿」や「固定ページ」以外にも、オリジナルの投稿タイプを作成できることをご存知ですか？ たとえば「お知らせ」「実績紹介」「スタッフ紹介」など、自分だけの投稿区分が作れるのがカスタム投稿タイプです。 この記事では、functions.phpにコードを追加するだけで簡単に使えるカスタム投稿タイプの作成方法を、初心者にもわかりやすく解説します。 カスタム投稿タイプとは？ デフォルトでは「投稿（post）」と「固定ページ（page）」という2つの投稿タイプがありますが、それに加えて自分だけの投稿タイプを定義できるのがカスタム投稿タイプです。 使い分けることで、管理画面も整理され、コンテンツごとの管理や表示がしやすくなります。 手順：functions.phpにコードを追加 以下のコードを子テーマのfunctions.phpに追加することで、オリジナル投稿タイプを定義できます。 コピー // 「お知らせ」カスタム投稿タイプを追加 function create_news_post_type() { register_post_type('news', array( 'labels' => array( 'name' => 'お知らせ', 'singular_name' => 'お知らせ', ), 'public' => true, 'has_archive' => true, 'menu_position' => 5, 'menu_icon' => 'dashicons-megaphone', 'supports' => array('title', 'editor', 'thumbnail', 'excerpt'), 'rewrite' => array('slug' => 'news'), ) ); } add_action('init', 'create_news_post_type'); 保存後、管理画面のメニューに「お知らせ」という新しい投稿タイプが表示され、通常の投稿と同じように記事が書けるようになります。 コードの主なポイント 'public' => true：サイト上で表示可能にする 'has_archive' => true：一覧ページを持つ 'menu_icon'：管理画面で表示されるアイコン 'supports'：使用可能な機能（タイトル・本文・アイキャッチなど） カスタム投稿タイプのメリット 投稿と混ざらず、目的別に記事管理ができる 表示テンプレートを分けられる（例：single-news.php など） サイト構造が明確になりSEOにも有利な場合がある 注意点 functions.phpでのミスに注意：編集前にバックアップを取る パーマリンク設定の再保存：追加後は「設定」→「パーマリンク」で保存し直すとURLが正しく動作する 表示テンプレートの用意：必要に応じてsingle-news.phpやarchive-news.phpをテーマに追加 おわりに カスタム投稿タイプを使えば、WordPressでの情報管理がより効率的になります。 今回のコードを応用すれば、「スタッフ紹介」や「商品レビュー」「実績紹介」など、用途に応じたコンテンツ設計ができます。 functions.phpを活用して、自分だけの使いやすいWordPressサイトを作っていきましょう！

WordPressでテーマをカスタマイズしたいと思ったとき、必ず登場するのがfunctions.phpです。 このファイルは「テーマに機能を追加するためのコード」を書き込む場所で、PHPの知識がなくてもコピペから始められる最初の一歩です。 この記事では、functions.phpの基本的な役割や子テーマで編集すべき理由、そして実際に使えるカスタマイズ例まで、初心者向けに丁寧に解説します。 functions.phpとは？ functions.phpは、WordPressテーマの中にあるファイルで、いわばテーマ専用の機能追加スクリプトです。 テーマに独自の機能を追加する 管理画面や投稿の見た目を調整する ショートコードやウィジェットなども定義可能 WordPressを「見た目だけでなく、機能面でも自分好みにしたい」と思ったら、このファイルが活躍します。 子テーマで編集する理由 functions.phpをカスタマイズするときは、必ず子テーマを使いましょう。その理由は： 親テーマのアップデートで上書きされない トラブルが起きたときに切り替えやすい 安心してコードを試せる 子テーマをまだ使っていない場合は、「WordPress 子テーマ 作り方」などで検索して最初に準備しておくのがおすすめです。 functions.phpの編集場所 WordPress管理画面から編集するには： 「外観」→「テーマファイルエディター」を開く 右側のファイル一覧から「functions.php」を選択 記述内容の末尾にコードを追加 既存のコードを削除しないよう注意しましょう。 基本のカスタマイズ例 試しに、投稿の抜粋（抜き出し）文字数を変更するコードを追加してみましょう。 コピー // 抜粋の文字数を50文字に変更 function custom_excerpt_length($length) { return 50; } add_filter('excerpt_length', 'custom_excerpt_length'); 保存すると、トップページなどの抜粋が50文字に調整されます。 functions.phpを編集するときの注意点 必ずバックアップをとる：コードにミスがあるとサイトが真っ白になることも 管理画面に入れなくなった場合：FTPソフトやサーバーパネルでfunctions.phpを修正 コードは確実に閉じる：}の閉じ忘れなどに注意 おわりに functions.phpは、テーマカスタマイズの入り口として非常に重要なファイルです。最初は不安かもしれませんが、コピペからでも十分に機能追加ができるのが魅力。 まずは子テーマを用意し、この記事で紹介したような基本コードから始めてみましょう。少しずつ慣れていくことで、より高度なWordPressカスタマイズにも挑戦できるようになります！

WordPressで技術系の記事を書いていると、HTMLやCSS、JavaScriptなどのコードを貼り付けたい場面がありますよね。 でも、単にコードをそのまま貼っても、見た目が整わず読みにくくなりがちです。 この記事ではプラグインを使わずに、WordPressで見栄えのよいコードブロックを表示する方法を紹介します。 コードを表示する基本のタグ まずはHTMLの基本的な構文を押さえましょう。 コピー <pre><code> ここにコードを記述 </code></pre> <pre>は改行や空白をそのまま表示し、<code>はコンピュータコードであることを示します。 WordPressで使うときの注意点 投稿エディターに直接<や>を打つと、HTMLとして解釈されてしまいます。以下のようにエスケープ（置き換え）する必要があります。 < → &lt; > → &gt; & → &amp; コードをきれいに表示するCSS テーマによってはコードがそのまま無装飾で表示されます。見やすく整えるために、CSSを追加しましょう。 コピー pre code { display: block; padding: 1em; background-color: #f4f4f4; border-left: 4px solid #3498db; overflow-x: auto; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.6; color: #333; } このCSSを外観 → カスタマイズ → 追加CSSに貼り付ければ、全体の見た目が整います。 テーマに合わせたクラスを追加する サイトのデザインに合わせて、枠や色を変更したい場合は独自クラスを付けて調整可能です。 コピー <pre class="my-code"><code> コード内容 </code></pre> その上で、CSSに以下を追加します： コピー .my-code { background-color: #2d2d2d; color: #eee; border-radius: 6px; } プラグイン不要のメリット サイトが軽くなる：余計なJavaScriptやCSSが読み込まれない 表示崩れが少ない：テーマに合わせて柔軟に調整可能 セキュリティ面でも安心：外部製の古いプラグインによる脆弱性リスクがない おわりに プラグインを使わなくても、<pre><code>タグとCSSを使えば、きれいなコードブロックを表示することができます。 エスケープ処理を忘れずに行い、テーマに合ったスタイルを適用するだけで、初心者でもすぐに実践できます。 技術ブログやメモ記事を書く方は、ぜひこの方法を取り入れて、読みやすく見やすい記事にしていきましょう！

WordPressの管理画面で、投稿一覧を見ていて「この記事、どのくらいのボリュームだろう？」と思ったことはありませんか？ 実は、投稿ごとの文字数を一覧に表示することができます。この記事では、functions.phpを使ったカスタマイズ方法を、初心者でもできるようにわかりやすく解説します。 完成イメージ 管理画面の「投稿一覧」に「文字数」というカラムが追加され、各記事の文字数が一目でわかるようになります。 手順1：子テーマのfunctions.phpを開く テーマを直接編集するとアップデート時に上書きされてしまうので、子テーマを使用していることを確認しましょう。WordPress管理画面から「外観」→「テーマファイルエディター」でfunctions.phpを開きます。 手順2：以下のコードを追記する コピー // 投稿一覧に「文字数」カラムを追加 function add_word_count_column($columns) { $columns['word_count'] = '文字数'; return $columns; } add_filter('manage_posts_columns', 'add_word_count_column'); // カラムに表示する文字数を取得 function show_word_count_column($column_name, $post_id) { if ($column_name === 'word_count') { $content = get_post_field('post_content', $post_id); $count = mb_strlen(strip_tags($content)); echo $count; } } add_action('manage_posts_custom_column', 'show_word_count_column', 10, 2); このコードでは、HTMLタグを除去した本文の文字数をカウントして表示しています。 応用：カスタム投稿タイプにも適用する たとえばnewsというカスタム投稿タイプにも表示させたい場合は、フィルター名を変更して追加します： コピー add_filter('manage_news_posts_columns', 'add_word_count_column'); add_action('manage_news_posts_custom_column', 'show_word_count_column', 10, 2); 注意点 テーマ更新で消えないように：子テーマのfunctions.phpに記述する 不要なときは削除できる：管理画面を壊す心配が少ない軽量なカスタマイズ プラグイン不要：管理画面の動作も軽く保てます おわりに 投稿一覧に文字数が表示されると、リライトやボリューム調整がとても効率的になります。 WordPressの管理画面を少しカスタマイズするだけで、運用のしやすさが大きく変わります。 今後もこうしたfunctions.phpの小ワザを取り入れて、便利な管理画面を作っていきましょう！

Webサイトで目立たせたい言葉があるとき、「マーカーで引いたような演出」があると便利ですよね。 実はこれ、CSSだけで簡単に実装できるんです。この記事では、CSSでマーカー風の文字装飾を作る方法を紹介します。 基本：背景色でマーカー風にする まずは一番シンプルな方法。backgroundプロパティで文字の背景に色をつけます。 コピー .marker { background: yellow; } この方法は簡単ですが、マーカーのような「下線寄りの塗り」は難しく、行の高さによって見た目が不自然になることもあります。 発展：linear-gradientで下部だけ塗る マーカーっぽい下部だけの装飾は、linear-gradientを使うと実現できます。 コピー .marker-gradient { background: linear-gradient(transparent 60%, #fce38a 60%); } 透明部分と色付き部分を60%ずつに区切り、文字の下半分だけを塗るような演出が可能になります。 複数行対応のマーカースタイル 複数行にまたがるテキストでマーカーを使いたい場合、少し工夫が必要です。 コピー .marker-multiline { background: linear-gradient(transparent 60%, #f9f871 60%); background-repeat: no-repeat; background-size: 100% 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0.2em; } box-decoration-break: cloneを使うことで、行が折り返された場合でもマーカーが綺麗に続きます。 応用：選択時だけマーカー風にする テキスト選択時（ドラッグして反転したとき）にマーカー風の色を出すこともできます。 コピー ::selection { background: #ffe666; color: #000; } デフォルトの青い反転を、自サイトのカラーに合わせたマーカー風にカスタマイズ可能です。 初心者が気をつけたいポイント 背景色とのバランス：背景色と文字色が近すぎると読みにくくなるため、コントラストに注意 多用しすぎない：強調しすぎると読者がどこを見ればいいか迷ってしまう フォントサイズとの調整：小さすぎる文字だとマーカーが強すぎて不自然に見えることも おわりに CSSを使えば、シンプルなテキストでも強調演出や視線誘導が可能です。 マーカー風の装飾は、ちょっとした工夫で印象を変えられる便利なテクニック。ぜひ、見出しや注目キーワードに活用してみてくださいね。