ワードプレスのショートコードをマスタリング
著者について
このゲストポストはジャン*バティスト*ユングによって書かれました,ベルギーから28歳のブロガー,誰がコード猫のweb開発についてのブログ,でwordpressについて…もっとaboutjean-baptisteş
- 9分読む
- wordpress,essentials,shortcodes,techniques(wp)
- オフライン読書のために保存
- Twitter、LinkedInの上で共有
WordPressのショートコードは、これ以上を行うことができ、間違いなくあなたのブログの生活が容易になります。 この記事では、ショートコードを作成して使用する方法と、ブログの経験を向上させるすぐに使用できるWordPressのショートコードを提供する方法を紹介します。
また、次の関連記事を見てみたいことがあります:
- ワードプレスのショートコード:完全なガイド
- ショートコードでウィジェットを挿入
- 10便利なワードプレスループハック
ショートコードとは何ですか?h3>
ショートコードを使用するのは非常に簡単です。 使用するには、新しい投稿を作成(または既存の投稿を編集)し、エディタをHTMLモードに切り替えて、次のような括弧内にショートコードを入力します。
ショートコードで属性を使用することもできます。 属性を持つショートコードは次のようになります。
ショートコードは、次のようにコンテンツを埋め込むこともできます。
Smashing Magazine
ショートコードは、ワードプレス2.5で導入されたショートコードAPIと呼ばれる一連の関数によって処理されます。 投稿が保存されると、その内容が解析され、ショートコードAPIは自動的にショートコードを変換して、実行する機能を実行します。
シンプルなショートコードを作成する
ショートコードで覚えておくべきことは、彼らが作成するのは非常に簡単だということです。 あなたは基本的なPHP関数を記述する方法を知っていれば、あなたはすでにWordPressのショートコードを作成する方法を知っています。 我々の最初の一つを作成してみましょう知られる”Hello,World”のメッセージ。/p>
- 関数を開きます。あなたのテーマのphpファイル。 ファイルが存在しない場合は、作成します。
-
まず最初に、私の作成機能を返します”こんにちは世界”を文字列になります。 これを関数に貼り付けます。phpファイル:
function hello() { return 'Hello, World!';}
-
今、私たちは関数を持っているので、我々はショートコードにそれを有効にする必要があります。 おかげで
add_shortcode()
hello()
関数の後に貼り付け、関数を保存して閉じます。phpファイル:add_shortcode('hw', 'hello');
最初のパラメータはショートコード名で、2番目のパラメータは呼び出される関数です。
-
ショートコードが作成されたので、ブログの投稿やページで使用できます。 これを使用するには、エディタをHTMLモードに切り替えて、次のように入力します。
これで完了です! もちろん、これは非常に基本的なショートコードですが、それはそれがいずれかを作成することがいかに簡単であるかの良い例です。
高度なショートコードの作成
前述のように、ショートコードは、関数に引数を渡すために、例えば、非常に便利である属性で使用することがで この例では、我々はちょうどあなたがそのようなVBulletinとPHPBBなどのフォーラムで使用するBBCodesと同じように、URLを表示するショートコードを作成する方法を紹介し/p>
-
関数を開きます。phpファイル。 次の関数を貼り付けます。
function myUrl($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ), $atts)); return '<a href="'.$href.'">'.$content.'</a>';}
-
関数をショートコードにしましょう。
add_shortcode("url", "myUrl");
-
ショートコードが作成されました。 あなたの投稿やページでそれを使用することができます:投稿を保存すると、ショートコードに「WordPress recipes」というタイトルのリンクが表示され、http://www.wprecipes.comを指します。
コードの説明。 正常に動作するには、ショートコード関数は2つのパラメータを処理する必要があります。$atts
$content
$atts
href
と呼ばれ、URLへのリンクが含まれています。 $content
は、ドメインとサブディレクトリの間に埋め込まれたショートコードの内容です(つまり、”www.example.com”および”/subdirectory”)。 コードからわかるように、content contentおよび
$atts
デフォルト値を指定しました。
今、私たちはショートコードを作成し、使用する方法を知っていることを、のは、いくつかのキラーすぐに使用できるショートコードを見てみましょう!H3>
問題を作成します。 あなたの多くは私の”Twitterに送信”ハックを楽しんだようです。 私も本当にそのハックを楽しんだが、それには欠点がある:あなたがあなたのシングルにコードを貼り付けるならば。phpファイルでは、”Twitterに送信”リンクがすべての投稿に表示されますが、これは望ましくない可能性があります。 このハックを制御し、いつ投稿に追加するかを指定できる方が良いでしょう。 解決策は簡単です:ショートコード!
解決策。 このショートコードは簡単に作成できます。 基本的には、「Twitterに送信」ハックからコードを取得し、それをPHP関数に変換するだけです。 関数に次のコードを貼り付けます。テーマ内のphpファイル:
function twitt() { return '<div><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>';}add_shortcode('twitter', 'twitt');
このショートコードを使用するには、単にHTMLモードにエディタを切り替えて、次のように入力します。
ショートコードを配置した場所に”Twitterに送信”リンクが表示されます。H3>
問題が発生しました。
問題が発生しました。 既にRSSの契約者を得る非常によい方法が何かのような”RSSの供給を予約購読することを言う見栄え箱を表示することであることを知っている。”しかし、もう一度、私たちは本当に私たちのテーマに何かをハードコードし、それが表示される方法の制御を失うことを望んでいません。 このハックでは、我々は”RSSを購読する”ショートコードを作成します。 いくつかの場所でそれを表示し、他の場所ではなく、投稿やページで、メインコンテンツの上または下に表示します。
解決策。 いつものように、私たちは関数を作成し、それをショートコードに変えます。 このコードはあなたの関数に入ります。phpファイル。 例のフィードURLを自分のものに置き換えることを忘れないでください!p>
function subscribeRss() { return '<div class="rss-box"><a href="http://feeds.feedburner.com/wprecipes">Enjoyed this post? Subscribe to my RSS feeds!</a></div>';}add_shortcode('subscribe', 'subscribeRss');
ボックスのスタイルを設定します。 おそらく、リンクを含むdiv要素に追加されたrss-box
クラスに気づいたでしょう。 これにより、好きなようにボックスのスタイルを設定できます。 ここでは、あなたの”RSSを購読”ボックスに適用することができますいくつかのCSSスタイルの例です。 単にスタイルに貼り付けます。あなたのテーマのcssファイル:
.rss-box{ background:#F2F8F2; border:2px #D5E9D5 solid; font-weight:bold; padding:10px;}
Google AdSense Anywhereを挿入
問題。 ほとんどのブロガーはGoogle AdSenseを使用しています。 サイドバーなどのテーマファイルにAdSenseコードを含めるのは非常に簡単です。php。 しかし巧妙なオンラインmarketersは人々が内容自体で埋め込まれるadsの多くをかちりと鳴らすことを知っている。
解決策。 投稿やページにAdSenseを埋め込むには、ショートコードを作成します。
-
関数を開きます。あなたのテーマにphpファイルを作成し、次のコードを貼り付けます。 あなた自身のAdSenseコードのJavaScriptコードを変更することを忘れてはいけない!p>
function showads() { return '<div><script type="text/javascript"><!-- google_ad_client = "pub-XXXXXXXXXXXXXX"; google_ad_slot = "4668915978"; google_ad_width = 468; google_ad_height = 60; //--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div>';}add_shortcode('adsense', 'showads');
-
関数を保存したら。phpは、あなたの記事やページ上の任意の場所にAdSenseを表示するには、次のショートコードを使用することができます:
AdSenseコードは
adsense
div要素でラップされていることに注意してください。cssファイル。
コードの説明。 上記のコードは、単にAdSense広告を表示するために使用されます。 ショートコードが投稿に挿入されると、AdSense広告が返されます。 それは非常に簡単ですが、また、あなたは、リアルタイムの時間の節約に同意します!
ソース:
- 方法:あなたの投稿にAdSenseをどこにでも埋め込む
RSSリーダーを埋め込む
問題。 多くの読者はまた、最近Smashing Magazineに掲載された”8RSS Hacks for WordPress”の投稿を楽しんでいるように見えました。 今、右の私たちの記事やページにRSSリーダーを埋め込むためにRSSとショートコードの両方の私たちの知識を使用してみましょう。
解決策。 いつものように、このハックを適用するには、テーマの関数に次のコードを貼り付けるだけです。phpファイル。
//This file is needed to be able to use the wp_rss() function.include_once(ABSPATH.WPINC.'/rss.php');function readRss($atts) { extract(shortcode_atts(array( "feed" => 'http://', "num" => '1', ), $atts)); return wp_rss($feed, $num);}add_shortcode('rss', 'readRss');
ショートコードを使用するには、次のように入力します。
feed
属性は埋め込むフィードURLで、num
は表示する項目の数です。
ショートコードでWordPressのデータベースから投稿を取得
問題。 今まであなたがWordPressのエディタで直接関連記事のリストを呼び出すことができた望んだ? 確かに、”関連記事”プラグインは、あなたのために関連する記事を取得することができますが、ショートコードを使用すると、簡単に特定のカテゴリからの記事の任意の数のリストを取得することができます。
解決策。 いつものように、このコードを関数に貼り付けます。phpファイル。これを使用するには、HTMLモードに切り替えた後、WordPressエディタに次のものを貼り付けるだけです:p>
これは、IDが1のカテゴリから三つの投稿のリストが表示されます。 特定のカテゴリのIDを取得する方法がわからない場合は、ここで簡単な方法を説明します。
コードの説明。 引数を抽出してグローバル変数$posts
sc_liste()
get_posts()
numberposts
order
order
numberposts
order
numberposts
numberposts
numberposts
。orderby
およびcategory
カテゴリyからxの最新の投稿を取得するためのパラメータ。 完了すると、投稿は順序付けられていないHTMLリストに埋め込まれ、返されます。
ソース:
- WordPress:création de shortcode avancé
ポストに添付された最後の画像を取得します
問題。 WordPressでは、画像を操作するのは非常に簡単です。 しかし、なぜそれをさらに簡単にしないのですか? のは、より複雑なショートコード、自動的にポストに添付された最新の画像を取得するものを見てみましょう。
解決策。 関数を開きます。phpファイルと次のコードを貼り付けます:
function sc_postimage($atts, $content = null) { extract(shortcode_atts(array( "size" => 'thumbnail', "float" => 'none' ), $atts)); $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() ); foreach( $images as $imageID => $imagePost ) $fullimage = wp_get_attachment_image($imageID, $size, false); $imagedata = wp_get_attachment_image_src($imageID, $size, false); $width = ($imagedata+2); $height = ($imagedata+2); return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';}add_shortcode("postimage", "sc_postimage");
ショートコードを使用するには、HTMLモードのときにエディタで次のように入力します。
コード説明。 sc_postimage()
get_children()
wp_get_attachment_image()
wp_get_attachment_image_src()
ワードプレス関数を使用して画像を取得します。 完了すると、画像が返され、投稿コンテンツに挿入されます。
ソース:
- ワードプレスのショートコード: 簡単にポストに添付された最後の画像を表示
問題。 あなたはこの記事を楽しんだ場合でも、デフォルトでは、WordPressはショートコードがサイドバーウィジェットに挿入することはできません、ので、あなたは少し ありがたいことに、ここではWordPressの機能を強化し、ショートコードは、サイドバーのウィジェットで使用できるようにするために少しトリックです。
解決策。 あなたの関数に貼り付けるコードのもう一つの部分。phpファイル:
add_filter('widget_text', 'do_shortcode');
それはあなたがサイドバーウィジェットでショートコードを許可するために必要なすべてです!
コードの説明。 ここで行ったことは非常に簡単です:widget_text()
do_shortcode()
関数を実行し、APIを使用してショートコードを実行します。 このように、ショートコードは現在、サイドバーウィジェットで有効になっています。p>