初心者向けLuxeritas新機能定型文＆ショートコード作製機能の使い方
どうも。
Luxeritas3.0.0アップデート記念ということで勝手に盛り上がって書きまくります。それぐらいうれしい。
ホントはアップデートのやり方（子テーマ編）を書こうと思っていたんですが先にこっちが書きやすかったので。
新機能をふんだんに使って新機能定型文＆ショートコード作製機能の使い方についてご説明していきます。
定型文とショートコードの使い方
どういった使い方か？
初見では使い方がなかなかイメージしにくい本機能…。（たぶんｗ）
ざっくり言えば決まった文章・コードを登録しておくことで編集画面上から一発で挿入出来るようになるというもの。
例えば、
どうもッッ！！中下でぇす♪おはこんばにちは～
という、いかにもっぽい挨拶を全ての記事の冒頭でやりたいと思った時。
いちいち手打ちするのは、クソほど面倒くさいですがこの文章を「挨拶」というラベルで定型文に登録しておけば、クリック一・二発で出してこれるという感じです。
さらに、これを応用すれば、例えば「ボックスで囲ったオシャレな箇条書きを出したい！」と思った時に＜div class="boxoshare"＞とかを直接打たなくても定型文やショートコードとして出してこれるということです。divなんちゃら…と直接打つのは結構面倒くさいですよね？
今まではこれをfunction.phpに記述して使用していたんですがphpの知識が無くても、手が出しやすくなったということです。
本機能は定型文の方が初心者でも扱いやすく、ショートコードの方はアレンジしにくいかもしれません。使ってみた感じ。ショートコードの方はサンプルを真似しないと分からないかもです。
またこういった機能は、アドセンスを記事内に挿入する際にも重宝することになりますのでそれぞれざっくりとご説明をば。
アドセンスに関して
一応最初に不具合っぽいのを…。
と言ってもほんとに不具合なのかわかりませんが、ショートコードの方のサンプル、中身（アドセンスコード）だけを変更して使ってみたところ全部記事タイトル下に集められるんですがｗｗ（記事内に4つバラバラに挿入→記事タイトル下に全て集合というカオス）
なんでしょうかね？原因わからず…定型文の方でやるとうまいこと行きましたので、今回アドセンスのショートコードは保留します。
追記：ver3.0.2にて不具合修正されました。
ショートコード編
では早速基本的な使い方を。画像はクリックで拡大出来ます。
WP管理画面からLuxeritas項目＞定型文登録を選択後一番端っこ、4番目の「サンプル登録（ショートコード）」タブをクリック。
すると4つ分のサンプルが表示されます。使いたいものと似ているサンプルにチェックを入れ、ページ下部の保存を押すと該当するサンプルのショートコードが2番目のタブ「ショートコード一覧」に追加されます。※同名のショートコードは作製出来ませんので、サンプルで有効に出来るのはそれぞれ1個限りです。
試しに「1. 単純に文字列を表示するだけのサンプル」を有効にし、リストから編集を押してみると…。
<p>
Flout ’em and scout ’em<br />
And scout ’em and flout ’em<br />
Thought is free.
</p>
このような内容が書かれているのがわかります。記事本文内に［simple_line_output］と書けばこの文章が表示されるってことですね。
同様に「2. 囲み型ショートコードを利用するサンプル」を見てみると、
$contents = '
<p style="font-weight: bold; font-size: 2.0em; color: red;">' . $contents . '</p>
';こんな感じで書いてあります。
要は囲った段落（＜ｐ＞タグ）内の「文字の太さ」と「大きさ」、「色」を指定していることがわかりますか？
この［enclosing_shortcode］で「こんにちは」という文字を囲うとこうなります。↓
大体ショートコードのニュアンスはわかりましたかね？ｗ
こっから実用例を。
箇条書きっぽくする
準備
まずはCSSをスタイルシートに書いておきます。「箇条書き」のCSSデモを探してくるか、以下をCSSにコピペし下準備しておきます。
/* 箇条書き用 */
.box6 {
display: block;
background: #fccffa;
box-sizing: border-box;
border: 2px solid #f2fc64;
padding: 0.5em 0.3em 0.5em 0.3em;
width: 80%;
margin: 1.5em auto;
color: #120a3f;
}
.box6 li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;
font-weight: bold;
}
.box6 li:before {
font-family: FontAwesome;
content: "\f00c";
position: relative;
left : 0.1em; /*左端からのアイコンまで*/
color: #088c7f; /*アイコン色*/
padding: 0 8px;
}
.box6 p,ul {
margin: 0;
padding: 0;
}
.box6 ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}少し長いですが、実際に今使っているものを流用。（あんま気に入ってないですがｗ）これを指定しておかないと何も見た目変わりませんので注意。
ショートコード作製
次はショートコードを作ります。ショートコード作製画面へ。
今回は実際に当ブログで使用しているものの使い回しですので、上のCSSをコピーして試す場合はクラス名は「box6」のままで大丈夫です。全部コピペするだけ。
それ以外でご自身の箇条書き用CSSを用意した場合は下記コード内の「box6」部分を変えてください。
$contents = '
<div class="box6">' . $contents . '</div>
';ラベルとショートコードはそれぞれ任意のもので大丈夫です。わかりやすいもので。うちではラベル：「箇条書き」 ショートコード：「itemization」としました。
コンテンツ部分に上記コードを入れて「PHP Code」「囲み型」にそれぞれチェックを入れてください。
その後、記事作成画面でテストしてみましょう。
「ショートコード」ボタンから、さっき決めたラベルを選択（僕の場合は「箇条書き」）すると内容入力画面が出ます…がここはとりあえず一端閉じて、こんな感じで箇条書きを書いてみてください。（内容入力画面ではhtmlタグは使えない模様。たぶん）
プレビューしてみると。
こうなっていれば、出来上がり。
間違って記事アップしないよう念の為非公開を選択しておいてくださいねｗ
合わせ技
少し発展させたものを。
準備その2
以下をCSSに追記してください。
/* タイトル付き */
.box2 {
position: relative;
margin: 2em 0;
padding: 0.8em 1em 0.6em 1em;
border: solid 3px #95ccff;
border-radius: 8px;
font-weight: bold;
}
.box2 span.box-title {
position: absolute;
display: inline-block;
top: -11px;
left: 13px;
padding: 0 8px 0 27px;
line-height: 1;
font-size: 17px;
background: transparent;
color: #f762c0;
font-weight: bold;
}
.box2 span.box-title:before {
font-family: FontAwesome;
content: "\f0a4";
position: absolute;
left : 0.3em; /*左端からのアイコンまで*/
color: #a50b2a; /*アイコン色*/
}
.box2 p ul {
margin: 0;
padding: 0;
}他所様を参考にしているのでクラス名が雑ですがさっきとは違うボックスを作製します。
コメントアウトに書いてあるようにタイトル付きのボックスを呼び出してみます。
これは元々function.phpに2つのショートコードを記述してやってたんですが、どうやら本機能では囲み型IN囲み型は無理な模様。
こうなりました↑。ショートコード2が無反応に。
…なので少し工夫して囲み型ショートコードに囲み型定型文をぶち込むという形をとります。
ショートコードの方は新規作成で新しいラベル・ショートコードを作ります。内容はさっきのをコピペしてクラス名（box○の部分）だけ変更で大丈夫です。「box2」または任意のものに変えてください。
定型文を作製
定型文はサンプル要りません。文字を入れるだけですからね。
直接定型文＞新規作成を選択。まず囲み型にチェックを入れてから…
こんな感じで入力します。今回は＜span＞で。
<span class="box-title">一応書いておきます。閉じタグは簡単なので手打ちでｗ
保存できたら、記事作製画面に移行します。
まずはショートコードで外枠を出して内容は入力せずカーソルをショートコードの間に合わせてから、定型文ボタンを押し、さっきのタイトル用の定型分を呼び出し。
今回は入力画面で使いたいタイトルを書きます。今回は「ねたばれ」にします。
その後＜/span＞とショートコードの閉じタグの間に内容を書き加えれば完成です。ビジュアルエディタじゃわかりにくいのでテキストエディタに変更推奨。
こんな感じ。ちょっとした補足なんかに実際使ってます。これは気に入ってるｗ
注意点
ショートコード使用時の注意点として、記述方法を間違えてしまうと使用した際「503エラー」が出ます。
つまりfunction.phpでやらかした時と同じで、どうしようも無くなります。ただそのショートコードを編集画面から消し去れば復旧してくれるので大丈夫ですが…。
ショートコードの方はphp言語で書かなきゃいけないのでしっかりサンプルを真似した方がよろしいです。
アドセンスコード
先程述べた通り、アドセンスに関してはショートコードではうまいこと行きませんでした。自分の環境では、ですが。
なので定型文に貼り付けます。
まぁこれは特にやること無いんですが。
3番目の定型文サンプルでアドセンス分を追加。
コードの部分を自分のアドセンスコードに貼り替え。
スポンサーリンクに関しても変更加えても大丈夫です…が僕個人的にはここでは記事内広告を使ってます。のでラベル部分は消してもOKです。
ラベルについては以下を参照ください↓
https://ksukelife.com/blog/778/まとめ
長くなり過ぎたので3番目の引数どうこうのショートコードは初心者には扱いにくいのでとりあえずスルーします。また時間あれば取り上げます。
ちょっとしたアクセントにボックス系を使う人は多いですのでぜひご使用してみては…。
また吹き出し機能についてはまだ使用するビジョンが見えてないので今回は触れませんでしたｗ
…が他のサイトさんなんか見てると、非常に見やすいですよね。「うちでもなんかやりてぇなぁ」と思うのが正直な所。
まぁ吹き出しの方は説明が多い感じでしたので、使い方に困ることも無いのではないかな？っとパッと見思ったので後回しにしました。
あと言い忘れてましたが、定型文・ショートコード共に「ビジュアルエディタ」「テキストエディタ」どっちに書いても大丈夫です。融通利きます。
今回は以上(´・ω・`)