Cocoonで使える[ショートコード]のオプションと使い方まとめ

Cocoonで使える[ショートコード]のオプションと使い方まとめ

【おまけ】WordPress標準で使えるショートコード

ビジュアルエディターを利用していればエディター上の設定で操作出来るのでオプションの書き方は意識せずに利用出来るかと思います。

ギャラリー表示

メディアに投稿されている画像をギャラリー表示できます。

ショートコード(基本形)
[gallery]
サンプル

オプション

属性説明記述方法初期値
ids表示する画像ID
※エディター上で作業すれば自動で指定してくれる
数値(整数)
orderby画像の表示順序の基準menu_order / title / post_date / rand / ID
(手動並べ替え/ライブラリタイトル/日付/ランダム/ID)
menu_order ID
order表示順のソートASC / DESC (昇順/降順)ASC
columnsカラム数を指定数値(整数)
0の場合: 改行タグが挿入されない
3
id投稿IDを指定。指定した投稿に添付された画像を表示する数値(整数)※複数の場合カンマで区切る
指定なし: 現在の投稿が対象になる
(空欄)
size画像のサイズを指定thumbnail / medium / large / full
(+add_image_size()で登録したサイズ)
thumbnail
itemtag画像とキャプションを囲むタグを指定HTMLタグ名dl
icontagギャラリーの画像を囲むタグを指定HTMLタグ名dt
captiontagキャプションを囲むタグを指定HTMLタグ名dd
link画像のリンク先file / none
(画像ファイルいに直接リンク/リンクなし)
添付ファイルのパーマリンク
include表示したい添付画像のIDを指定数値(整数)※複数の場合カンマで区切る(空欄)
exclude表示したくない添付画像のIDを指定
※includeの値が優先されます
数値(整数)※複数の場合カンマで区切る(空欄)
使い方

画像にキャプションを付ける

画像の下にキャプション(テキスト)を併記する

ショートコード(基本形)
[caption]<img> キャプション[/caption]
サンプル

にゃおー!

オプション
属性説明記述方法初期値
idHTMLタグのID属性を指定idで使用できる英数字(空欄)
classHTMLタグのclass属性を指定classで使用できる英数字(空欄)
alignキャプションの整列alignnone / aligncenter / alignright / alignleft
(指定なし/中央寄せ/右寄せ/左寄せ)
alignnone
widthキャプションの幅をピクセス数で指定(必須)数値(整数)(空欄)
使い方

オーディオ埋め込み

音声ファイルを埋め込み表示する

ショートコード(基本形)
[audio]
使い方

動画の埋め込み

動画ファイルを埋め込み表示する

ショートコード(基本形)
[video]
使い方

プレイリストを表示

ショートコード(基本形)
[playlist]
使い方

埋め込み

埋め込んだ動画等のサイズを指定

ショートコード(基本形)
[embed width="XXX" height="XXX"]https://URL[/embed]
メモ
Cocoonではショートコードでのサイズ指定は効かないようです。
使い方

