WordPressでクールなCSS3ボタンショートコードを追加する方法

WordPressのHTMLエディターでの作業にあまり熱心でない場合、またはプレミアムテーマにクールな機能強化を提供したい場合、ショートコードは、物事をシンプルに保ちながら投稿エディターの機能を拡張するための優れたソリューションです。.


(もちろんショートコードを使用して)無料のファイルや他のサイトへのリンクを提供するときに、サイトにある種のボタンを追加すると便利だと思っていたので、ショートコードをテーマに追加した後、ここでコードを共有すると思いました自分のサイトにボタンショートコードを追加することに関心のある他の人々がブログを私のコードを単にコピーしてテーマに貼り付けることができ、ショートコードの作成とボタンのスタイル設定に多くの時間を費やす必要がない.

ショートコードとは?

ショートコードはWordPress 2.5で導入されたもので、投稿コンテンツで使用するマクロコードを作成できます。単純なショートコードは次のようになります。

[ショートコード]

投稿エディタに追加すると、テーマファイルで定義されているショートコードの値が返されます。コードに触れずに簡単にボタンを投稿エディタに追加できるようにするショートコードを作成する方法を紹介します.

カスタム「ボタン」ショートコードを追加する

最初に行う必要があるのは、ショートコードのphpコードをテーマに追加することです。次のコードを使用して、サイトに簡単なボタンを追加できます。このコードは、functions.phpファイルに配置できます。サードパーティのテーマを使用している場合、これはWordPressの子テーマを使用して行うのが最適です。.

function myprefix_button_shortcode($ atts、$ content = null){

//ショートコード属性を抽出します
extract(shortcode_atts(array(
'url' => '',
'タイトル' => '',
'ターゲット' => '',
'テキスト' => '',
'色' => '緑',
)、$ atts));

//コンテンツのないアイテムにテキスト値を使用します
$ content = $ text? $ text:$ content;

//リンク付きの戻るボタン
if($ url){

$ link_attr = array(
'href' => esc_url($ url),
'タイトル' => esc_attr($ title),
'target' =>( 'blank' == $ target)? '_blank': '',
'class' => 'myprefix-button color-'。 esc_attr($ color),
);

$ link_attrs_str = '';

foreach($ link_attr as $ key => $ val){

if($ val){

$ link_attrs_str。= ''。 $ key。 '= "'。$ val。 '"';

}

}


戻る ''。 do_shortcode($ content)。 」';

}

//リンクが定義されていないため、戻るボタンをスパンとして
そうしないと {

戻る ''。 do_shortcode($ content)。 」';

}

}
add_shortcode( 'button'、 'myprefix_button_shortcode');

投稿エディタでショートコードを使用する

ショートコードが作成されたので、新しい「ボタン」(スタイルを設定していないため、現在はプレーンリンクのように見えます)を投稿エディタに追加できます.

//使用例1
ボタンテキスト[/ button] //使用例2

ボタンのスタイリング

プレーンリンクのように見えるだけのショートコードを作成する意味は何ですか?何もない。そのため、ダウンロードボタンのスタイルを設定してセクシーに見せるために、CSS3を追加する方法を紹介します。.

ショートコードで気付いたように、スタイル「myprefix-button」を追加して、style.cssファイルで簡単にスタイルを設定できるようにしました。次のコードをスタイルシートに挿入して、画像のような青いボタンを作成します.

/ *メインボタンスタイル* /
.myprefix-button {background:#65A343; text-shadow:1px 1px 1px#000; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:1px 2px 1px rgba(0、0、0、0.1); -moz-box-shadow:1px 2px 1px rgba(0、0、0、0.1);ボックスシャドウ:1px 2px 1px rgba(0、0、0、0.1);カーソル:ポインタ;表示:インラインブロック;オーバーフロー:非表示。パディング:1px;垂直方向に揃える:中央; }

.myprefix-button span {border-top:1px solid rgba(255、255、255、0.25); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;色:#fff;表示ブロック; font-weight:太字; font-size:1em;パディング:6px 12px;テキストの影:1px 1px 1px rgba(0、0、0、0.25); }

/ *ホバー* /
.myprefix-button:hover {background:#558938; text-decoration:none; }

/ *アクティブ* /
.myprefix-button:active {background:#446F2D; }

緑のショートコードボタン

複数の色のサポート

ショートコードにカラーパラメータが含まれていることに気付いた場合は、さまざまなボタンの色のCSSスタイルを追加するために使用できます。たとえば、この追加のCSSを追加することで青色オプションを追加できる場合:

/ *青いボタン* /
.myprefix-button.color-blue {background:#2981e4}

/ *青いボタンホバー* /
.myprefix-button.color-blue:hover {background:#2575cf}

/ *青いボタンがアクティブです* /
.myprefix-button.color-blue:active {background:#0760AD}

次に、ショートコードでcolorパラメータを使用します。

Button Text [/ button]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map