• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • おすすめテーマ
  • おすすめプラグイン
  • お問い合わせ
FOXWP / WordPressプラグイン / AddQuickTagの使い方実践編「第4回:ショートコード」

AddQuickTagの使い方実践編「第4回:ショートコード」

2018年4月28日 2020年4月13日

この記事では、WordPressプラグインのAddQuickTagでショートコードを挿入する方法を解説します。

「まだAddQuickTagをインストールしていない方」や「AddQuickTagってなに?という方」は、AddQuickTagの設定方法と使い方の記事を読んでみてください。インストール方法や基本的な使い方について説明しています。

AddQuickTagの設定方法と使い方

目次 非表示
1 ショートコードはどうやって挿入するの?
2 functions.phpにショートコードを設定する
2.1 広告用のショートコードを設定する
3 AddQuickTagに広告用のタグを設定する
4 エディターでショートコードを挿入してみよう

ショートコードはどうやって挿入するの?

WordPressで記事内にショートコードを挿入する手順は次の通りです。

  1. functions.phpにショートコードを設定する
  2. エディターで登録したショートコードを記述する

ショートコードはもちろん手入力されても大丈夫です。しかし、ショートコードが増えてくると何を登録したか覚えきれなくなるでしょう。

AddQuickTagでわかりやすいボタン名を指定しておけば、ショートコードをたくさん設定しても迷うことなく使用できます。

使わないショートコードは、非表示にすればいいだけです。管理も簡単なのがAddQuickTagの魅力です。

今回は、AddQuickTagを使って1クリックでGoogle Adsenseの広告を挿入できるショートコードを作成してみます。

functions.phpにショートコードを設定する

まずショートコードを設定するための方法を確認します。

ショートコードを設定するには、関数を定義する必要があります。

say_hello(){
    return 'Hello World!';
}
add_shortcode( 'hello', 'say_hello' );

関数と聞くと難しい印象があるかもしれませんが、仕組みは簡単です。

ショートコードを定義するための関数の内容は、基本的に次のようになります。

ショートコードの関数

関数が書けたら、あとは定義したショートコードをエディターに記載するだけです。

エディターでショートコードを書く場合は、[hello]のように関数で定義した文字列を[]で囲む必要があります。忘れないようにしましょう。

[hello]

上記の例では、これでWebサイトを表示するとショートコードの部分が「Hello World!」の表示に置き換わります。

広告用のショートコードを設定する

今回紹介するのは、アドセンス広告の挿入方法です。

基本的には次のコードをfunctions.phpにコピペした後に、※の行をご自身のアドセンス広告のコードに置き換えるだけです。

function show_ad() {
    $script = <<< EOF
※ここにGoogle Adsenseの広告コードを記載
EOF;
    $output = '&lt;div class="ads-style"&gt;' . $script . '&lt;/div&gt;';
    return $output;
}
add_shortcode('<span class="orange">ads</span>','show_ad');

functions.phpファイルの編集方法は、次の記事を参考にしてください。

WordPressでfunctions.phpファイルを編集する方法

AddQuickTagに広告用のタグを設定する

AddQuickTagでショートコード用のクイックタグを使用するには、事前に設定が必要です。ここではショートコード用のタグの設定方法について説明します。

WordPress管理画面のメニューより設定 ≫ AddQuicktagをクリックし、AddQuickTagの設定画面へ移動します。

AddQuickTagの設定画面へ移動する

設定画面では、次のように1行ずつクイックタグを設定できます。すぐ下にあるクイックタグの設定内容を参考にマーカー用のタグの設定を行ってください。

ショートコードタグの設定

クイックタグの設定内容

ボタン名 開始タグ 終了タグ
ショートコード(広告) [ads]

※終了タグには何も入力する必要はありません。

ボタン名、開始タグを埋めたら、右の欄にあるチェックボックスも忘れずにチェックを入れてください。

上記の項目の設定を終えると次のようになります。

クイックタグの設定完了後の画面

これで準備ができました。それでは、実際にクイックタグを使用してみましょう。

エディターでショートコードを挿入してみよう

AddQuickTagで追加したクイックタグを実際に使う手順を見ていきましょう。今回は、テキストエディターで説明を行います。

まずは投稿編集画面でテキストエディターを開き、設定したクイックタグが追加されていることを確認してください。

クイックタグの追加の確認

ショートコードを入力したい箇所にカーソルを合わせた状態で、ショートコード(広告)用のクイックタグボタンをクリックします。

クイックタグボタンをクリックする

そうすると、カーソルがあった箇所に設定したショートコードが挿入されます。

ショートコードが挿入された

Web表示に切り替えれば、ショートコードに設定した内容が表示されます。

他にもよく使うタグは、AddQuickTagで設定しておきましょう。

AddQuickTagで登録しておくと便利なタグ

  • 見出し
  • マーカー
  • 枠・ボックス
  • 吹き出し

カテゴリー:WordPressプラグイン タグ:AddQuickTag

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル

おすすめプラグイン

WordPressプラグイン「TablePress」の使い方

WooCommerceの設定方法と使い方

LuckyWP Table of Contentsの使い方と設定方法

【2018年版】コメント機能を改善するおすすめWordPressプラグイン

【2020年版】コメント機能を改善するおすすめWordPressプラグイン

おすすめテーマ

おすすめ企業サイト向けWordPressテーマ

さっとクオリティの高い企業サイトを作成できるWordPressテーマ特集

ヘッダーに動画を設定できるWordPressテーマまとめ

ヘッダーに動画を設定できるWordPressテーマまとめ

ポートフォリオ向けWordPressテーマ

ポートフォリオ向けWordPressテーマ|魅せるギャラリーが簡単にできる

アイキャッチ画像不要のWordPressテーマ

WordPressでアイキャッチ画像を表示したくないならZEROがおすすめ!

Previous Post: « AddQuickTagの使い方実践編「第3回:枠・ボックス」
Next Post: AddQuickTagの使い方実践編「第5回:吹き出し」 »

Primary Sidebar

当サイトの利用テーマ

Genesis Theme Framework for WordPress
詳しく見る

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
詳しく見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

カテゴリー

  • WordPress
    • WordPressのSEO対策
    • WordPressのセキュリティ対策
    • WordPressの使い方
    • エラー・トラブル
    • カスタマイズ
  • WordPressテーマ
    • Divi
    • おすすめテーマ
    • テーマカスタマイズ
  • WordPressプラグイン
    • プラグインカスタマイズ
  • WordPress入門講座
  • WordPress設定関連
  • お役立ち情報
    • メモ
  • アフィリエイト
    • Amazonアフィリエイト
  • ドメインレジストラ
    • お名前.com
  • レンタルサーバー
    • ColorfulBox
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
    • PBN Lab
    • Rank Tracker
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2021 FOXWP All rights reserved.