コメント

  1. Mr. Mike より:

    Hello こんにちは,

    I want to know how to do tab wrap.

    https://i.imgur.com/Ih74qEN.png

    Sorry, my Japanese is not good.

    Please teach me.

    • 草村 草村 より:

      Hello こんにちは!

      そのタブ切り替えは独自にカスタマイズしたものです。
      The tab switching is customized by oneself.

      少し複雑なHTMLになりますが解説させていただきます。
      It will be a little complicated HTML, but I will explain.

      英語で伝える事が難しいため日本語の後にGoogle翻訳で翻訳した英語を記載します。
      As it is difficult to communicate in English, I will write English translated with Google Translate after Japanese.

      まずCocoonの子テーマのstyle.cssに以下のCSSをコピペしてください。
      First, copy and paste the following CSS into style.css of Cocoon Child theme.

      .tab-container {
          border-top: 3px solid #68a6c5;
      }
      .tab-content {
          height: 0;
          overflow: hidden;
          transition: opacity .8s;
          opacity: 0;
      }
      .tab-label {
          color: #fff;
          background: #cbcfd2;
          padding: 3px 12px;
          display: inline-block;
          font-size: 14px;
          position: relative;
          text-shadow: 0 -1px 0 rgba(0,0,0,.2);
      }
      .tab-label:before {
          content: '';
          border-top: 10px solid #fff;
          border-left: 10px solid rgba(0, 0, 0, .25);
          position: absolute;
          top: 0;
          right: 0;
          box-shadow: 0 0 1px rgba(255,255,255,.3);
      }
      .tab-label:hover:before {
          border: none;
      }
      .tab-checkbox:checked+.tab-label {
          background: #68a6c5;
      }
      .tab-checkbox:first-of-type:checked~.tab-container>.tab-content:first-of-type,
      .tab-checkbox:last-of-type:checked~.tab-container>.tab-content:last-of-type,
      .tab-checkbox:nth-of-type(2):checked~.tab-container>.tab-content:nth-child(2),
      .tab-checkbox:nth-of-type(3):checked~.tab-container>.tab-content:nth-child(3),
      .tab-checkbox:nth-of-type(4):checked~.tab-container>.tab-content:nth-child(4){
          height: auto;
          opacity: 1;
      }
      .tab-checkbox,
      .tab-label+br,
      .tab-wrap p:empty  {
          display: none;
      }

      1つのタブ切り替えに、5つまでのタブが使えます。
      Up to 5 tabs can be used in one tab switch.

      5つ以上利用する場合次のように数字を増やしたコードを追加する必要があります。
      If you use 5 or more, you need to add the code which increased the number as follows.

      .tab-checkbox:nth-of-type(4):checked~.tab-container>.tab-content:nth-child(4),
      .tab-checkbox:nth-of-type(5):checked~.tab-container>.tab-content:nth-child(5),
      .tab-checkbox:nth-of-type(6):checked~.tab-container>.tab-content:nth-child(6)

      次に、ブロックエディタの場合カスタムHTMLブロック(クラシックエディタの場合テキストモード)に、以下のHTMLをコピペして利用してください。
      Next, copy and use the following HTML in a custom HTML block (text mode in the classic editor) for block editor

      <div class="tab-wrap">
          <input id="TAB01-01" type="radio" name="TAB-01" class="tab-checkbox" checked="checked" /><label class="tab-label" for="TAB01-01">Button 1</label>
          <input id="TAB01-02" type="radio" name="TAB-01" class="tab-checkbox" /><label class="tab-label" for="TAB01-02">Button 2</label>
          <input id="TAB01-03" type="radio" name="TAB-01" class="tab-checkbox" /><label class="tab-label" for="TAB01-03">Button 3</label>
          <div class="tab-container">
              <div class="tab-content">
                  Contents 1
              </div>
              <div class="tab-content">
                  Contents 2
              </div>
              <div class="tab-content">
                  Contents 3
              </div>
          </div>
      </div>

      <input>name属性はすべて同じ名前にする必要があります。
      All “name attribute” of <input> must be the same name.

      一行の<input><label>のタグはid属性とfor属性を同じ名前にしてください。
      Make sure that the tags for <input> and <label> in one line have the same name for “id attribute” and “for attribute”.

      もし同じページ内で複数のタブ切り替えを利用したい場合は、name属性・id属性・for属性に別の名前を付ける必要があります。
      If you want to use multiple tab switching in the same page, you need to give different names to “name attribute”, “id attribute” and “for attribute”.

      例えば次のような感じです。
      For example, it looks like the following.

      <div class="tab-wrap">
          <input id="TAB02-01" type="radio" name="TAB-02" class="tab-checkbox" checked="checked" /><label class="tab-label" for="TAB02-01">Button 1</label>
          <input id="TAB02-02" type="radio" name="TAB-02" class="tab-checkbox" /><label class="tab-label" for="TAB02-02">Button 2</label>
          <input id="TAB02-03" type="radio" name="TAB-02" class="tab-checkbox" /><label class="tab-label" for="TAB02-03">Button 3</label>
          <div class="tab-container">
              <div class="tab-content">
                  Contents 1
              </div>
              <div class="tab-content">
                  Contents 2
              </div>
              <div class="tab-content">
                  Contents 3
              </div>
          </div>
      </div>

      コードの実行サンプルはこちらのページで公開しました。
      A code execution sample has been published on this page.
      https://codepen.io/kusamura_mono/pen/WqQEpz

      また、このタブ切り替えはこちらのページを参考にしてカスタマイズしたものです。
      In addition, this tab switching is customized referring to this page.
      https://bagelee.com/design/css/create_tabs_using_only_css/

      参考になれば幸いです。
      I’m glad if you can use it as a reference.

      コメントありがとうございました!
      Thank you for your comment!

      • Mr. Mike より:

        Hello 草村,

        Thank you for teaching me these! (。◕∀◕。)

        But I am currently experiencing problems

        I want to put the Tab-warp in the Sidebar (サイドバー).

        But it seem doesn’t work

        The reason is that there will also be the same Tab-warp in .mobile-menu-buttons

        Do you have a solution to this problem?

        • 草村 草村 より:

          こんにちは!

          片方のchecked属性が無効化されるのが原因みたいですね。

          CSSを以下のコードに変更すれば、初期状態で最後のタブをアクティブに出来ます。
          仕様上、最初のタブをアクティブにする事は難しいです。

          Hello!

          It seems that the cause is that one “checked attribute” is invalidated.

          You can activate the last tab by default by changing the CSS to the following code.
          By design, it is difficult to activate the first tab.

          .tab-container {
              border-top: 3px solid #68a6c5;
          }
          .tab-content,
          .tab-checkbox:checked~.tab-container>.tab-content:last-of-type {
              height: 0;
              overflow: hidden;
              transition: opacity .8s;
              opacity: 0;
          }
          .tab-label,
          .tab-checkbox:checked~.tab-checkbox:last-of-type+.tab-label {
              color: #fff;
              background: #cbcfd2;
              padding: 3px 12px;
              display: inline-block;
              font-size: 14px;
              position: relative;
              text-shadow: 0 -1px 0 rgba(0,0,0,.2);
          }
          .tab-label:before {
              content: '';
              border-top: 10px solid #fff;
              border-left: 10px solid rgba(0, 0, 0, .25);
              position: absolute;
              top: 0;
              right: 0;
              box-shadow: 0 0 1px rgba(255,255,255,.3);
          }
          .tab-label:hover:before {
              border: none;
          }
          .tab-checkbox:checked+.tab-label,
          .tab-checkbox:last-of-type+.tab-label {
              background: #68a6c5;
          }
          .tab-content:last-of-type,
          .tab-checkbox:first-of-type:checked~.tab-container>.tab-content:first-of-type,
          .tab-checkbox:last-of-type:checked~.tab-container>.tab-content:last-of-type,
          .tab-checkbox:nth-of-type(2):checked~.tab-container>.tab-content:nth-child(2),
          .tab-checkbox:nth-of-type(3):checked~.tab-container>.tab-content:nth-child(3),
          .tab-checkbox:nth-of-type(4):checked~.tab-container>.tab-content:nth-child(4){
              height: auto;
              opacity: 1;
          }
          .tab-checkbox,
          .tab-label+br,
          .tab-wrap p:empty  {
              display: none;
          }

          初期状態のアクティブなタブがサイドバーとモバイルスライドインで一致しなくなるので、HTMLのchecked="checked"は削除していいかもしれません。

          You may want to delete the HTML checked = "checked", as the initial active tab will not match in the sidebar and mobile slide-in.

          Sample : https://codepen.io/kusamura_mono/pen/OeMmBr

          ▼もし左のタブをアクティブに見せたい場合以下のコードを追加すれば、最後のタブを左に移動できます。
          ※調整が必要になるかもしれません。

          If you want the left tab to appear active, you can move the last tab to the left by adding the following code.
          *Adjustment may be necessary.

          .tab-wrap {
              display:flex;
              flex-wrap:wrap;
          }
          .tab-label {
              margin-right:.5em;
          }
          .tab-label:last-of-type {
              order:-1;
          }
          .tab-container {
              width:100%;
          }

          Sample : https://codepen.io/kusamura_mono/pen/PrZmxx

          お試しください。

          Please try it.

          • Mr. Mike より:

            Hello~ 草村,

            Thank you so much!! ヽ(●´∀`●)ノ

            According to your teaching, I successfully show the Tab-warp in sidebar (サイドバー).

            You can see the GIF right here:
            https://i.imgur.com/FISQhHn.gifv

            Very grateful, I think this can be used as a great tutorial posts.

            • 草村 草村 より:

              こんにちは!

              上手くいったようでよかったです!
              質問やご報告を画像で伝えてくださったのでわかりやすかったです。

              お役に立てて嬉しいです。
              コメントありがとうございました!

              Hello!

              I’m glad it went well!
              It was easy to understand, as we communicated the questions and reports in the form of images.

              I’m glad to help you.
              Thank you for your comment!

タイトルとURLをコピーしました