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!

  2. くーと より:

    大変参考になりました!

    ちなみに吹き出しのショートコードはありますか?

  3. Mr. Mike より:

    Hello~ こんにちは,

    long time no see! 久しぶり(*´▽`*)

    I found that your この記事の目次 has added a quick jump to コメント function!

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

    Can teach me how to do it? 🙂 Thanks

    • 草村草村 より:

      Hello! こんにちは!

      目次にコメントへジャンプするリンクを追加するには、
      以下のコードを子テーマの functions.php にコピペすればOKです。

      functions.phpを操作する前に、エラーが発生しても復旧できるようにバックアップをとってください。

      To add a link that jumps to a comment in the table of contents,
      Copy and paste the following code into functions.php of the child theme.

      Before operating functions.php, make a backup so that you can recover even if an error occurs.

      add_filter( 'get_toc_tag', function( $html ){
      	$count = get_comments_number();
      	if( $count ) {
      		$comment = '<div class="toc-comment"><a href="#comments"><i class="fa fa-comment-o" aria-hidden="true"></i> <span class="toc-comment-caption">コメント</span><span class="toc-comment-count">(' . $count . ')</span></a></div>';
      		$html = preg_replace( '{(</div>\s*</div>$)}', $comment.'$1' , $html );
      	}
      	return $html;
      } );

      ※コメントが0件の場合は表示されません。
      if($ count){と、6行目の}を削除すればコメントが0件でも表示されます。

      お試しください。

      * It is not displayed when there are 0 comments.
      * If you delete if ($ count) { and } on the 6th line, even 0 comments will be displayed.

      Please try it.

      • Mr. Mike より:

        Hi 草村,

        Thanks you so much!

        This is a great and practical feature ❤️

        It work prefect 😊

        —-(Google 翻訳)—-

        こんにちは草村、

        本当にありがとうございます!

        これは素晴らしい実用的な機能です❤️

        • 草村草村 より:

          上手く動いたようでよかったです!
          コメントありがとうございました!

          I’m glad it worked!
          Thank you for your comment!

  4. neco より:

    はじめまして!Cocoonのショートコードを調べていて検索からやってきました、necoと申します。

    ショートコードに関する疑問は全てこちらで解決したのですが(大変参考になりました…!ありがとうございます!)、こちらの記事で「new_listのオプション」や「popular_listのオプション」で使用されている表の一部を隠す方法も探しておりまして、よろしければhow toの記事作成またはご教授いただくことをご検討できないでしょうか?

    通りすがりな上、不躾なお願いで申し訳ありません。

    ご検討のほど、よろしくお願いします!

    • 草村草村 より:

      necoさん

      はじめまして、こんにちは!
      ご質問の件ですがちょっと今すぐに詳しい解説を記事に出来そうにないので、
      以前コメント外で同様の質問を受けた際に回答した内容になりますが、こちらを回答とさせていただきます。

      コードはCodepenに掲載していますので、そちらをご覧ください。

      【詳細折りたたみボックス】
      https://codepen.io/kusamura_mono/pen/PoqQzKK

      WordPressをご利用でしたら、CSSを子テーマのstyle.cssにコピペして
      HTMLは「コンテンツ・・・」の部分を折りたたみたい内容に置き換えてご利用ください。

      ※同じページで複数使用する場合「”DATAILS-01″」(idとfor)を他と被らない名前に書き換えてください。
       (例: 「id=”DATAILS-02″」「for=”DATAILS-02″」)
      ※1つの詳細折りたたみボックスの「id」と「for」は同じ名前を指定してください。

      HTMLはクラシックエディタを利用している場合は「テキストモード」で、
      ブロックエディタの場合は「カスタムHTMLブロック」か「クラシックブロック」の”HTMLで編集”で使えると思います。

      また、「続きを読む css」あたりで検索すれば似たような事が出来る記事が見つかるかもしれませんので
      そちらも参考にすると良いかと思います。

      以上、参考になれば幸いです。
      コメントありがとうございました!

      • neco より:

        夜分遅くに失礼いたします。necoです。

        教えていただいた内容でチャレンジしてみたところできました!
        ずっと色々試していたんですが初心者なもので難しくてできず…やっとできて感動です!!

        コード見せていただき、詳しいご説明もとても助かりました。ありがとうございます。

        これからもブログ参考にさせていただきます。
        ありがとうございました!☺️

        • 草村草村 より:

          necoさん

          結果のご報告ありがとうございます。
          上手く実装出来たようで安心しました。
          お役に立ててよかったです!(*^^*)

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