MENU
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
あらゆるモノにHackする、探究者の読み物。
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
  1. ホーム
  2. ワードプレス
  3. 賢威
  4. 賢威8で使えるショートコード集一覧|チートシート

賢威8で使えるショートコード集一覧|チートシート

2020 7/22
賢威
2019-04-142020-07-22
賢威8で使えるショートコード集チートシート
目次

ショートコードとは?

ショートコードは、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]logo[/col_inner][col_inner]logo[/col_inner][/col] [col 3][col_inner]logo[/col_inner][col_inner]logo[/col_inner][col_inner]logo[/col_inner][/col] [col 4][col_inner]logo[/col_inner][col_inner]logo[/col_inner][col_inner]logo[/col_inner][col_inner]logo[/col_inner][/col] [col 5][col_inner]logo[/col_inner][col_inner]logo[/col_inner][col_inner]logo[/col_inner][col_inner]logo[/col_inner][col_inner]logo[/col_inner][/col] [col 6][col_inner]logo[/col_inner][col_inner]logo[/col_inner][col_inner]logo[/col_inner][col_inner]logo[/col_inner][col_inner]logo[/col_inner][col_inner]logo[/col_inner][/col]

カラム間スペースなし

[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]logo[/col_ns][col_ns]logo[/col_ns][/col] [col 3][col_ns]logo[/col_ns][col_ns]logo[/col_ns][col_ns]logo[/col_ns][/col] [col 4][col_ns]logo[/col_ns][col_ns]logo[/col_ns][col_ns]logo[/col_ns][col_ns]logo[/col_ns][/col] [col 5][col_ns]logo[/col_ns][col_ns]logo[/col_ns][col_ns]logo[/col_ns][col_ns]logo[/col_ns][col_ns]logo[/col_ns][/col] [col 6][col_ns]logo[/col_ns][col_ns]logo[/col_ns][col_ns]logo[/col_ns][col_ns]logo[/col_ns][col_ns]logo[/col_ns][col_ns]logo[/col_ns][/col]

カラーボックス

[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マーケティングでの重要性を知ってほしいので、説明し...
リンク
賢威
ショートコード ワードプレス 賢威
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする コメントをキャンセル

email confirm*

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
人気記事
  • IQテストいくつか受けてみました
    ネット上で信憑性がありそうなIQテスト、5種類まとめて受けた結果…
  • hayate
    メルカリの商品を世界最速で購入するためだけのアラートツール
  • 【Python】BeautifulSoupの使い方・基本メソッド一覧|スクレイピング
  • Pythonファイルのexe化
    【悲報】PyInstallerさん、300MBのexeファイルを吐き出すようになる
  • Amazon Echo アレクサのコマンドまとめ
    AmazonEchoの使い方とできる事、アレクサへの指示コマンド一覧
最近の投稿
  • 正規表現処理の濁点でハマった話2024-12-12
  • 保護中: 疾風v2更新履歴2024-05-31
  • 【自営・経営者向け・税金も】クレジットカードガチ勢による最強クレカ解説2023-10-23
  • PyQt5 QListWidget の item削除でtextBoxのフォーカスが奪われる2023-03-05
  • WordPressからのメールが届かない時の調査と解決法2023-02-27
目次
目次