目次
ショートコードとは?
ショートコードは、function.phpに書いたプログラム(関数)をブラケット([ ])で囲った短いコードで呼び出せる機能です。 投稿画面とテンプレート両方で呼び出すことができます。 ショートコードには「自己完結型ショートコード」と「囲み型ショートコード」の2種類があります。
https://www.kerenor.jp/shortcode-basic-usage/
要約するとワードプレス専用のお手軽タグです。PHPで自分で定義した関数を記事上で呼び出すことができるようになります。
賢威8専用ショートコード
賢威8では、共通コンテンツやリンクカードをはじめ、文字色の変更やおしゃれなボックスデザインなど、様々なショートコードが用意されています。サポートページに全て載っていますが、一々ログインして見に行くのも面倒なため、備忘録代わりに、自サイトに書き留め。
リンク
文字装飾系
文字の装飾をするためのショートコード
フォントカラー
[text color=aqua]水色に変わります[/text] [text color=navy]紺色に変わります[/text] [text color=red]赤色に変わります[/text] [text color=pink]ピンク色に変わります[/text] [text color=purple]紫色に変わります[/text] [text color=orange]オレンジ色に変わります[/text] [text color=green]緑色に変わります[/text] [text color=yellow]黄色に変わります[/text] [text color=olive]オリーブ色に変わります[/text] [text color=lime]ライム色に変わります[/text] [text color=black]黒色に変わります[/text] [text color=gray]灰色に変わります[/text] <span style="background-color: #333;">[text color=white]白色に変わります[/text]</span> [text color=brown]茶色に変わります[/text] [text color=blue]青色に変わります[/text][text color=aqua]水色に変わります[/text] [text color=navy]紺色に変わります[/text] [text color=red]赤色に変わります[/text] [text color=pink]ピンク色に変わります[/text] [text color=purple]紫色に変わります[/text] [text color=orange]オレンジ色に変わります[/text] [text color=green]緑色に変わります[/text] [text color=yellow]黄色に変わります[/text] [text color=olive]オリーブ色に変わります[/text] [text color=lime]ライム色に変わります[/text] [text color=black]黒色に変わります[/text] [text color=gray]灰色に変わります[/text] [text color=white]白色に変わります[/text] [text color=brown]茶色に変わります[/text] [text color=blue]青色に変わります[/text]
マーカー
[text type=marker color=orange]オレンジ色のマーカーが引かれます[/text] [text type=marker color=pink]ピンク色のマーカーが引かれます[/text] [text type=marker color=blue]青色のマーカーが引かれます[/text] [text type=marker color=lime]ライム色のマーカーが引かれます[/text] [text type=marker color=gray]灰色のマーカーが引かれます[/text] [text type=marker color=yellow]黄色のマーカーが引かれます[/text][text type=marker color=orange]オレンジ色のマーカーが引かれます[/text] [text type=marker color=pink]ピンク色のマーカーが引かれます[/text] [text type=marker color=blue]青色のマーカーが引かれます[/text] [text type=marker color=lime]ライム色のマーカーが引かれます[/text] [text type=marker color=gray]灰色のマーカーが引かれます[/text] [text type=marker color=yellow]黄色のマーカーが引かれます[/text]
注記の追加
複数行に渡るテキストの二行目以降に一文字分のインデントを自動付与するもの。
[note]※テキストが入ります。[/note][note]※注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト注釈テスト[/note]
マルチカラム
最大6カラム。スマホで見たところシングルカラムになっていたので、レスポンシブは微妙。サンプル表示している画像は縦横120pxなので、スマホでも2カラムなら入るはずだけど・・・。
通常カラム
[col 2][col_inner]■[/col_inner][col_inner]■[/col_inner][/col] [col 3][col_inner]■[/col_inner][col_inner]■[/col_inner][col_inner]■[/col_inner][/col] [col 4][col_inner]■[/col_inner][col_inner]■[/col_inner][col_inner]■[/col_inner][col_inner]■[/col_inner][/col] [col 5][col_inner]■[/col_inner][col_inner]■[/col_inner][col_inner]■[/col_inner][col_inner]■[/col_inner][col_inner]■[/col_inner][/col] [col 6][col_inner]■[/col_inner][col_inner]■[/col_inner][col_inner]■[/col_inner][col_inner]■[/col_inner][col_inner]■[/col_inner][col_inner]■[/col_inner][/col][col 2][col_inner]
カラム間スペースなし
[col 2][col_ns]■[/col_ns][col_ns]■[/col_ns][/col] [col 3][col_ns]■[/col_ns][col_ns]■[/col_ns][col_ns]■[/col_ns][/col] [col 4][col_ns]■[/col_ns][col_ns]■[/col_ns][col_ns]■[/col_ns][col_ns]■[/col_ns][/col] [col 5][col_ns]■[/col_ns][col_ns]■[/col_ns][col_ns]■[/col_ns][col_ns]■[/col_ns][col_ns]■[/col_ns][/col] [col 6][col_ns]■[/col_ns][col_ns]■[/col_ns][col_ns]■[/col_ns][col_ns]■[/col_ns][col_ns]■[/col_ns][col_ns]■[/col_ns][/col][col 2][col_ns]
カラーボックス
[box class="box_style_blue" title="タイトルが入ります"]コンテンツが入ります。コンテンツが入ります。[/box] [box class="box_style_green" title="タイトルが入ります"]コンテンツが入ります。コンテンツが入ります。[/box] [box class="box_style_orange" title="タイトルが入ります"]コンテンツが入ります。コンテンツが入ります。[/box] [box class="box_style_red" title="タイトルが入ります"]コンテンツが入ります。コンテンツが入ります。[/box] [box class="box_style_pink" title="タイトルが入ります"]コンテンツが入ります。コンテンツが入ります。[/box] [box class="box_style_yellow" title="タイトルが入ります"]コンテンツが入ります。コンテンツが入ります。[/box] [box class="box_style_gray" title="タイトルが入ります"]コンテンツが入ります。コンテンツが入ります。[/box][box class=”box_style_blue” title=”タイトルが入ります”]コンテンツが入ります。コンテンツが入ります。[/box] [box class=”box_style_green” title=”タイトルが入ります”]コンテンツが入ります。コンテンツが入ります。[/box] [box class=”box_style_orange” title=”タイトルが入ります”]コンテンツが入ります。コンテンツが入ります。[/box] [box class=”box_style_red” title=”タイトルが入ります”]コンテンツが入ります。コンテンツが入ります。[/box] [box class=”box_style_pink” title=”タイトルが入ります”]コンテンツが入ります。コンテンツが入ります。[/box] [box class=”box_style_yellow” title=”タイトルが入ります”]コンテンツが入ります。コンテンツが入ります。[/box] [box class=”box_style_gray” title=”タイトルが入ります”]コンテンツが入ります。コンテンツが入ります。[/box]
センター寄せパターン
[box class="box_style_blue al-c" title="タイトルが入ります"]コンテンツが入ります。コンテンツが入ります。[/box][box class=”box_style_blue al-c” title=”タイトルが入ります”]コンテンツが入ります。コンテンツが入ります。[/box]
連続改行
num回数<br>タグを連打できる。ワードプレス自体のbr連続使用不可の制約を無視できる。余白の簡易整形に。
テキストが入ります。[br num=3]テキストが入ります。テキストが入ります。[br num=3]テキストが入ります。
リンクカード
urlパラメータ以外は省略可能
- url・・・リンク先URL
- src・・・サムネイル画像のパス
- title・・・リンク先ページのタイトル
- description・・・リンク先ページの要約文
[post_link url="https://lets-hack.tech/category/wordpress/keni/" src="https://support-keni.rider-store.jp/support/members/download/keni8/manual/wp-content/uploads/2018/07/short-001.jpg" title="賢威のカスタマイズ" description="賢威のカスタマイズの記事一覧ページです。目次の位置、パンくずリスト、子テーマ、フッターパネルなどのカスタマイズを紹介しています"]
まとめ
フォントカラーくらいならカスタムHTMLでspanタグ振った方が早そう。
カラーボックスはおしゃれな感じでGOOD!
こちらの記事でも賢威専用のカスタムパーツを紹介しています。
Let's Hack Tech


コピペで使える、賢威8カスタマイズ専用のCTAデザインパーツHTML|チートシート | Let's Hack Tech
CTAとは? CTAとは”Call to action”の略で、日本語で言えば「求める行動」です。 単なる用語の理解でなく、Webマーケティングでの重要性を知ってほしいので、説明し...
リンク
コメント