【コピペOK】WordPressでショートコードを作成しよう!

【コピペOK】WordPressでショートコードを作成しよう!

ショートコードとは

ショートコードは、簡単に言うと

MEMO
ここに文章

↑こういうボックスを簡単に呼び出すことができるコードです。

スマホにもある、よく使う単語をユーザー辞書としてキーボードに登録できる機能と同じだと思ってください。

 

上記のようなボックスを呼び出すには、基本的に毎回HTMLを記述しなければなりません。

今回ご紹介するのは、”よく使うHTMLを登録できるプラグイン”を応用したものです。

 

初心者の方でもコピペすれば使えるようになりますが、FTPソフトを使用できればより簡単に作成できます。

FTPソフトは「WinSCP」がおすすめ おすすめのFTPソフト「WinSCP」の使い方

 

作成するショートコード

今回作成するのは、

Point

ここに文字

 

↑このボックスです。

これを、HTMLを毎回記述しなくてもクリック一つで挿入できるように設定していきます。

 

事前準備

ショートコードを挿入するのに便利なプラグインと、オリジナリティを出すためにWebフォントを使用します。

Webフォントは必須ではないので、好みにお任せします。

 

プラグインをインストールする

まずは「AddQuicktag」というプラグインをインストールして有効にしてください。

AddQuickTag

このプラグインは、登録した単語を投稿画面で呼び出すためのものです。

 

本来はHTMLを登録するだけでも良いのですが、WordPressの投稿画面ではHTMLを挿入する場合、[ビジュアル]だとテキストとして認識されるので[テキスト]にタブを切り替えなければなりません。

それでは面倒且つ効率的ではないので、ショートコードを使って[ビジュアル]と[テキスト]のタブを切り替えずにボックスを挿入します。

 

Font Awesomeを使用できるようにする

Font Awesomeとは、Webアイコンを表示できるようにするサービスです。

MEMO
ここに文章

このボックスでいうところのMEMOの左側にある絵文字みたいなものがWebアイコンです。

 

では、header.phpの中にある<head>~</head>タグの間に以下のコードを貼り付けてください。

<head>~</head>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

 

FTPソフトから設定出来ない方は、

ダッシュボード→外観→テーマエディター→右側のheader.php

を選択してください。

 

色々コードが書かれていると思いますが、

<head>

<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>

</head>

このように<head>タグの間に入っていれば大丈夫です。

不安な方は</head>のすぐ上に行を追加して貼れば確実です。

 

ショートコードを作成する

先述しましたが、以下が完成例です。

補足などを書きたいときに使えそうなボックスですね。

Point

ここに文字

 

functions.phpに記述する

functions.phpに以下のコードをコピーして貼ってください。

FTPソフトが使えない方はWordPressの

ダッシュボード→外観→テーマエディター→右側のfunctions.php

から追記してください。

注意

必ずバックアップを取ってから作業を行ってださい。

 

functions.php
// ポイント
function box1Func( $atts, $content = null ) {
    extract( shortcode_atts( array(
        'class' => 'box1',
    ), $atts ) );

    return '<div class="' . $class. '"><p class="point"><i class="fas fa-lightbulb"></i>Point</p><p>' . $content . '</p></div>';
}
add_shortcode('box1', 'box1Func');

貼れたら保存しましょう。

 

CSSを記述する

style.cssに以下のコードをコピーして貼ってください。

style.css
/* ポイント */
.box1{
  background-color: #f6ffb9;
  padding: 1em 1em 1em 1em;
}

.box1 .point{
  color: #f39800;
  font-weight:bold;
  font-family: 'メイリオ';
}

.point .fas{
  margin-right:0.5em;
}

 

もし背景色などを変更したりカスタマイズしたい方は、以下を参考にしてください。

CSSカスタマイズ

 

AddQuicktagの設定

ダッシュボード→設定→AddQuicktag

を開いてください。

 

AddQuicktag

画像を参考に設定してください。

ボタンのラベルは自分がわかりやすい名前に変更しても大丈夫です。

 

開始タグのところに

[box1]ここに文字[/box1]

と入力します。

終了タグは空白です。

 

ビジュアルエディター、post、pageにチェックをしたら保存してください。

 

ショートコードを挿入する

ショートコードを挿入したいときは、投稿画面の「Quicktags」を選択します。

ショートコード使い方1

 

先程入力したラベルを選択します。

私が入力した通りなら「ポイント」ですね。

ショートコード使い方2

 

本文にショートコードが挿入されたのを確認します。

ショートコード使い方3

 

プレビューで以下のボックスが表示されていたら完成です!

Point

ここに文字

 

”ここに文字”のテキストは自由に変更して使用してください。

 

応用

コードを少し書き換えることで、以下のようなボックスを作成することができます。

注意

ここに文字

 

このボックスを作成したい場合は、functions.phpに以下を記述します。

functions.php
// 注意
function box2Func( $atts, $content = null ) {
    extract( shortcode_atts( array(
        'class' => 'box2',
    ), $atts ) );

    return '<div class="' . $class. '"><p class="caution"><i class="fas fa-exclamation-triangle"></i>注意</p><p>' . $content . '</p></div>';
}
add_shortcode('box2', 'box2Func');

 

style.cssは以下の通りです。

style.css
/* 注意 */
.box2{
  background-color: #ffc4c4;
  padding: 1em 1em 1em 1em;
}

.box2 .caution{
  color: #ff0000;
  font-weight:bold;
  font-family: 'メイリオ';
}

.caution .fa{
  margin-right:0.5em;
}

 

AddQuicktagのラベルは「注意」にしましたが、自由に設定してください。

ショートコード注意

 

当ブログは有料テーマの機能を使用しているのでデザインが違いますが、背景色などはご自身のブログのテーマに合った色を使用すると馴染むのでカスタマイズしてみてください。