WordPressでブログやサイトを作成していく時、デザインはもちろんのこと、機能を追加してWordPressをカスタマイズしたくなったことはないでしょうか?
この記事は、WordPressのカスタマイズを「プラグインなし」で行う方法のまとめです。
どれも、コピペでできるようコードも記載しています。
コード自体も、簡単なカスタマイズであればそれほど難しいものではないので、是非この記事を参考にしてみてください。
目次
管理画面・テーマのカスタマイズ
WordPressの管理画面・ダッシュボードや、テーマ自体のカスタマイズで使えるスニペットです。
WordPress開設した直後にやっておきたいカスタマイズ
これからブログを作り人や、WordPressを使い始めた人にぴったりなカスタマイズです。
WordPressを開設した後に、やるべき4つの設定について説明します。
この時に設定しなかった為、公開して数ヶ月に「流入が少ない」「PVが増えない」と後の祭りにならないよう、開設直後にやるべき4つの設定をしてサイトを運営しましょう。

サーバーによっては、基本ルートディレクトリ(=ドメイン直下)ができず、ドメインのサブディレクトリ (例:https://XXXXXX.sakura.ne.jp/wp/ 等)にインストールされる為、インストール直後のトップページのURLにサブディレクトリも含まれてしまいます。
サブディレクトリが含まれない形の方が気持ちよく、ユーザーもサイトのURLが覚えやすくなるので、以下の記事を参考にして、ドメイン直下に変更しておきましょう。

記事を書きやすく・管理画面を使いやすくするカスタマイズ
記事を書きやすくしたり、使い勝手を良くするカスタマイズです。
この記事では、WordPress開設当初にぴったりなスニペットを紹介してます。
例えば、「プラグインなしで目次を出力する」の表示される内容の変更から、「管理画面でタグの絞り込みを可能」などです。
この記事には約10種類あるので、必要なものを functions.php
に記述しておきましょう。

<body>〜〜</body>
タグの最後(クロージングタグ前)に書くことが推奨されている、JavaScriptの入力フィードを追加します。
記事毎にテキストボックスの入力欄が下部に表示されるので、記事毎に色々JSを試したい方は記述しておくと便利です。

「管理者以外にアップデートのお知らせを非表示」「WordPress のご利用ありがとうございます。を変更」など、小ネタ的なカスタマイズについて、この記事で解説しています。
自分好みの管理画面にしたい方は、こちらの記事を参考にカスタマイズしてみてください。

当サイトで使用しているSANGOのテーマには、投稿一覧画面も標準で使いやすく、これに加えてPORIPUを入れることでアイキャッチ画像の表示や閲覧数の表示が可能になります。
この記事では、それ以外のテーマで投稿一覧画面が使い易くなるように、プラグイン無しで投稿一覧の画面を見やすく・使いやすくするカスタマイズについて解説しています。

この記事では、WordPressへログイン後、最初に表示されるダッシュボードの上部の「ようこそ」のブロックに、自分のよく使うコードだけでなく、リンクなど自分好みにカスタマイズして設置する方法について解説しています。

ログイン画面のカスタマイズ
ログイン画面のカスタマイズ方法についてのスニペットです。
WordPressのログイン画面は、不特定多数のユーザーがみるものではなく、標準のままで何ら問題はありません。
ですが、多数のサイトをWordPressで管理している場合、ログイン画面からサイトが連想しやすいようちょっとしたビジュアルに配慮してあると、管理もしやすく投稿者も間違いにくくなります。
この記事では、そんなログイン画面のカスタマイズ方法について解説しています。

ログイン画面に辿り着けてしまえば、脆弱なパスワードはプログラムで驚くほどの短時間で破ることができ、ユーザー名については調べたいサイトURL/?author=1
と入力することで調べることができてしまいます。
この情報を基に、ブルートフォースアタックと言われるありとあらゆるユーザーIDとパスワードを使ってログインを試みる手法でログインされてしまった場合、悪意のあるコードの埋め込みや、サイトの消去もされてしまう可能性があるので対策が必要です。
プラグインを入れるのは極力避けたい方や、セキュリティ強化の為に是非ご覧の上試してみてください。

取り扱いできるファイルの拡張
WordPressに保存できるファイルを拡張するスニペットです。
WordPressのメニューのメディアは結構便利で、jpgやpngの画像系ファイルをはじめ、mp4のファイルをアップロードして利用できますが、一部使えないファイル形式もあったりします。
この記事では、SVGやCSSなどのファイルをアップロードできるようにする方法について解説しています。

ショートコードでphpを記述できる仕様にすることで、固定ページや投稿ページ・ウィジェット・メニューなど、WordPress内の好きな場所にphpを設置する事ができます。
この記事では、ページ内にphpを読み込む方法について解説しています。

子テーマと呼ばれるテーマを別途作成してカスタマイズをすることで、親テーマである既存のテーマがアップデートされても、そのようなことを防ぐことができ、自分の変更内容も保持できるという点が最大のメリットです。
以下の記事では、WordPressの子テーマを作る方法について解説しています。

YouTubeの埋め込みは、公式サイトの「共有」から簡単にiframeでの埋め込みができます。ですが、動画の差し替えの時など、更新の場合に都度記述内容をまるまる変えるのは不便です。
この記事はそんな時、ソースをいじらずにWordPressの管理画面から更新できるようにするカスタマイズの方法です。

管理バーの表示の変更
ログインすると、上部に出てくる「管理バー」をカスタマイズするスニペットです。
WordPressの管理バー(admin bar)は、ログインするとページの上部に固定で表示されるUIで、サイト更新でちょこちょこ使います。
ですが、使うものも結構偏りがあるので、色々と弄るとスッキリして使いやすくなります。

管理バーは、WordPressのデフォルトのテーマや、有料で配布されているテーマの場合は管理バーが上部に表示されている場合がほとんですが、自作のテーマの場合、自分で設定しなければ管理バーは表示されません。
そんな時、以下の記事を参考にしてみてください。

パンくずリストを表示するカスタマイズ
ページの構造を出力するパンくずリストに関するカスタマイズです。
パンくずリストを静的に一個一個書いてもいいですが、記事数が増えた場合には都度の修正が大変です。
プラグインを入れる法もありますが、この記事ではプラグインなしで実装する方法を解説していきます。

Gutenberg(ブロックエディタ)のカスタマイズ
WordPress 5.0から採用されているGutenberg(ブロックエディタ)のカスタマイズについてです。
既存のブロックにCSSや、JavaScriptをあてて別のスタイルを作るカスタマイズです。

新規でブロックを追加する方法です。
「これからブロックエディタをいじろうかな?」と思っている方には、この記事から見ていくといいと思います。

ウィジェットのカスタマイズ
ダッシュボードの「外観 > ウィジェット」でウィジェットのカスタマイズについてです。
テーマにウィジェット機能が実装されている場合、サイドエリアやヘッダーエリアなど、予め表示できるウィジェットエリアがあります。
これらは、functions.phpにコードを記述することで、このエリアを任意で追加することが可能です。

プラグインを使えば、「記事の閲覧数」「人気記事のウィジェット」を実装できてしまいますが、できることならプラグイン無しで実装したいところです。
この記事では、プラグイン無しで実装するスニペットを紹介しています。

カテゴリのカスタマイズ
記事をカテゴライズする、カテゴリのカスタマイズについてです。
「子カテゴリがある親カテゴリはアコーディオン」。それ以外のカテゴリは、a
タグのリンクに変更します。
「カテゴリが増えてしまい整理したい」「アコーディオンでカテゴリをスッキリさせたい」方は、この記事を参考にしてみてください。

記事のカテゴライズでスマートフォンサイトのような、ある程度の情報量にしなければいけない時にアコーディオンを用いれば、ユーザーが欲しい情報だけオンデマンドで、さらに詳しく見せることができます。
このカスタマイズは、jQueryのコピペだけでできるので、カテゴリーの表示を変更したい方は参考にしてみてください。

WordPressを使っていて、記事数がそれなりに多くカテゴリ一覧でも見やすくしたいと思っている方は、jQueryの簡単なコピペでできるので、この記事を参考にカスタマイズしてみてください。

検索のカスタマイズ
検索のカスタマイズについてのスニペットです。
検索フォームのカスタマイズ
掛け合わせ検索など、標準の検索フォームをカスタマイズする方法についてです。
記事投稿が増加したりカスタムフィールドを使用したりと、サイト内のコンテンツが増加すると、wordpressの標準で使用できる検索窓のテキスト検索だけでは物足りなかったりします。
この記事では、テキスト検索に「カテゴリ」「タグ」を組み合わせた絞り込み検索の作り方について解説しています。

ACFで作ったカスタムタクソノミーと、WordPressのキーワード検索を掛け合わせて「AND」検索を行うスニペットです。
ゴリゴリにサイト内をいじったときに使うのにピッタリです。

PHPの記述ができない記事ページや固定ページで検索フォームを呼び出したい場合、ショートコードを作成することで、投稿や固定ページ内でも検索フォームを表示できるようにできます。
以下の記事では、記事ページや固定ページに検索フォームを表示する方法について解説しています。

検索フォームは、WordPressにも標準で付いていますがデフォルトの状態はベタでそのまま表示されます。
この検索フォームを、多少のアニメーションを使い「虫眼鏡アイコンをクリックすると、フォームがヒョイっと拡大されて現れる」ものをカスタマイズして作ってみました。

検索結果のカスタマイズ
検索結果の表示方法をカスタマイズする方法についてです。
カスタム投稿ですが、通常の投稿や固定ページとは異なるので検索フォームと検索結果を分けようと思うと、ちょっと一手間必要です。
この記事は、そんなカスタム投稿用の検索フォームと検索結果を作るスニペットです。

Googleの検索結果のように、WordPressの検索結果にハイライト表示をさせるスニペットについて解説していきます。
簡単なコピペでできてしまうので、検索結果の表示をカスタマイズしたい方は、この記事を参考にトライしてみてください。

外部リンクのカスタマイズ・出力
記事一覧や、記事ないに設置する外部リンクのカスタマイズについてです。一部APIを使っています。
WP REST APIで他のWordPress記事一覧を表示
他のWordPressサイトから情報を持ってきて出力する方法についてです。
JavaScriptの「3大フレームワーク」に数えられるReactで、指定したサイトの記事やカスタム投稿タイプなどの情報を取得して表示します。
シングルページアプリケーションの運用に興味ある方は以下の記事をご覧ください。

APIは便利です。
コードを色々書いたりする必要がなく、既存プログラムをそのまま利用できるので、空いた時間で他のことに時間を使えるので、重宝します。
そんなAPIですが、WordPressにもWP REST APIというAPIが標準で搭載されています。

外部リンクのカスタマイズ
外部リンクをカスタマイズする方法についてです。
URLを入力するだけで「簡単にイケてる感じの外部リンク」ができるよう、外部リンク用カードのショートコードを作るスニペットです。
画像付きの外部リンクを作りたい方は、ぜひこの記事を参考にしてみてください。

noteのRSSを使い任意の記事を取得して、カードリンクを一覧で出力します。多少複雑なコードどですが、コピペするだけでOKです。

更新情報をWordPressで表示する際、そのサイト以外の場合、RSSを使うと簡単です。
この記事では、RSSを読み込んで記事のカードを画像付きで表示させる方法について解説しています。

記事(投稿)ページのカスタマイズ
目次を表示
記事の見出しタグを取得して、記事の目次を出力するスニペットです。
この記事は、記事のh2
・h3
の見出しタグを取得して、モーダルで表示させるスニペットについて解説しています。
極力プラグインを使いたくない方や、記事の目次をメインのエリア以外に表示させたい方は、この記事を参考にしてみてください。

WordPressで記事に目次を挿入してくれる人気のプラグイン「TOC+」は、当サイトも使っていて、簡単に設定できるので非常に重宝しています。
そんな目次の挿入ですが、TOC+のプラグインを使わずにjQueryを使って実装することもできてしまいます。

条件分岐で表示の切り替え
条件を設定して、コンテンツの出し分けを行うスニペットです。
アクティブパラメータをURLに付与して、一つの投稿ページでテンプレートを出し分けする方法があります。
この記事では、そんな方法をプラグイン無しで実装するやり方について解説しています。

WordPressの場合、関数のwp_is_mobile()
を使って、アクセスしたデバイスを判別して要素の表示非表示を切り替えることができます。
この記事は、その条件分岐のコードをショートコードにして条件分岐させる方法について解説しています。

Basic認証は、ページやファイルにアクセス制限をかけることができる認証方法の1つで、簡易的なセキュリティ対策に用いられる方法です。
この記事では、「.htaccess」ファイル等々を触らずに、特定の固定ページにBasic認証をかける方法を紹介しています。

コンテンツの表示
コンテンツを制御するスニペットです。
コピペした記事は、Googleの検索評価でも上位に来ることはまずないと言いますが、それでもコピペ被害を受けたサイトやブログからしても、決して気持ちのいい思いはしないはずです。
コピペで悩んでる。もしくは画像をパクられる等、お困りの方は是非この記事をご覧頂き参考にしてください。

縦書きのレイアウトと明朝系のフォントを併用して部分的に用いることで、しっとりとした和の雰囲気や、落ち着いた印象を出すことも可能です。
この記事では、記事部分に縦書きで段組表示をさせる方法について解説しています。

この記事では、Googleマップ・QRコード・期間限定内容表示をするショートコードの作り方と、実装方法について解説しています。

広告の表示
Google Adsence の広告系の表示方法をカスタマイズするスニペットです。
当サイトでも利用しているSANGOのテーマには、AdSenceの広告も簡単に貼れるウィジェットがあり、これに加えてSANGO公式のPOPURIのテーマを入れればもっとより簡単に広告を貼れます。
以下の記事では、それ以外のテーマで広告周りの運用を簡単にする方法について解説しています。

サイドバーのカスタマイズ
2カラムのサイトで、サイドに設置するコンテンツをカスタマイズする方法についてです。
記事投稿に比例して、タグの数がなかなか増えてしまうことがあります。
そこで、サイドバーのタグクラウドにもっと見るボタンを設置して、非表示要素をスライドダウンで表示させるのを、ショートコードの追加と併せて実装させました。
その方法について解説しています。

WordPressテーマ「SANGO」専用のカスタマイズ
WordPressテーマ「SANGO」専用のカスタマイズ方法についてです。
当サイトでも使用している、WordPressテーマSANGOの記事の下部には、「前の記事・次の記事」として、前後の記事のリンクをデフォルトで出力してくれます。
この記事では、そんなSANGOの前の記事・次の記事を同じカテゴリで出力するカスタマイズについて解説していきます。

SANGOのテーマには、標準で関連記事を任意で表示させる機能があり、関連性のある記事の表示はユーザーライクな機能です。
この関連記事だけでなく、同じようなデザインでその記事で付与したタグの記事を表示させる機能を作ってみました。
この記事では、SANGOのカード型デザインで同じタグを持つ記事を表示させる方法について解説しています。

WordPressのテーマ「SANGO」の記事の任意の場所に、同カテゴリの関連記事を自動で表示させるコードです。SANGOのカードのhover
時の挙動等々そのまま出力します。

当サイトでも利用しているWordPressテーマSANGOは、見やすいデザインで内部最適化もされているイケてるテーマです。
普通に使っていて何も不都合はありませんが、この記事のちょっとしたカスタマイズを加えてあげると、さらにSANGOの力を発揮させることができます。

よく見かける、上下のスクロールに応じてヘッダーを表示したり・非表示にしたりの仕組みは、jQueryで簡単に実装することができ、このページに実装しているものが、実際にコピペのコードを貼り付けした仕様です。
この記事では、SANGOのヘッダーをスクロールで表示・非表示で切り替えるスニペットについて紹介しています。

WordPressテーマ「Cocoon」専用のカスタマイズ
WordPressテーマ「Cocoon」専用のカスタマイズについてです。
当サイトで使用しているWordPressのテーマ:SANGOは、イケてるデザインですが、有名な無料テーマ:cocoonも高速で、かつイケてるデザインです。
以下の記事は、記事内のh2の見出しタグに、自動で番号をつける方法について解説しています。

以下の記事は、関連記事の表示に合うレスポンシブのタブについて解説しています。

サイト内の情報を取得して表示
サイト内の情報を取得して表示するカスタマイズ方法についてです。
WordPressのカテゴリを取得・出力する関数は色々ありますが、含まれる記事数を取得して表示させる関数は、あまり多くなくググっても関連の内容は出てきません。
関数に演算子を足した構文で簡単にできるので、解説した内容をベースに活用してみてください。

WordPressで、全てのカテゴリーを横断した全記事一覧のページを作ろうとすると、通常のarchive.phpやcategory.phpではうまく表示する事ができず、意外に面倒だったりします。
この記事では、固定ページでページ送り付きの全記事を表示する方法について解説しています。

この記事では、投稿者(管理者などのユーザー登録をしている人)の一覧を作ったので、その紹介です。デザインやレイアウトは当サイトでも使っているWordPressテーマSANGOに合いそうな感じです。
投稿者一覧を作ろうとしている方は是非参考にしてみてください。

閲覧履歴を基に、違うページを紹介するページを通販サイトでよく見かけますが、WordPressでもプラグインを入れることで簡単に実装可能です。
ですが、プラグインの場合CSSでデザインは整えることはできますが、出力項目のカスタマイズなど、ある程度制約がある中で使う必要もあったりするので、プラグインなしで実装する方が何かと便利です。

インタラクションな機能を追加
ユーザーがサイト内でアクションをしたら、表示を切り替えたりするカスタマイズについてです。
いざWordPressで「お気に入り」を実際にしようと思うと、有名なFavoritesなどのプラグイン がありますが、cookieを使えばこのお気に入り機能を簡単に実装できてしまいます。
このスニペットは、WordPressで通販系のサイトを作る時など、プラグインを使わずにお気に入り機能を追加したい方は、是非最後までご覧いただけたら嬉しいです。

「ブックマーク=お気に入りに追加」の機能ですが、以前の記事のスニペットをカスタマイズし「ページ一覧でお気に入り解除」の機能を追加したスニペットを、この記事でご紹介します。

今や、ほとんどのブログには標準搭載されているSNSのシェアボタンですが、一部のWordPressテーマでは搭載されておらず、いざ設置しようと思うとプラグインを入れたりと、面倒だったりします。
この記事は、そんなプラグインなしでSNSのシェアボタンを設置する方法について解説していますので、チェックしておきましょう。

プラグインのカスタマイズや実装方法
プラグインのインストール方法や、カスタマイズ方法について解説しています。
プラグインの実装方法と使い方
プラグインのインストール方法や、カスタマイズについてです。
ブログでも「いいね」は、わざわざ文章を書き込まずにリアクションをする手段として広く浸透してきました。
かくゆうWordPressでも、この WP ULike をインストールするだけで、この「いいね」機能の実装が簡単にできてしまいます。
この記事では、WP ULikeを使ったカスタマイズについても解説しています。

WP Theme Test というプラグインを使えば、公開しているサイトはそのままにしながら、非公開の状態でカスタマイズできる方法が可能です。
以下の記事では、WP Theme Test を使って本番環境のテーマを非公開でカスタマイズする方法について解説しています。

カスタムフィールドは、「テンプレートのコードを触ることなく、管理画面から簡単に更新できるようにしたい」時に重宝し、 そんな時にはAdvanced Custom Fields プラグインを使えば、複雑な条件なども設定しつつ、簡単にカスタムフィールドを作ることができます。
この記事は、カスタムフィールドの項目を、WP REST APIで取得して表示させるプラグインとスニペットの紹介の内容です。

自作のプラグイン
自作でプラグインを作り、WordPress公式サイトへの登録方法や更新方法についてです。
以前、プラグインをWordPressの公式ディレクトリに申請〜公開しましたが、バージョンアップに手間取ることが多く、そのバージョンアップの方法と手順を備忘録として残した記事です。
毎度毎度記憶を遡るのも無理が出てきたので、その為のメモ的記事です。

デザインを追加するカスタマイズ
ショートコードを作り、デザインを追加するスニペットです。
WordPressの記事内に、良かれと思いバナーを置いてみても、記事の文字量に埋れてしまい意図した導線としての機能を果たさない場面があります。
そこで、バナーのサイズや色味を変更して目立たせることができますが、外部サイトのバナーの場合、バナー自体をいじることができないので、それ以外のデザインでみやすくする必要があります。
そこで、CSSでバナー周りのデザインを補完して目立たせることができるので、方法を知っておくと非常に便利です。

マテリアルデザインの中でも、カードと呼ばれるデザインはTwitterやFacebookをはじめ、多くのWebサイトで採用されているデザインです。
以下の記事では、WordPressにショートコードを追加して使用するカード型のデザインについて解説しています。

自分のサイトで合うようなデザインのオブジェクトを、ショートコードで呼び出せる仕様にしてあげることで、より一層サイトの更新も容易になり、サイトの世界観も作り込んでいくことができます。
以下の記事では、WordPressにショートコードを追加してアコーディオンを表示する方法について解説しています。

会員限定のサイトを作るカスタマイズ
少し難易度が高めですが、プラグインなしで会員限定のサイト・ブログを構築するスニペットです。
WordPressで会員限定のサイトを作る場合、プラグインを入れるだけで構築できてしまいますが、今回は、会員限定のサイトをプラグインなしで作ってみます。
当サイトでも使っているWordPressテーマ「SANGO」をベースにして作ってみたサンプルもあるので、併せて参考にしてみてください。

WordPress関数リファレンス
WordPressのカスタマイズで使う「関数」について解説しています。
WordPress には、便利な PHPの関数が多く定義されています。関数を使いこなして、自分好みのサイトを作りましょう。
以下のページでは、それらの関数を解説しています。