テーマをCocoonに変更しました!

wordpressのショートコードの意味少し理解出来たよー

恥ずかしい事ではありますがようやくwordpressのショートコードの意味がなんとなく分かったので日記に書くことにしました。


20131220144102

本来の目的は他のサイトのRSSを表示させたくていろいろサーチしてましたがなかなか意味が分からなく折れそうな時に ショートコードと言う言葉に出会いました。スマイル

最初は別に何の関心もなかったのですがプラグインを使わずにRSSの表示をしたい悲しい
で探してるとちょくちょくショートコードで書くやり方が多発してきてので半信半疑でショートコードとかいうものをコピッてやったけど全然うまく反映されないのでまたもや挫折号泣号泣
結局2日目の今日やっと少しだけ上手く反映されるようになりました。

説明がヘタくそなのでまとまりがつきませんが

まずショートコードを使う際に

1、functions.php
にコードを書く。

2、[・・・・]で記事とかページに記載する
(ここが分からなくて苦労したんですよー)

この書き方が分かってから結局RSSの表示方法も分かった次第ですスマイルスマイル

RSSの表示方法はまた新規で書きます。

今日はサイトのアドレスを指定してサイトのスクリーンショットを表示する方法が見つかったのでそれを書きます。

下のサイトを参考にしてますので詳しくはかきませんよー

functions.phpに以下のコードをコピーします

// WordPress APIでスクリーンショットを表示するショートコード
    function get_wp_screenshot($attr) {
    extract(shortcode_atts(array(
    // デフォルト設定
    'url' => '',
    'alt' => '',
    'class' => '', // imgタグに付加するclass名
    'width' => 0, // 画像の幅(0の場合はwidthタグを出力しない)
    'link' => 1 // 0:リンクしない 1:リンクする
    ), $attr));
    if ($url == '') {
    return;
    }
    $image = 'http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url));
    if ($width > 0) {
    $height = floor($width/4*3);
    $image .= '?w=' . $width;
    $image_wh = ' width="' . $width . '" height="' . $height . '"';
    }
    if ($class != '') {
    $image_wh .= ' class="' . $class . '"';
    }
    $image = '<img src="' . $image . '" alt="' . $alt . '"' . $image_wh . '>';
    if ($link == 1) {
    $image = '<a href="' . $url . '" target="_blank">' . $image . '</a>';
    }
    return $image;
    }
    add_shortcode('wpshot','get_wp_screenshot');

投稿記事の中で、以下のようにショートコードを書けばスクリーンショットが表示されます

[wpshot url="スクリーンショットを撮るURL" width="幅" alt="説明" class="クラス名"]

 

こんな感じですよー上手く表示されてるでしょ。。。

[wpshot url=”https://webcss.withrun.org/” link=”0″ ] 画像にリンクなしの場合は以下

[wpshot url="http://wordpress.com/" link="0"]

[・・・・]のタグを表示したい箇所に入れるのがポイントでしたwww

こちらのサイトさまに詳しく書いてありますからねー

[WordPress] URLを指定してサイトのスクリーンショットを表示するショートコード(WordPress.comのAPIを使用)  memobits
http://m.designbits.jp/12071410/

コメント

ブログ管理者などによく売れてる本です