へっぽこコーダー備忘録

phpやらjavascriptやら、使った技術をすぐに忘れちゃうから、おぼえがき程度に書いていきまーす

wordpressのショートコードをいじってみよう！！

wordpress

下記のURLへ引っ越しました。
http://hepocoder.com/
10秒後に移動しますm(__)m

無料のテーマをダウンロードしてきたところ、固定ページでショートコードが使われまくり！

ちなみにショートコードってこんなやつ↓

[text name="sawayaka"]
固定ページにポンと記載されてるんだけど、実際公開画面で見ると色々とデータが表示されてるみたいな。

 

で、今回いじりたいページには、画像とかテキストが出力されるショートコードが記載されてました。

こんな感じ↓

[sample icon="tree" title="タイトル"] テキスト [/sample]

公開画面にはショートコードで指定されたアイコン、タイトル、テキストが出力されます。

<div class="sample-box">
    <div class="sample-box-1">
        <span>treeアイコン</span>
    </div>
    <div class="sample-box-2">
        <h3>タイトル</h3>
        <p>テキスト</p>
    </div>
</div>

勝手にタグ出してくれるのはいいけど、今回はタイトルにリンクを貼りたいのに、これじゃ貼れないよー；
ということで、ショートコードで出力されるタグをいじってみよう☆ってことになりました。

 

ショートコードの設定は、function.phpの中に記載されてます。

function.php開いたら「add_shortcode」で検索かけてみてください。

↓のようなコードが引っかかってくると思います。
add_shortcode('sample','sample_shortcode');

1つ目の引数は、固定ページで使用するショートコード名。

2つ目の引数は、ショートコードから読みだす関数名ですね。

 

もうちょっと下を見ると、2つ目の引数の関数があると思います。

今回の場合はこんな感じ↓

function sample_shortcode($atts,$content = null)
{
    extract(shortcode_atts(array( 'icon' => '', 'title' => ''),$atts));

    $output = '';
    $output .= '<div class="sample-box">';
    $output .= '<div class="sample-box-1">';
    $output .= '<span>'.$icon.'</span>';
    $output .= '</div>';
    $output .= '<div class="sample-box-2">';
    $output .= '<h3>'.$title.'</h3>';
    $output .= '<p>'.$content.'</p>';
    $output .= '</div>';
    $output .= '</div>';

    return $output;
}

ショートコードから受け取ったアイコンとタイトルデータを、関数内でタグでくるんで変数outputに入れて、出力データとして返すって感じですねー。

で、カスタムの目的はタイトルにURLを貼り付けたいから、関数の引数にURLを付け加えて、変数にURLをいれて、タイトルにリンクを設定するって作業が必要です。

やったのが下のコード。
function sample_shortcode($atts,$content = null)
{
    extract(shortcode_atts(array( 'icon' => '', 'title' => '', 'url' => ''),$atts));

    $output = '';
    $output .= '<div class="sample-box">';
    $output .= '<div class="sample-box-1">';
    $output .= '<span>'.$icon.'</span>';
    $output .= '</div>';
    $output .= '<div class="sample-box-2">';
    if($url){
        $output .= '<h3><a href="'.$url.'">'.$title.'</a></h3>';
    }else{
        $output .= '<h3>'.$title.'</h3>';
    }
    $output .= '<p>'.$content.'</p>';
    $output .= '</div>';
    $output .= '</div>';

    return $output;
}

リンクがいらない場合もあるので、URLが指定されてない時ように条件分岐も指定してやる。

これで、
[sample icon="tree" title="タイトル" url="xxxxx.jp"] テキスト [/sample]
とすれば、予定通りに動きました♡


ちなみにextract関数は、自動で連想配列のキーを変数名、値を変数の中身に入れてくれる便利な関数です。
でもセキュリティー的に危険な使い方になっちゃう場合もあるから、気をつけましょう！