【コピペで簡単】プラグインなしでできるWordPressのカスタマイズまとめ

WordPressカスタマイズ

WordPressでブログやサイトを作成していく時、デザインはもちろんのこと、機能を追加してWordPressをカスタマイズしたくなったことはないでしょうか?

この記事は、WordPressのカスタマイズを「プラグインなし」で行う方法のまとめです。

かかかず
かかかず

どれも、コピペでできるようコードも記載しています。

コード自体も、簡単なカスタマイズであればそれほど難しいものではないので、是非この記事を参考にしてみてください。

随時更新中の記事です。

この記事は、記事追加次第それに応じて更新しています。

管理画面・テーマのカスタマイズ

WordPressの管理画面・ダッシュボードや、テーマ自体のカスタマイズで使えるスニペットです。

WordPress開設した直後にやっておきたいカスタマイズ

これからブログを作り人や、WordPressを使い始めた人にぴったりなカスタマイズです。

WordPressを開設した後に、やるべき4つの設定について説明します。

この時に設定しなかった為、公開して数ヶ月に「流入が少ない」「PVが増えない」と後の祭りにならないよう、開設直後にやるべき4つの設定をしてサイトを運営しましょう。

初心者向け設定のイラスト 【初心者向】WordPress開設直後にやるべき4つの設定と手順

