HPBUILD

functions.phpにコードを追加するとき、「どこに書けばいいのか分からない」と悩んだ経験はありませんか？ この記事では、functions.phpの追記位置に迷わないための基本ルールと、おすすめの記述スタイルを初心者向けに紹介します。 functions.phpの役割を再確認 functions.phpは、テーマに追加したいPHPベースの機能（関数）をまとめる場所です。 WordPressのテーマを読み込む際にこのファイルが実行され、メニュー登録・ウィジェット・CSS/JSの読み込みなどが反映されます。 追記位置に迷う原因 初心者が追記に迷う主な理由は： どのコードがどの機能なのか分かりづらい 似た関数が並んでいて、分類があいまい コメントがなく、どこに追加すべきかの目印がない おすすめの書き方ルール 以下のルールをもとに整理して記述すれば、あとから見返しても理解しやすくなります。 ① 機能ごとに「見出しコメント」をつける 目的別に分類すると、どこに何を書くかが明確になります。 // ---------------------------- // メニュー関連の設定 // ---------------------------- function register_my_menu() { register_nav_menus([ 'main-menu' => 'メインメニュー', ]); } add_action('after_setup_theme', 'register_my_menu'); // ---------------------------- // CSS・JSの読み込み // ---------------------------- function my_theme_scripts() { wp_enqueue_style('style', get_stylesheet_uri()); } add_action('wp_enqueue_scripts', 'my_theme_scripts'); ② 追加コードは「似た機能の近く」に書く たとえば「管理画面をカスタマイズするコード」は、同じような管理系のコードと並べて配置しましょう。 ③ 下のほうに「一時保管エリア」を作るのもアリ 試しに動かしてみたいコードや、用途が未定のコードは下部にまとめておくと安全です。 ④ エラー対策のため「PHP文法」にも注意 functions.phpは1つのPHPファイルです。開きタグ（<?php）を重ねない、セミコロン忘れに注意など、文法ミスを防ぎましょう。 追記例：正しい順番で記述 <?php // ---------------------------- // テーマの初期設定 // ---------------------------- add_theme_support('post-thumbnails'); add_theme_support('title-tag'); // ---------------------------- // メニュー登録 // ---------------------------- function my_theme_menus() { register_nav_menus(['main' => 'メインメニュー']); } add_action('after_setup_theme', 'my_theme_menus'); // ---------------------------- // スクリプト読み込み // ---------------------------- function enqueue_my_scripts() { wp_enqueue_style('style', get_stylesheet_uri()); } add_action('wp_enqueue_scripts', 'enqueue_my_scripts'); おわりに functions.phpの追記位置に迷ったときは、まず機能ごとに整理された構成を意識しましょう。 コメントで区切るだけでも可読性は大幅にアップします。 将来的に複雑なfunctions.phpを扱うときにも、大きな助けになります。 次回は、複雑になってきたfunctions.phpを外部ファイルに分割する方法もご紹介予定です！

WordPressテーマに機能を追加したいとき、よく使われるのがfunctions.phpというファイルです。 この記事では、functions.phpの役割・書き方・初心者でもすぐ試せる便利なコード例を紹介します。 functions.phpとは？ functions.phpは、テーマ内に置く機能追加用のPHPファイルです。 WordPressの動作に影響を与えるコードを自由に追加できます。 たとえば： メニューの登録 サムネイル画像の設定 CSS・JSの読み込み 管理画面のカスタマイズ 設置場所と基本の書き方 テーマフォルダ（例：wp-content/themes/mytheme/）内にfunctions.phpという名前で設置します。 最初はこのように書き始めておくと安全です： コピー <?php // ここに機能追加コードを書いていきます 便利なカスタマイズ例 ① ナビゲーションメニューを有効化 管理画面でメニュー編集ができるようになります。 function register_my_menus() { register_nav_menus([ 'main-menu' => 'メインメニュー', ]); } add_action('after_setup_theme', 'register_my_menus'); ② アイキャッチ画像を有効化 投稿画面で「アイキャッチ画像」が使えるようになります。 add_theme_support('post-thumbnails'); ③ CSSやJavaScriptの読み込み style.cssやJSファイルを読み込む記述もここにまとめます。 function add_theme_scripts() { wp_enqueue_style('main-style', get_stylesheet_uri()); wp_enqueue_script('main-js', get_template_directory_uri() . '/script.js', [], false, true); } add_action('wp_enqueue_scripts', 'add_theme_scripts'); ④ 管理画面から不要な項目を非表示に ダッシュボードの不要なウィジェットを削除できます。 function remove_dashboard_widgets() { remove_meta_box('dashboard_quick_press', 'dashboard', 'side'); } add_action('wp_dashboard_setup', 'remove_dashboard_widgets'); 注意点：直接編集は慎重に functions.phpはPHPファイルなので、文法ミスがあると画面が真っ白になってしまうことがあります。 必ず子テーマで編集する テスト環境やローカル環境で先に試す 編集前にバックアップを取る おわりに functions.phpを活用すれば、プラグインを使わずにちょっとしたカスタマイズや便利機能をテーマに追加できます。 「こういう機能があればいいのに…」という場面で、functions.phpはとても頼れる存在です。 少しずつ慣れて、WordPressの可能性を広げていきましょう！

