月と東京タワー

【WordPress】米国株の株価をWebサイトに表示するプラグインCustom Stock Widge

      2016/03/17

アメリカ株の株価を表示してくれるWordpressプラグインです。

Custom Stock Widgetをインストールして有効化

いつもの手順でCustom Stock Widgetをインストール→有効化します。

1.ダッシュボード左の「プラグイン」にカーソルを当てて「新規追加」をクリック。

新規追加

2.「プラグインを追加」の画面で右の検索窓に「Custom Stock Widget」と入力して、出てきたCustom Stock Widgetを「今すぐインストール」

CustomStockWidget検索

3.そのまま有効化してください。

プラグインを有効化

Custom Stock Widgetを設定する

設定画面へ

1.インストールしたプラグインはダッシュボード左の「Releved Plugins」の中にあります。「Releved Plugins」マウスオーバーで「StockWidgets」をクリックしてください。

CustomStockWidget設定へ

2.設定画面に入ると真ん中あたりに「Available Stock Widget」とあるので、その下の「Default Setting」の表示にカーソルを近づけると、「Edit」という項目が出現します。そこをクリック。

CustomStockWidget_Edit

設定はすべてお好みです。

Template

「Template」は、プルダウンからどれかを選択して横の「Apply」を押すと、下にサンプルが表示されるので、好きなテンプレートを選んでください。

CustomStockWidget_Template

Stocks

「Stocks」の「Default」欄に表示させたい銘柄のテッィカーシンボルを入力します。

デフォルトではアップル、グーグル、ヤフーになっています。
シンボルとシンボルの間はカンマで区切り、指数はキャレット「^」に続けて書いてください。

(ここでの記載順に表示することも出来ます)

CustomStockWidget_Stocks

下のCustomize Categoriesでは、ウィジェットを表示させるカテゴリーを選択できます。
表示させたいカテゴリーにだけシンボルを入れて、表示したくないカテゴリーは空欄にして置いてください。
カテゴリーごとに表示する銘柄を変えることも出来ます。

Widget Config

「Widget Config」の横の小さな「+」をクリックすると編集する項目が表示されます。

Maximum number of~に、表示する銘柄数を入れてください。
その上にある「Width」と「Height」は、そのままウィジェットの幅と高さですが、ここで指定した幅と高さを、表示する銘柄数で分けるようになります。
「Apply」で仕上がりを確認しながら、銘柄数や表示する場所に合わせて調整してください。

CustomStockWidget_WidgetConfig

Odd Row(奇数行)とEven Row(偶数行)で色を変えられます。

CustomStockWidget_row

Text Config

「Text Config」では、フォントの色、サイズ、種類を選びます。

Stock Display Config

それぞれチェックを入れると以下のようになります。

「Show Header」
最初の行に項目名を表示。

「Last Value」
最新の株価を表示。

「Change Value」
前日比を表示。

「Vertical Dash」
縦の罫線を表示。

「Horizontal Dash」
横の罫線を表示。

その下の「Order」は、表示する順番です。
「Stocks」に入力したのと同じ順にしたい場合は「Preset」を選びます。その他、アルファベット順とランダムがあります。

「Price Change Style」は、前日比の数値を表示する欄の体裁の選択です。
3つありますが、とりあえず選んで「Apply」でサンプルを見て決めてください。

Advanced Styling

Advanced Stylingは、更に細かなデザイン設定をしたい人用です。
なにもなければ、このままでOKです。

URL Link

データを引っ張ってくる元サイトを指定します。
デフォルトでは、Googleの株価情報になっています。

他のサイトのデータを使いたいときは、サイトの個別株価ページのURLのシンボルの箇所を「__STOCK__」に変えたものを入れてください。

例:Yahoo!Finance なら
http://finance.yahoo.com/q?s=__STOCK__
です。

ユーザーがシンボルをクリックするとそのサイトに飛びます。(別のタブで開くように設定されています)

ショートコードを表示させたい場所に貼る

すべて設定が済んだら、「Save Changes」をクリックして

CustomStockWidget_save_changes

ショートコード [ stock-widget ]を(スペース抜いてください)ウィジェットを表示させる場所に貼り付けて終了です。
Previewの欄にある赤の四角で囲った箇所をコピーすると楽です。

CustomStockWidget_preview

スポンサーリンク


 - WordPress