サーバーによっては、基本ルートディレクトリ(=ドメイン直下)ができず、ドメインのサブディレクトリ (例:https://XXXXXX.sakura.ne.jp/wp/ 等)にインストールされる為、インストール直後のトップページのURLにサブディレクトリも含まれてしまいます。

サブディレクトリが含まれない形の方が気持ちよく、ユーザーもサイトのURLが覚えやすくなるので、以下の記事を参考にして、ドメイン直下に変更しておきましょう。

サブディレクトリにインストールしたWordPressをドメイン直下のURLに表示する方法

記事を書きやすく・管理画面を使いやすくするカスタマイズ

記事を書きやすくしたり、使い勝手を良くするカスタマイズです。

この記事では、WordPress開設当初にぴったりなスニペットを紹介してます。

例えば、「プラグインなしで目次を出力する」の表示される内容の変更から、「管理画面でタグの絞り込みを可能」などです。

この記事には約10種類あるので、必要なものを functions.php に記述しておきましょう。

functions.phpのスニペット WordPressのfunctions.phpに記述しておくと便利なスニペット11選

<body>〜〜</body>タグの最後(クロージングタグ前)に書くことが推奨されている、JavaScriptの入力フィードを追加します。

記事毎にテキストボックスの入力欄が下部に表示されるので、記事毎に色々JSを試したい方は記述しておくと便利です。

掛け合わせ検索 プラグインなしでカスタムタクソノミーをプルダウンで掛け合わせたWordPressの絞り込み検索

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

自分好みの管理画面にしたい方は、こちらの記事を参考にカスタマイズしてみてください。

管理画面と投稿のイラスト プラグイン無しでWordPressの管理画面と投稿画面のカスタマイズ方法

当サイトで使用しているSANGOのテーマには、投稿一覧画面も標準で使いやすく、これに加えてPORIPUを入れることでアイキャッチ画像の表示や閲覧数の表示が可能になります。

この記事では、それ以外のテーマで投稿一覧画面が使い易くなるように、プラグイン無しで投稿一覧の画面を見やすく・使いやすくするカスタマイズについて解説しています。

wordpressを使い易く見易くするイラスト プラグイン無しで投稿一覧の画面を見やすく・使いやすくするカスタマイズ

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

ダッシュボードのイラスト プラグインなしでWordPressダッシュボードをカスタマイズするスニペット

ログイン画面のカスタマイズ

ログイン画面のカスタマイズ方法についてのスニペットです。

WordPressのログイン画面は、不特定多数のユーザーがみるものではなく、標準のままで何ら問題はありません。

ですが、多数のサイトをWordPressで管理している場合、ログイン画面からサイトが連想しやすいようちょっとしたビジュアルに配慮してあると、管理もしやすく投稿者も間違いにくくなります。

この記事では、そんなログイン画面のカスタマイズ方法について解説しています。

ログイン画面のイラスト プラグインなしでWordPressのログイン画面をカスタマイズするスニペット

ログイン画面に辿り着けてしまえば、脆弱なパスワードはプログラムで驚くほどの短時間で破ることができ、ユーザー名については調べたいサイトURL/?author=1 と入力することで調べることができてしまいます。

この情報を基に、ブルートフォースアタックと言われるありとあらゆるユーザーIDとパスワードを使ってログインを試みる手法でログインされてしまった場合、悪意のあるコードの埋め込みや、サイトの消去もされてしまう可能性があるので対策が必要です。

プラグインを入れるのは極力避けたい方や、セキュリティ強化の為に是非ご覧の上試してみてください。

Basic認証のイラスト プラグインなしでWordPressのログイン画面にBasic認証を設定する方法

取り扱いできるファイルの拡張

WordPressに保存できるファイルを拡張するスニペットです。

WordPressのメニューのメディアは結構便利で、jpgやpngの画像系ファイルをはじめ、mp4のファイルをアップロードして利用できますが、一部使えないファイル形式もあったりします。

この記事では、SVGやCSSなどのファイルをアップロードできるようにする方法について解説しています。

ファイルアップロードのイラスト WordPressのメディアにSVGやCSSなどのファイルをアップロードできるようにするスニペット

ショートコードでphpを記述できる仕様にすることで、固定ページや投稿ページ・ウィジェット・メニューなど、WordPress内の好きな場所にphpを設置する事ができます。

この記事では、ページ内にphpを読み込む方法について解説しています。

phpのショートコードのイラスト プラグインなしでページ内にPHPを読み込む方法

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

以下の記事では、WordPressの子テーマを作る方法について解説しています。

子テーマを作る方法 WordPressの子テーマを作る方法

YouTubeの埋め込みは、公式サイトの「共有」から簡単にiframeでの埋め込みができます。ですが、動画の差し替えの時など、更新の場合に都度記述内容をまるまる変えるのは不便です。

この記事はそんな時、ソースをいじらずにWordPressの管理画面から更新できるようにするカスタマイズの方法です。

YouTubeのイラスト プラグイン無しでWordPressのテーマカスタマイズからYouTubeの動画を設置するスニペット

管理バーの表示の変更

ログインすると、上部に出てくる「管理バー」をカスタマイズするスニペットです。

WordPressの管理バー(admin bar)は、ログインするとページの上部に固定で表示されるUIで、サイト更新でちょこちょこ使います。

ですが、使うものも結構偏りがあるので、色々と弄るとスッキリして使いやすくなります。

管理バーのイラスト プラグインなしで管理バー(admin bar)を変更するスニペット

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

そんな時、以下の記事を参考にしてみてください。

管理バーの表示のイラスト プラグイン無しでWordPressのページで権限別に管理バーを表示させる方法

パンくずリストを表示するカスタマイズ

ページの構造を出力するパンくずリストに関するカスタマイズです。

パンくずリストを静的に一個一個書いてもいいですが、記事数が増えた場合には都度の修正が大変です。

プラグインを入れる法もありますが、この記事ではプラグインなしで実装する方法を解説していきます。

パンくずリスト プラグインなしでMicrodata形式のパンくずリストを表示

Gutenberg(ブロックエディタ)のカスタマイズ

WordPress 5.0から採用されているGutenberg(ブロックエディタ)のカスタマイズについてです。

既存のブロックにCSSや、JavaScriptをあてて別のスタイルを作るカスタマイズです。

グーテンベルグ プラグインなしでWordPressのGutenberg(ブロックエディタ)にオリジナルのスタイルをあてるカスタマイズ

新規でブロックを追加する方法です。

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

ブロックエディタに追加 プラグインなしでWordPressのGutenberg(ブロックエディタ)にオリジナルのブロックを追加

ウィジェットのカスタマイズ

ダッシュボードの「外観 > ウィジェット」でウィジェットのカスタマイズについてです。

テーマにウィジェット機能が実装されている場合、サイドエリアやヘッダーエリアなど、予め表示できるウィジェットエリアがあります。

これらは、functions.phpにコードを記述することで、このエリアを任意で追加することが可能です。

ウィジェットエリアのアイキャッチ プラグイン無しで新しくウィジェットエリアを追加する方法

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

この記事では、プラグイン無しで実装するスニペットを紹介しています。

閲覧数のカスタマイズ プラグインなしで記事の閲覧数と人気記事のウィジェットを追加するスニペット

カテゴリのカスタマイズ

記事をカテゴライズする、カテゴリのカスタマイズについてです。

「子カテゴリがある親カテゴリはアコーディオン」。それ以外のカテゴリは、aタグのリンクに変更します。

「カテゴリが増えてしまい整理したい」「アコーディオンでカテゴリをスッキリさせたい」方は、この記事を参考にしてみてください。

カテゴリーのアコーディオン プラグインなしでカテゴリの親子階層をアコーディオンで出力

記事のカテゴライズでスマートフォンサイトのような、ある程度の情報量にしなければいけない時にアコーディオンを用いれば、ユーザーが欲しい情報だけオンデマンドで、さらに詳しく見せることができます。

このカスタマイズは、jQueryのコピペだけでできるので、カテゴリーの表示を変更したい方は参考にしてみてください。

アコーディオンのイラスト jQueryを使ってWordPressの子カテゴリーをアコーディオンで表示させるスニペット

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

jQueryのイラスト jQueryのコピペでできる閲覧中の記事のカテゴリに色をつけるスニペット

検索のカスタマイズ

検索のカスタマイズについてのスニペットです。

検索フォームのカスタマイズ

掛け合わせ検索など、標準の検索フォームをカスタマイズする方法についてです。

記事投稿が増加したりカスタムフィールドを使用したりと、サイト内のコンテンツが増加すると、wordpressの標準で使用できる検索窓のテキスト検索だけでは物足りなかったりします。

この記事では、テキスト検索に「カテゴリ」「タグ」を組み合わせた絞り込み検索の作り方について解説しています。

プラグインなしでカテゴリやタグで検索の絞り込みを実装するスニペット

ACFで作ったカスタムタクソノミーと、WordPressのキーワード検索を掛け合わせて「AND」検索を行うスニペットです。

ゴリゴリにサイト内をいじったときに使うのにピッタリです。

掛け合わせ検索 プラグインなしでカスタムタクソノミーをプルダウンで掛け合わせたWordPressの絞り込み検索

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

以下の記事では、記事ページや固定ページに検索フォームを表示する方法について解説しています。

検索フォームのショートコード プラグインなしで記事ページや固定ページに検索フォームを表示するスニペット

検索フォームは、WordPressにも標準で付いていますがデフォルトの状態はベタでそのまま表示されます。

この検索フォームを、多少のアニメーションを使い「虫眼鏡アイコンをクリックすると、フォームがヒョイっと拡大されて現れる」ものをカスタマイズして作ってみました。

拡大される検索フォーム プラグインなしでアイコンをクリックすると WordPressの検索フォームが拡大されて 表示されるスニペット

検索結果のカスタマイズ

検索結果の表示方法をカスタマイズする方法についてです。

カスタム投稿ですが、通常の投稿や固定ページとは異なるので検索フォームと検索結果を分けようと思うと、ちょっと一手間必要です。

この記事は、そんなカスタム投稿用の検索フォームと検索結果を作るスニペットです。

検索結果のアイキャッチ カスタム投稿の検索フォームとページネイション付きの検索結果を作るスニペット

Googleの検索結果のように、WordPressの検索結果にハイライト表示をさせるスニペットについて解説していきます。

簡単なコピペでできてしまうので、検索結果の表示をカスタマイズしたい方は、この記事を参考にトライしてみてください。

プラグイン無しで検索結果にハイライト表示をさせるスニペット

外部リンクのカスタマイズ・出力

記事一覧や、記事ないに設置する外部リンクのカスタマイズについてです。一部APIを使っています。

WP REST APIで他のWordPress記事一覧を表示

他のWordPressサイトから情報を持ってきて出力する方法についてです。

JavaScriptの「3大フレームワーク」に数えられるReactで、指定したサイトの記事やカスタム投稿タイプなどの情報を取得して表示します。

シングルページアプリケーションの運用に興味ある方は以下の記事をご覧ください。

Reactのアイキャッチ画像 WP REST APIをReactでWordPressの記事一覧を表示させるスニペット [React版]

APIは便利です。

コードを色々書いたりする必要がなく、既存プログラムをそのまま利用できるので、空いた時間で他のことに時間を使えるので、重宝します。

そんなAPIですが、WordPressにもWP REST APIというAPIが標準で搭載されています。

WP REST APIのJavaScriptで他のWordPressの記事をJSONで出力

外部リンクのカスタマイズ

外部リンクをカスタマイズする方法についてです。

URLを入力するだけで「簡単にイケてる感じの外部リンク」ができるよう、外部リンク用カードのショートコードを作るスニペットです。

画像付きの外部リンクを作りたい方は、ぜひこの記事を参考にしてみてください。

リンクカードのイラスト プラグインなしで外部リンクの画像やテキストを取得してリンクカードで表示するスニペット

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

noteのアイキャッチイラスト プラグインなしでnoteの画像付き記事カードを表示させるスニペット

更新情報をWordPressで表示する際、そのサイト以外の場合、RSSを使うと簡単です。

この記事では、RSSを読み込んで記事のカードを画像付きで表示させる方法について解説しています。

RSSのイラスト プラグインなしでRSSを読み込んで記事のカードを画像付きで表示させる方法

記事(投稿)ページのカスタマイズ

目次を表示

記事の見出しタグを取得して、記事の目次を出力するスニペットです。

この記事は、記事のh2h3 の見出しタグを取得して、モーダルで表示させるスニペットについて解説しています。

極力プラグインを使いたくない方や、記事の目次をメインのエリア以外に表示させたい方は、この記事を参考にしてみてください。

プラグインなしでWordPressの記事の目次をモーダルで表示させるスニペット

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

そんな目次の挿入ですが、TOC+のプラグインを使わずにjQueryを使って実装することもできてしまいます。

目次を作るイラスト jQueryを使ってWordPressのプラグインなしでTOC+風の目次を実装するスニペット

条件分岐で表示の切り替え

条件を設定して、コンテンツの出し分けを行うスニペットです。

アクティブパラメータをURLに付与して、一つの投稿ページでテンプレートを出し分けする方法があります。

この記事では、そんな方法をプラグイン無しで実装するやり方について解説しています。

アクティブパラメータ プラグイン無しでアクティブパラメータを付与して投稿ページのテンプレートを出し分けする方法

WordPressの場合、関数のwp_is_mobile()を使って、アクセスしたデバイスを判別して要素の表示非表示を切り替えることができます。

この記事は、その条件分岐のコードをショートコードにして条件分岐させる方法について解説しています。

レスポンシブのアイキャッチ WordPressでPCとスマホで表示する要素を切り替える条件分岐のショートコード

Basic認証は、ページやファイルにアクセス制限をかけることができる認証方法の1つで、簡易的なセキュリティ対策に用いられる方法です。

この記事では、「.htaccess」ファイル等々を触らずに、特定の固定ページにBasic認証をかける方法を紹介しています。

Basic認証 プラグイン無しでWordPressの固定ページを指定してBasic認証

コンテンツの表示

コンテンツを制御するスニペットです。

コピペした記事は、Googleの検索評価でも上位に来ることはまずないと言いますが、それでもコピペ被害を受けたサイトやブログからしても、決して気持ちのいい思いはしないはずです。

コピペで悩んでる。もしくは画像をパクられる等、お困りの方は是非この記事をご覧頂き参考にしてください。

コピペ禁止のイラスト WordPressの記事のコピペや画像の保存をできなくするプラグインとプラグインなしのスニペット

縦書きのレイアウトと明朝系のフォントを併用して部分的に用いることで、しっとりとした和の雰囲気や、落ち着いた印象を出すことも可能です。

この記事では、記事部分に縦書きで段組表示をさせる方法について解説しています。

縦組みのイラスト コピペでできるWordPressの記事部分にレスポンシブの縦書きで段組ソース

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

ショートコード無しで実装するイラスト プラグイン無しで表示させるGoogleマップ・QRコード・期間限定内容表示のショートコードと実装方法

広告の表示

Google Adsence の広告系の表示方法をカスタマイズするスニペットです。

当サイトでも利用しているSANGOのテーマには、AdSenceの広告も簡単に貼れるウィジェットがあり、これに加えてSANGO公式のPOPURIのテーマを入れればもっとより簡単に広告を貼れます。

以下の記事では、それ以外のテーマで広告周りの運用を簡単にする方法について解説しています。

h2に広告を表示させるイラスト プラグイン無しで本文のh2タグの前にAdSenceの広告や任意のコンテンツを表示する方法

サイドバーのカスタマイズ

2カラムのサイトで、サイドに設置するコンテンツをカスタマイズする方法についてです。

記事投稿に比例して、タグの数がなかなか増えてしまうことがあります。

そこで、サイドバーのタグクラウドにもっと見るボタンを設置して、非表示要素をスライドダウンで表示させるのを、ショートコードの追加と併せて実装させました。

その方法について解説しています。

タグクラウドのイラスト WordPressにショートコードを追加してサイドバーのウィジェットにタグクラウドをアコーディオンで表示させる方法

WordPressテーマ「SANGO」専用のカスタマイズ

WordPressテーマ「SANGO」専用のカスタマイズ方法についてです。

当サイトでも使用している、WordPressテーマSANGOの記事の下部には、「前の記事・次の記事」として、前後の記事のリンクをデフォルトで出力してくれます。

この記事では、そんなSANGOの前の記事・次の記事を同じカテゴリで出力するカスタマイズについて解説していきます。

プラグインなしでSANGOの前の記事・次の記事を同じカテゴリで出力するカスタマイズ

SANGOのテーマには、標準で関連記事を任意で表示させる機能があり、関連性のある記事の表示はユーザーライクな機能です。

この関連記事だけでなく、同じようなデザインでその記事で付与したタグの記事を表示させる機能を作ってみました。

この記事では、SANGOのカード型デザインで同じタグを持つ記事を表示させる方法について解説しています。

SANGOタグ記事の出力のイラスト SANGOのカード型デザインで同じタグを持つ記事を表示するWordPressのソース

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

カード型デザインの関連記事の出力 プラグイン無しでSANGOのカード型デザインで関連記事を表示させるWordPressのソース

当サイトでも利用しているWordPressテーマSANGOは、見やすいデザインで内部最適化もされているイケてるテーマです。

普通に使っていて何も不都合はありませんが、この記事のちょっとしたカスタマイズを加えてあげると、さらにSANGOの力を発揮させることができます。

SANGOのテーマをさらに最適化するnoindexとcanonicalの追加カスタマイズ

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

この記事では、SANGOのヘッダーをスクロールで表示・非表示で切り替えるスニペットについて紹介しています。

jQueryのイラスト jQueryのコピペでできるSANGOのヘッダーをスクロールで表示・非表示で切り替えるスニペット

WordPressテーマ「Cocoon」専用のカスタマイズ

WordPressテーマ「Cocoon」専用のカスタマイズについてです。

当サイトで使用しているWordPressのテーマ:SANGOは、イケてるデザインですが、有名な無料テーマ:cocoonも高速で、かつイケてるデザインです。

以下の記事は、記事内のh2の見出しタグに、自動で番号をつける方法について解説しています。

h2の見出しのアイキャッチ プラグイン無しでcocoonの改造/自動でh2の見出しタグにCSSで番号をつける

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

cocoonの改造第1弾 プラグイン無しでcocoonの改造/関連記事の表示に合うレスポンシブのタブ

サイト内の情報を取得して表示

サイト内の情報を取得して表示するカスタマイズ方法についてです。

WordPressのカテゴリを取得・出力する関数は色々ありますが、含まれる記事数を取得して表示させる関数は、あまり多くなくググっても関連の内容は出てきません。

関数に演算子を足した構文で簡単にできるので、解説した内容をベースに活用してみてください。

プラグイン無しで全記事や特定のカテゴリの記事数を取得して表示させるスニペット

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

この記事では、固定ページでページ送り付きの全記事を表示する方法について解説しています。

全記事表示のアイキャッチ 固定ページでページ送り付きの全記事を表示する方法

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

投稿者一覧を作ろうとしている方は是非参考にしてみてください。

投稿者一覧のイラスト WordPressテーマSANGOに合いそうな投稿者一覧ページの作り方とコピペ用コード

閲覧履歴を基に、違うページを紹介するページを通販サイトでよく見かけますが、WordPressでもプラグインを入れることで簡単に実装可能です。

ですが、プラグインの場合CSSでデザインは整えることはできますが、出力項目のカスタマイズなど、ある程度制約がある中で使う必要もあったりするので、プラグインなしで実装する方が何かと便利です。

cookieのアイキャッチ プラグインなしでcookieを利用して閲覧履歴を表示するショートコードのスニペット

インタラクションな機能を追加

ユーザーがサイト内でアクションをしたら、表示を切り替えたりするカスタマイズについてです。

いざWordPressで「お気に入り」を実際にしようと思うと、有名なFavoritesなどのプラグイン がありますが、cookieを使えばこのお気に入り機能を簡単に実装できてしまいます。

このスニペットは、WordPressで通販系のサイトを作る時など、プラグインを使わずにお気に入り機能を追加したい方は、是非最後までご覧いただけたら嬉しいです。

cookieのイラスト プラグイン無しでお気に入りボタンと登録したページ一覧を表示させるスニペット

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

プラグイン無しでお気に入りに追加した記事をページ遷移せずにページ一覧で解除可能にするスニペット

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

この記事は、そんなプラグインなしでSNSのシェアボタンを設置する方法について解説していますので、チェックしておきましょう。

プラグインなしでSNSのシェアボタンを設置するスニペット

プラグインのカスタマイズや実装方法

プラグインのインストール方法や、カスタマイズ方法について解説しています。

プラグインの実装方法と使い方

プラグインのインストール方法や、カスタマイズについてです。

ブログでも「いいね」は、わざわざ文章を書き込まずにリアクションをする手段として広く浸透してきました。

かくゆうWordPressでも、この WP ULike をインストールするだけで、この「いいね」機能の実装が簡単にできてしまいます。

この記事では、WP ULikeを使ったカスタマイズについても解説しています。

WP ULike プラグイン WP ULike を使ってWordPressの記事や好きなところに「いいね」を実装するスニペット

WP Theme Test というプラグインを使えば、公開しているサイトはそのままにしながら、非公開の状態でカスタマイズできる方法が可能です。

以下の記事では、WP Theme Test を使って本番環境のテーマを非公開でカスタマイズする方法について解説しています。

WordPressプラグインのイラスト プラグイン WP Theme Test を使って本番環境のテーマを非公開でカスタマイズする方法

カスタムフィールドは、「テンプレートのコードを触ることなく、管理画面から簡単に更新できるようにしたい」時に重宝し、 そんな時にはAdvanced Custom Fields プラグインを使えば、複雑な条件なども設定しつつ、簡単にカスタムフィールドを作ることができます。

この記事は、カスタムフィールドの項目を、WP REST APIで取得して表示させるプラグインとスニペットの紹介の内容です。

RESTAPIのイラスト WP REST APIでACFのカスタムフィールドを表示させるプラグインとスニペット [jQuery版]

自作のプラグイン

自作でプラグインを作り、WordPress公式サイトへの登録方法や更新方法についてです。

以前、プラグインをWordPressの公式ディレクトリに申請〜公開しましたが、バージョンアップに手間取ることが多く、そのバージョンアップの方法と手順を備忘録として残した記事です。

かかかず
かかかず

毎度毎度記憶を遡るのも無理が出てきたので、その為のメモ的記事です。

自作したWordPressプラグインのバージョンアップの方法と手順

デザインを追加するカスタマイズ

ショートコードを作り、デザインを追加するスニペットです。

WordPressの記事内に、良かれと思いバナーを置いてみても、記事の文字量に埋れてしまい意図した導線としての機能を果たさない場面があります。

そこで、バナーのサイズや色味を変更して目立たせることができますが、外部サイトのバナーの場合、バナー自体をいじることができないので、それ以外のデザインでみやすくする必要があります。

そこで、CSSでバナー周りのデザインを補完して目立たせることができるので、方法を知っておくと非常に便利です。

ショートコードのイラスト ショートコードでバナーのデザインを補完するバナーブロックを表示させるスニペット

マテリアルデザインの中でも、カードと呼ばれるデザインはTwitterやFacebookをはじめ、多くのWebサイトで採用されているデザインです。

以下の記事では、WordPressにショートコードを追加して使用するカード型のデザインについて解説しています。

カード型デザインのショートコード WordPressにショートコードを追加して使用するカード型のデザイン

自分のサイトで合うようなデザインのオブジェクトを、ショートコードで呼び出せる仕様にしてあげることで、より一層サイトの更新も容易になり、サイトの世界観も作り込んでいくことができます。

以下の記事では、WordPressにショートコードを追加してアコーディオンを表示する方法について解説しています。

ショートコードのイラスト WordPressにショートコードを追加して使用するjsのアコーディオンのデザイン

会員限定のサイトを作るカスタマイズ

少し難易度が高めですが、プラグインなしで会員限定のサイト・ブログを構築するスニペットです。

WordPressで会員限定のサイトを作る場合、プラグインを入れるだけで構築できてしまいますが、今回は、会員限定のサイトをプラグインなしで作ってみます。

当サイトでも使っているWordPressテーマ「SANGO」をベースにして作ってみたサンプルもあるので、併せて参考にしてみてください。

メンバー限定 プラグインなしで会員のみが閲覧可能なWordPressを構築するスニペット

WordPress関数リファレンス

WordPressのカスタマイズで使う「関数」について解説しています。

WordPress には、便利な PHPの関数が多く定義されています。関数を使いこなして、自分好みのサイトを作りましょう。

以下のページでは、それらの関数を解説しています。

WordPress関数リファレンス WordPress関数リファレンス
カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影