WordPressテーマのショートコードを作成する

このプロジェクトを始めて以来、私たちは常に独自のラベルを付けたいと思っていました。そのため、XNUMX番目のテンプレートを使用します。 DesdeLinux、それは私たちによって100％作成されました。

その後、他のバージョンが続きました。特定のWebサービスを購入または採用して、次のようなデザインを作成することはできますが StudioDWeb.com、またはで作成済みのテンプレートを購入する ThemeForest.net、私たちは常に私たち自身のものを持ち、私たちのニーズに適応し、立ち寄りたいと思っていました WebDevelopment.com 助けになることができます😀

とにかく、私はWebデザインと開発に情熱を注いでおり、すでに新しいトピックに取り組んでいます。 DesdeLinux 外観のスクリーンショットをいくつか紹介します。

アイデアは、私たちがすでに適応しているものから抜け出すことではないので、多くの要素は同じまたは同様の方法のままです。 ホームページから始めます

そして、これは記事がどのように見えるかです：

ご覧のとおり、これは私たちの対策に適合しており、新しいものが含まれています ショートコード 記事の精緻化のために。

そのため、のトピックにそれらを含めたい場合に備えて、それらのXNUMXつ（情報XNUMXつ）を作成する方法をあなたと共有することになりました WordPress。 つまり、次のようなものです。

私はこのCMSを使用したプログラミングの専門家ではないため、このCMSがこのように機能する理由と方法については説明しません。その方法、期間についてのみ説明します。

このために、私たちはの«スイスアーミーナイフ»を利用します WordPress、私はファイルを意味します function.php 通常、ほとんどすべてのトピックで見られます。

ショートコードを含む Function.php の例 DesdeLinux

このファイルで行うことは、ShortCodeの構造と、もちろんそれを示すラベルを追加することです。 それでは、それに取り掛かりましょう。

Function.phpの内部

function.phpファイル内に配置するのは、ShortCodeのHTML構造ですが、HTMLタグをそのように配置するだけではありません。 次のようなものがあります。

//情報関数infobox（$ atts、$ content = null、$ code = ""）{$ return = ' '; $ return。= $ content; $ return。= ' '; $ returnを返します。 } // ShortCode add_shortcode（ 'info'、 'infobox'）;

ここから、いくつかのことを明確にします。 まず、XNUMXつのバーを使用する場合、行をコメントアウトします。 //情報 ただのコメントです。

関数の名前。この場合は インフォボックス 好きなように変更できますが、最後の行で使用する名前と一致する必要があります。

例：

$ return。= $ content;

可変 $コンテンツ これは、ShortCodeに入力したコンテンツがデフォルトで配置される場所であり、何も入力しない場合はnull値を返します。

これで、ShortCodeの名前は次のように設定しました。

add_shortcode( 'info', 'infobox' );

変更できる場所 info 私たちが欲しいもののために。 さて、それを例のように見せるために、私たちは置かなければなりません：

[ info ]Este será el ShortCode de ejemplo[ /info ]

もちろん、スペースはありませんが、明らかにShortCodeがアクティブ化されるために配置しました。

ショートコードスタイル

上記の行を見ると、PHPコードと変数がない場合、純粋なHTMLのShortCodeは次のようになります。

<div class="alert-info"></div>

したがって、CSSスタイルを適用するだけで済みます。

.alert.alert-info {背景：＃d9edf7 url（info.png）no-repeat 7px 50％; border-radius：4px; ボーダー：1px実線＃bce8f1; 色：＃3a87ad; フォントサイズ：14px; マージン：15px 15px; パディング：15px 15px 15px 50px text-align：left}

そしてそれはそれです..繰り返しますが、私はプログラマーなどではありません。私が与えた説明は、ShortCodeが機能することをどのように理解するかです😛