WordPressで閲覧中のページへのリンクタグを生成し、コピーボタンを表示するプラグイン「Get backlinks」

他のブログなどで自分のページを紹介してもらう場合、htmlタグを使い慣れている方や、ツール独自のクイックタグ(ショートカットボタン)の使い方を知っている方なら簡単に挿入することができるリンクタグの設定。

リンクタグの基本コードは
<a href=”リンクページのURL”>リンク先の名称(アンカーテキスト)</a>
なので、このコードをコピーして、

  1. リンクページのURLの入力
  2. リンク先の名称(アンカーテキスト)の入力

を入力すればハイ完成!!なのですが、わざわざ手間をかけてリンクを挿入しようという機会は少ないもの。

また、外部からの直接リンク(被リンク)が多いページは検索エンジンから見て評価が上がり、検索順位に影響することもありますから、特に興味を持って見た方が各ブログ記事などには是非ともリンクを張ってもらいたいものですね。

「Get backlinks」は表示されているコードをそのままコピペするだけで簡単に別のサイトやブログへ閲覧しているページへのリンクを挿入してもらえるようにするプラグインです。

同様のプラグインに

「WP Link To This Post」は記事の下にリンクコードを表示するプラグインです。表示するコードをブログなどへ張ってもらうことでバックリンクの獲得を行い、SEO対策とアクセスアップに役立てるためのプラグインです。

というのがありますが、「WP Link To This Post」プラグインとの違いは

  1. コードが表示される画面の下にクリップボードへコピーするためのボタンが表示される
  2. コード表示画面の中の文章を自由に加工してもらうことができる
  3. リンクを促すコンテンツの位置をショートコードで任意に設定することができる

という点です。

スポンサーリンク



【Get backlinks】プラグインの基本的な機能・できること

  1. ショートコードを使って任意の位置へ閲覧しているページへのリンクコードを表示
  2. 表示されているコードのコピーボタン
  3. リンクコード表示窓内の文章を自由に加工することができる(アンカーテキストなどを変更してからコピーができる)
  4. ウィジェット表示
この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています
  5. 使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

【Get backlinks】プラグインの設定画面や表示の日本語化と翻訳

【Get backlinks】プラグインは言語の変更に未対応ですので表示のまま設定することになります

【Get backlinks】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

【Get backlinks】プラグインの基本的な使い方

[get_backlink]というショートコードを任意の場所へ挿入することで
get-backlink-plugin
のようなコンテンツが追加されます。

また、ウィジェットが用意されているので、簡単にサイドバーなどへ機能を追加できます

【Get backlinks】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

ボタンを日本語表記にする

上の画像ではボタンが日本語になっていますが、標準は英語表記になっています。変更するにはプラグインのソースを直接変更する必要があります
「プラグイン」→「プラグイン編集」から「get-backlinks」を開き「getbacklink.php」の69行目あたりからはじまる以下のコードを編集します

<?php
 ?>
    <button class="btn btn-primary" data-clipboard-action="copy" data-clipboard-target="#bar">Copy</button>
 <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>
 <script>
    var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    e.trigger.textContent = 'Copied';
    window.setTimeout(function() {
        e.trigger.textContent = 'Copy';
    }, 3000);
     e.clearSelection();
});
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
    e.trigger.textContent = 'Press "Ctrl + C" to copy';
    window.setTimeout(function() {
        event.trigger.textContent = 'Copy';
    }, 3000);
});
Copy/Copied/Press “Ctrl + C” to copyと書かれている部分を日本語にします。変更後の例としては

<?php
 ?>
    <button class="btn btn-primary" data-clipboard-action="copy" data-clipboard-target="#bar">リンクタグをコピーする</button>
 <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>
 <script>
    var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    e.trigger.textContent = 'クリップボードにコピーしました';
    window.setTimeout(function() {
        e.trigger.textContent = 'リンクタグをコピーする';
    }, 3000);
     e.clearSelection();
});
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
    e.trigger.textContent = 'コピーに失敗しました。キーボードの "Ctrl + C" を使ってコピーしてください';
    window.setTimeout(function() {
        event.trigger.textContent = 'リンクタグをコピーする';
    }, 3000);
});
という感じにします。このままでいいという方はコードをそのまま上書きすれば完了です(きちんど同じ文のみコピーしないとエラーが発生します)

