スポンサーリンク

wordpress 「ショートコードについて」

ショートコードとは

  • 「wordpressのショートコード」とは、色々な一連の命令を、[短いコード名]で代用し実行するもので、 [xxxxxx(コード名)] で表現されます。
  • wordpressの「wp-content/themes/使用中のテーマ」のフォルダ内にある「functions.php」ファイルにプログラムを記述し、投稿記事を編集する時に、[短いコード名]を記述して、そのプログラムを呼び出し実行する事ができます。

ショートコードを自作する場合の注意

  • FTPソフトもしくは、レンタルサーバーのFTP機能を使って、事前にfunctions.phpファイルをダウンロードしてバックアップをとっておきます。
  • 実際には、「テーマの functions.php ファイル」に直接書き込むのでは無く、「子テーマの functions.php 」に記述します。
  • 記述したショートコードには、どんな機能か分かるように、コメントをつけておきます。(PHPで記述されているので、「//(スラッシュ二つ)」の後にコメントを書く。)

ショートコードを自作することは、PHPの知識が必要なので、初心者向きではありません。また、functions.phpに書き込み等をして、白画面トラブルが起こりログインできなくなることがあるので注意が必要です。

初心者がショートコードを使うには

ショートコードの実例:「Diver」編

  • [border ] 任意の場所にラインをいれます。(色、太さ、を指定できます。)
  • [ badge name="" color="" ] 「参照」、「オススメ」などのを文字列の前にバッチ表示されます。
  • [ btn url="" color="" ]-[/btn] ボタンを作成します。(type="big"で大一列の大きなボタン作成)
  • [ getpost id="" ] 記事のidを指定すれば、非簡単に内部リンクができます。

 

  • [ aside ]-[/aside] 注意喚起のコメントをはさむことで、背景色:薄い黄色で表示します。
  • [ aside type="warning" ]-[/aside] type="warning"とするこで、背景色:薄いピンク色の警告を表示します。

 

  • [ colwrap ]-[/colwrap] 簡単にカラムレイアウト表示ができます。
    • 2カラム 二等分割表示 [ colwrap ] [ col2 ]ー[ /col2 ] [ col2 ]ー[ /col2 ] [ /colwrap ]
    • 3カラム 三等分割表示 [ colwrap ] [ col3 ]ー[ /col3 ] [ col3 ]ー[ /col3 ] [ col3 ]ー[ /col3 ] [ /colwrap ]
    • 4カラム 四等分割表示 [ colwrap ] [ col4 ]ー[ /col4 ] [ col4 ]ー[ /col4 ] [ col4 ]ー[ /col4 ] [ col4 ]ー[ /col4 ] [ /colwrap ]
    • 25%:75%の2分割表示 [ colwrap ] [ col4 ]ー[ /col4 ] [ col4_3 ]ー[ /col4_3 ] [ /colwrap ]
    • スマホ用の2分割表示  [ colwrap ] [ col2_sp ]ー[ /col2_sp ] [ col2_sp ]ー[ /col2_sp ] [ /colwrap ]

 

スポンサーリンク
おすすめの記事