Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

wordpress

wordpressのショートコードの作成方法と使い方

投稿日:

Pocket

うも、チャーさんです。

あなたはショートコード(wordpressの)ってなんだ?

と思ってませんか?

 

この記事では、wordpressの

ショートコードとは何か、そして

ショートコードの作り方と使い方を書いてます。

 

なので、あなたがこの記事を読めば、

ショートコードを理解でき、

かつ自作できて、かつ使えるようになるでしょう。

 

 

ということでショートコードに

関心があるならこのまま下にスクロールし

読んでください。

 

スポンサードサーチ

ショートコードとは何か?

 

ということでまず結論からです。

 

ショートコードとは何かですが、

 

wordpressのショートコードを使えば、

function.phpなどに書いて作った関数を、

投稿の中でも使えるようになります。

 

 

例えば、僕の作ったショートコードの中で、

faceというショートコードがあるのですが、

これを投稿の中で書くと、^_^という顔文字が表示されます。

 

本来wordpressの投稿画面では、

直接phpを書き込みできないので、

関数なんかも作って書いたりできないのですが、

 

ショートコードを作れば、

作った関数をバリバリ投稿画面の中でも

使えるので、便利です。

 

スポンサードサーチ

wordpressショートコードの作成方法

 

ということで、ショートコードについて

お話ししたので、ここからは、

作り方についてお話しします。

 

まずショートコードの作り方ですが、

簡単で、順序は以下です。

 

 

1、関数を作る

2、ショートコードを作る

 

この2ステップであなた自作の

ショートコードは完成です。

 

 

関数を作る

 

で補足していきますが、

まずは関数を作りましょう。

 

正直初めてショートコード作るなら、

簡単な関数でいいです。

 

例えば

function test(){

echo “テスト”;

}

みたいなものでokです。

 

 

で、関数はfunction.phpの中に

書いてしまいましょう。

 

ちなみに関数なにそれ?とわからない場合は、

自作で追加できる機能みたいな物だと

思ってください。

 

 

ショートコードを作成しましょう

 

で、関数が作れたら次は、

ショートコードを作りましょう。

 

と言っても簡単でして、

同じくfunction.phpのなかに、

 

add_shortcode(‘呼び出し用の名前’,’関数の名前’);

と1行書けばokです。

 

 

で()内の引数について補足しますが、

今回の関数の例でいうと、

testという名前のfunctionを作ったので、

 

関数の名前の所に、testと書きます。

 

 

次に呼び出し用の名前はなんでもいいのですが、

わかりやすくtextとしてみましょう。

 

ということで実際に書くと、

add_shortcode(‘text’,’test’);

となります。

 

これでショートコードは作れました。

完了です。ちなみにfunction.phpの更新を忘れずに。

 

 

ここまでをまとめるとfunction.phpの

中の記述的には、

 

function test(){

echo “テスト”;

}

add_shortcode(‘text’,’test’);

 

こんな感じで並ぶことになります。

 

スポンサードサーチ

wordpressショートコード使い方

 

で、ショートコードができたら、

あとは投稿画面のテキストエディター

(ビジュアルじゃない方)で、

 

ショートコードの呼び出し用の名前の方を

[]大カッコの中に書きましょう。

 

例としては、[text]みたいな感じです。

 

 

すると記事を更新して、実際の画面で見ると、

さっき関数でecho させてる”テスト”

という文字が表示されるようになります。

 

(上記[text]は説明用に書いてるので、

テストとは表示されませんのであしからず)

 

で、上記の例では簡単な関数使って

ますが、wordpressにはテンプレートタグ

というwordpressで用意されてる関数が多くあります。

 

 

それらもショートコードにして、

投稿画面で自由に使うことが可能なので、

そういった操作をしたい場合は、やってみましょう。

 

ということで、以上のようにすれば、

ショートコードを作り、そして

使うことができます。

 

 

スポンサードサーチ

まとめ

 

それではここらでまとめに入ります。

 

ショートコードとは、

関数を投稿画面でも使えるように

するものです。

 

 

作成方法はfunction.phpに

 

1関数を書き、

2add_shortcode(‘呼び出し用の名前を入力’,’関数の名前を入力’);

と書きショートコードを作りましょう。

 

そして使い方ですが投稿画面や固定ページなどの、

テキストエディタの方に[呼び出し用の名前をここに入力]

