g+1ボタンを非同期に読み込んでwordpressの表示を高速化する

 wordpressの欠点といえばサイトの表示速度が遅いこと。

 g+1ボタンを設置している場合は非同期で読み込むようにしてみよう。

 ちょっとだけだけどサイトの表示速度が速くなる。

STINGER3の設置されているg+1ボタンのコード

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>

STINGER3のg+1ボタンのコードの解説

g+1ボタンを読み込むスクリプト

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

g+1ボタンを表示するコード

STINGER3のg+1ボタンを表示するコード

<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>

 「tall」は縦長のボタン。

 <?php the_permalink(); ?>">は対象となるURL。

 ボタンのみのシンプルなg+1ボタンを表示するコードは↓

<g:plusone></g:plusone>

 ほかにもg+1はいろいろな形で表示できる。

 下がg+1のコードを作るページ。

http://www.google.com/intl/ja/webmasters/+1/button/index.html

非同期のg+1ボタンのコード

<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

非同期のg+1ボタンのコードの説明

 赤い文字のところがg+1ボタンを非同期で読み込むコード。

 g+1ボタンの表示コードの後に非同期で読み込むコードをつけている。

 シンプルなg+1ボタンのコードを非同期にする場合は下のようになる。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone></g:plusone>

非同期ボタンのコードは↓

<g:plusone></g:plusone>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

非同期のg+1ボタンを設置するには

1、ヘッダーやフッターにg+1ボタンを読み込むスクリプトが配置されている場合は、いったん、以下のg+1ボタンを読み込むスクリプトを削除。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

2、非同期のg+1ボタンのコードをg+1ボタンを表示させたい部分に書き込む。

g+1ボタンを1ページに複数設置している場合

1、ヘッダーやフッターに設置している以下のスクリプトを削除。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

2、g+1ボタンを表示し居場所に<g:plusone></g:plusone>を書きこみ、最後の<g:plusone></g:plusone>の下に上の赤い文字のコードを付け加える。

おすすめ記事

コメントを残す




*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

FC2ブログのタイトルの下に文字を入れてみよう
文字の大きさが変えられないのは、スタイルシートのフォントサイズ指定の単位が問題
スクロールバーをスタイルシートで表示する
ブログの携帯表示をPCで見るには
WordPressのリビジョンって何のためにある?
WordPress(オープンソースのテンプレート)が使えるレンタルサーバー
ビジュアルとテキストのエディタが切り替わらない!
スタイルシート(CSS)を縮小・具体例
wordpressテーマSTINGER3のサイドバー【NEW ENTRY】のアイキャッチ画像を削除
コードを収得して、サイトにGoogleアドセンスの広告を貼り付けよう
GoogleBloggeの投稿者名を消す方法がわかったので皆さんにお知らせ
プラグインPS Disable Auto  FormattingをFC2の記事をWordPressに取り込む前に導入しておかないと
JavaScriptを使った文字数チェッカー-全角半角共1文字と数える
GooglePlayアプリのダウンロードサイトへのリンクバナーを作ろう
WordPressの無料テーマ3種をご紹介

Menu

HOME

 TOP