ボタンや表示枠などのスタイルを編集する

表示枠は「プラグイン」→「プラグイン編集」から「get-backlinks」を開き「getbacklink.php」の59行目あたりからはじまるCSSコードを編集します

ボタンのスタイルは「btn btn-primary」というクラスが割り当てられていますので、テーマのCSSに追加するか、独自のボタン用CSSがある場合にはクラス名を変更します

リンクタグに追加の記述をする

生成されるリンクタグは単純に「サイト名-ページ名」というアンカーリンクを持つリンクになっています。これを変更するには
55行目あたりの
<a href=’. $currenturl .’>’ . $blogname .’-‘.$blogtitle . ‘</a>

  1. . $blogname .がサイト名
  2. .$blogtitle .がページのタイトル

なので表記を変更したり、

<a href=’. $currenturl .’>’ . $blogname .’-‘.$blogtitle . ‘ target=”blank”</a>
と赤字部分の属性を追加することで、リンク先を別タブで開くようにするタグを生成することもできるようになります

おまけ プラグインを使わずにリンクコードを表示する方法

完全におまけ情報ですが、ボタンなんかいらないから見ているページへのリンクコードだけ表示したい!!という方のために、現在表示しているページへのリンクコードを表示するPHPコードを紹介しておきます。

投稿の本文内でPHPコードが動作するようにする「EXEC PHP」などのプラグインがインストールされていることが前提です。

以下のコードを本文内やテキストウィジェットへコピペすればコードが表示されます

<textarea><a href="<?php echo get_permalink( $post->ID ) ?>" target="blank"><?php echo get_the_title() ?>-<?php echo get_bloginfo( 'name' ) ?></a></textarea>

簡単にコード解説すると
get_permalink( $post->ID )でページのURLを取得します
echo get_the_title()でページタイトルを取得します
get_bloginfo( ‘name’ )でサイト名を取得します
そして、これをリンクコードの中に入れ、文字列として表示させるためにtextareaタグで囲めば完成です。

案外簡単ですね。ボタン表示をしたい場合には素直にプラグインを使いましょう。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
【送料無料】 WordPressレッスンブック HTML5 &amp; CSS3準拠 スマートフォン・タブレット対応 / エ・ビスコム・テック・ラボ 【本】

【送料無料】 WordPressレッスンブック HTML5 &amp; CSS3準拠 スマートフォン・タブレット対応 / エ・ビスコム・テック・ラボ 【本】

3,024 円 (税込) 送料込
基本情報ジャンル建築・理工フォーマット本出版社ソシム発売日2014年06月ISBN9784883379248発売国日本サイズ・ページ319p 24×19cm関連キーワード 9784883379248 【FS_708-2】出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
【中古】 WordPressレッスンブック ステップバイステップ形式でマスターできる / エビスコム / ソシム [単行本]【メール便送料無料】【..

【中古】 WordPressレッスンブック ステップバイステップ形式でマスターできる / エビスコム / ソシム [単行本]【メール便送料無料】【..

323 円 (税込)
著者:エビスコム出版社:ソシムサイズ:単行本ISBN-10:4883377245ISBN-13:9784883377244■通常24時間以内に発送可能です。午後1時までのご注文は通常当日出荷。■メール便は、1冊から送料無料です。※宅配便の場合、2,500円以上送料無料です。※あす楽ご希望の方は、宅配便を..
楽天ウェブサービスセンター CS Shop

プラグインに関するお問い合わせ

「こんなプラグインないの?」「設定方法をもっと詳しく教えてほしい」「プラグインを少しカスタマイズして使いたい」などのご相談は、こちらのリンクからお願いします(【ココナラ】のサイトへ移動します)。

ココナラ Wordpress プラグイン探し バナー

似たようなプラグインをお探しですか?

このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。
トップへ戻る