をと書けば、ショートコードが作動します。

 

 

関数を投稿画面でも使えるのは便利なので、

ぜひやってみましょう。

 

ということで、早速あなた自身でも

やってみましょう。

 

やれば、あなたのwordpressの

カスタマイズスキルはかなり上がりますよ。

 

 

ということで、まずは、

関数を作りましょう。(function.phpに書く)

 

次に、

add_shortcode(‘呼び出し用の名前を入力’,’関数の名前を入力’);

と書きましょう。(function.phpに書く)

 

()内はそれぞれあなたが任意に設定した名前を書きましょう。

 

 

次に、投稿画面のテキストエディタで、

[]大括弧の中に呼び出し用の名前を書いて、

記事を保存して、表示させてみましょう。

 

そしてあなたが、意図したものが表示されてれば、

成功です。

 

ということで、この記事は以上です。

 

 

それでは読んでもらってありがとうございました。

 

チャーさん

-wordpress

スポンサードサーチ

関連記事

no image

wordpressのメニューをカスタマイズする方法「コピペ可能」

どうも、チャーさんです。   あなたはwordpressのメニューを カスタマイズしたいと思ってませんか?   この記事ではメニューをカスタマイズし 画像を表示させる方法、またメニ …

no image

wordpressの記事ページをカスタマイズする方法

どうも、チャーさんです。   あなたはwordpressの記事ページ、 (投稿で書いて公開したら出てくるページ) をカスタマイズしたいと思ってますか?   この記事では、wordp …

no image

wordpressの画像のurlを取得する方法

どうも、チャーさんです。 あなたはwordpressの画像のurlを取得する方法を、 探していますか?   この記事では、wordpressの画像のurlを取得し、 表示する方法を書いていま …

no image

wordpress popular postsでまだデータがありませんが解決し人気記事が表示された方法

どうも、チャーさんです。   あなたはwordpress popular postsが、 動作せず困っていませんか?   ちゃんとアクセスはあるのに、 まだデータがありません。と表 …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

wordpressで右クリックを禁止する方法「簡単です」

どうも、チャーさんです。   あなたはブログ上での、 右クリックを禁止したいと 思っていませんか?   せっかく書いた記事をコピペされたくない、 そう思っていませんか? &nbsp …

no image

wordpressのエディターを前のに戻す方法

どうも、チャーさんです。   あなたは、ワードプレスをインストールしたら、 投稿のエディター画面が今まで使ってたのと 違うやつになっていて、困っていませんか?   この記事では、そ …

no image

wordpressをphpでカスタマイズするための記事「各ページごとにやり方説明」

どうも、チャーさんです。   この記事では、wordpressをphpでカスタマイズ する際に、編集したいページに対応するファイルを 説明しています。   (例 固定ページを編集し …

no image

wordpressで閲覧できませんを解決した方法

どうも、チャーさんです。   あなたはwordpressで記事を公開しようとしたら、 閲覧できません(Forbidden Access)と出て、 困ってたり、解決策を探してませんか? &nb …

no image

wordpressで一覧へ戻るを記事に表示させる方法

どうも、チャーさんです。   あなたはwordpressで記事に 一覧へ戻るを表示させたいが、 urlを直接かく方法以外を探していませんか?   この記事では、phpとwordpr …

no image

ファビコンをワードプレスに設定する方法「手順つき」

  どうも、チャーさんです。   あなたはファビコンをワードプレスに、 設定し表示させたいですか?   この記事では、ファビコンをワードプレスに、 設定させる方法を紹介し …

no image

ワードプレスの管理バーを非表示にする手順

どうも、チャーさんです。   あなたは、ワードプレスの管理バーを、 非表示にする方法を探していませんか?   ワードプレスの上の黒いバー(管理バー)が、 重なって困る。。と思ってい …

no image

wordpressで現在表示ページのメニューにcurrentクラスをつける方法

どうも、チャーさんです。   あなたはwordpressのメニューにcurrentという、 クラス名を現在表示してるページのメニューにだけ、 つける方法を探していませんか?   こ …

no image

wordpressのメニューに関する情報をまとめました

どうも、チャーさんです。   この記事ではwordpressのメニューに関する情報 例えばメニュー追加方法や、階層化、カスタマイズなど、 必要な情報を網羅してまとめてみました。   …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。