前回の記事で「自作テーマの基本的な作り方」を学んだ方は、次にテンプレート階層を理解すると、より柔軟なテーマ開発ができるようになります。 この記事では、WordPressのテンプレート階層（Template Hierarchy）の仕組みと、代表的なテンプレートファイルの役割を初心者向けに解説します。 テンプレート階層とは？ WordPressには「どのページを表示するか」に応じて、読み込むテンプレートファイルを自動で切り替える仕組みがあります。 この優先順位のルールのことをテンプレート階層と呼びます。 テンプレート階層の例 たとえば「投稿ページ（投稿ID: 10）」が表示されるとき、WordPressは以下の順番でテンプレートを探します： single-post-10.php single-post.php single.php singular.php index.php 上から順にファイルがあるか確認し、最初に見つかったファイルが使用されます。 よく使うテンプレートファイル一覧 ファイル名用途 index.phpすべてのページの最後の fallback（最低限必要） home.php記事一覧（設定でフロントにも使える） single.php投稿（投稿タイプ：post）の詳細ページ page.php固定ページの表示用 archive.phpカテゴリ・タグ・日付アーカイブなどの一覧 category.php特定のカテゴリーページ search.php検索結果ページ 404.phpページが見つからない場合のエラーページ テンプレート階層を意識するメリット ページごとに見た目を変えられる（例：カテゴリーページごとにデザイン変更） カスタマイズ性が高まる（single.php・page.phpなどで分岐可能） 不要な条件分岐を減らせる（役割をファイルに分担できる） 補足：get_template_part() で共通パーツを分けよう テンプレート階層を整理するには、get_template_part()でパーツを分けるのも有効です。 コピー <?php get_template_part('template-parts/content', 'page'); ?> 上記のように記述すると、template-parts/content-page.phpが読み込まれます。 おわりに テンプレート階層を知ることで、WordPressテーマの自由度と柔軟性は一気に高まります。 カスタム投稿タイプや条件分岐を使いこなす前に、この仕組みを理解しておくと非常に役立ちます。 次回は、「functions.phpを使って便利な機能を追加する方法」もご紹介しますのでお楽しみに！

WordPressを使っていると、「もっと便利に使いたい」「この機能がほしい」と思うことがありますよね。 そんなときに役立つのがプラグインです。 この記事では、プラグインの導入方法から、目的別のおすすめプラグイン、導入時の注意点まで、初心者でも安心して読めるように丁寧に解説します。 プラグインとは？ プラグインとは、WordPressに新たな機能を追加する「拡張パーツ」です。 例えば、セキュリティ対策、バックアップ、SEO最適化、お問い合わせフォームの追加など、サイトに必要な機能の多くはプラグインで実現できます。 プラグインの導入手順（インストール方法） プラグインは管理画面から簡単に導入できます。 WordPressにログイン 左メニューの「プラグイン」→「新規追加」をクリック 画面上部の検索窓にプラグイン名やキーワードを入力 該当プラグインの「今すぐインストール」をクリック 続いて「有効化」ボタンを押せば完了！ また、zipファイルをアップロードして導入することも可能です（「プラグイン」→「新規追加」→「プラグインのアップロード」から）。 初心者におすすめのプラグイン【ジャンル別まとめ】 🔐 セキュリティ対策 SiteGuard WP Plugin：ログインURLの変更や通知機能など、日本語対応の強力な保護機能 Limit Login Attempts Reloaded：ログイン失敗の制限でブルートフォース攻撃を防止 📈 SEO対策 All in One SEO：タイトル・ディスクリプションの設定、XMLサイトマップなどを一括管理 XML Sitemaps：検索エンジンにサイト構造を正確に伝えるためのサイトマップ生成 🧾 お問い合わせフォーム Contact Form 7：カスタマイズ自由なお問い合わせフォームを簡単に追加 Flamingo：Contact Form 7と連携して、送信データをWordPress内に保存 💾 バックアップ BackWPup：WordPressデータの自動バックアップ、DropboxやGoogle Driveにも保存可能 ⚡ 表示速度・キャッシュ WP Super Cache：静的HTMLを生成してサイト表示を高速化 Autoptimize：CSSやJavaScriptを自動で圧縮・結合し、ページ表示を軽量化 📋 記事構造サポート Table of Contents Plus：自動で目次を生成。SEOやユーザビリティにも貢献 Advanced Editor Tools：投稿画面の編集機能を拡張。表作成や見出し設定も簡単に プラグイン選びのポイント 最終更新日が新しいか：古いものは非対応の可能性がある 有効インストール数が多いか：人気・信頼性の目安になる 星の評価：レビューの評価も重要（4.5以上が目安） 目的が重複しない：似た機能のプラグインは競合・不具合の原因になる 入れすぎに注意！ プラグインを入れすぎると、サイトが重くなったり、互換性のトラブルが起きたりします。 本当に必要なものだけを厳選し、不要になったプラグインは無効化→削除しましょう。 おわりに プラグインを使えば、WordPressを自由に拡張・強化できます。 特に初心者のうちは、難しいコードなしで機能を増やせるのでとても便利。 まずは本記事で紹介したおすすめプラグインを導入し、快適なWordPress運用を始めましょう！

「うっかり記事を上書きしてしまった…」「前の内容に戻したい…」 そんなときに役立つのが、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サイトを作っていきましょう！