• HOME
  • WordPress
  • 記事のタイトルとURLコピーするボタンを、WordPressで導入する方法

記事のタイトルとURLコピーするボタンを、WordPressで導入する方法

この記事のURLとタイトルをコピーする
WordPress
読者さん
読者さん
記事のタイトルとURLコピーするボタンを、WordPressで導入する方法ってどうやるの?

って疑問を、解決していきます。

読者ユーザーの利用する SNS が多様化しており、SNS ボタンはどれを選んだらいいんだろう?って悩みをかかえるブロガー、きっと多いはずです。

さらに言えば、SNS ボタンをクリックしてログイン画面がでてくると、シェアするの面倒になりがち説だってあるので、どのぐらいシェアボタンに効果があるのか考えてしまいますよね。

サウンドオルビス
サウンドオルビス
最近は2段階認証だから、ログイン作業たいへんなのよね...

って問題を、「WEB企画LABO」や「あなたのスイッチを押すブログのばんか (bamka)さん」も感じていたようです。

その解決策として、ブログ記事に「タイトルとURLをコピーするボタン」を実装する方法が公開されていました。

本記事では、ご紹介したブログの方法を参考にしながら、WordPress で導入する方法を3ステップで初心者向けにまとめていきます。

というわけで今回は、「記事のタイトルとURL」コピーボタンを、WordPressで導入する方法を解説していきます。

「記事のタイトルとURL」コピーボタンを、WordPressで導入する方法

「記事のタイトルとURL」コピーボタンを、WordPressで導入する方法を、3ステップで解説します。

STEP1:single.php に、HTML コピペする

Step01 singlephp

ステップ1は、テーマファイル「single.php」にHTML をコピペします。

コピペするコード

<div class="copy_btn" data-clipboard-text="<?php the_title();  ?> <?php the_permalink();  ?>">
この記事のURLとタイトルをコピーする
</div>

HTML参考:「『記事タイトルとURLコピーする』だけのボタン」をWordPressで実装したコード公開 | とある浪速の調査雑記

ペースト(貼り付け)する場所

Titleurl html basho

WordPress 管理画面サイドバーの 外観 - テーマエディターの「single.php」を、クリックします。

ブラウザ Chrome の検証機能などを使って、挿入したい HTML の箇所を探してみましょう。(検証機能の参考記事:記事のアイキャッチをCSSで非表示にする方法)

コピペすると、こんな感じになります↓

Article copy single

サウンドオルビス
サウンドオルビス
わたしは公開日の上に、挿入しましたよ。

STEP2:<body></body> 内に、jQuery をコピペする

Step02 body

<body></body> 内に、jQuery をコピペします。

コピペする jQuery コード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- ↓クリップボード操作のために使用するjsを読み込む ( https://clipboardjs.com/ ) -->
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.copy_btn');    //clipboard.min.jsが動作する要素をクラス名で指定
//クリックしたときの挙動
$(function(){
  $('.copy_btn').click(function(){
    $(this).addClass('copied');    //ボタンの色などを変更するためにクラスを追加
    $(this).text('コピーしました');    //テキストの書き換え
  });
});
</script>

jQuery参考:【拡散率アップ!?】ブログに「記事タイトルとURLコピーする」だけのボタンを実装したら色々便利でした! - ウェブ企画ラボ

ペースト(貼り付け)する場所

Insert Headers and Footers

プラグイン「Insert Headers and Footers」を使って <body></body> 部分に、コピペしました。(使い方の記事)

プラグインならテーマを編集しなくていいので、安全に作業できるのでおすすめです。

STEP3:追加 CSS に、コピーボタン用の CSS をコピペする

Step03 css

最後に、「記事のタイトルとURL」コピーボタン用の CSS をコピペします。

コピペするCSS

.copy_btn {
    width: 100%;
    max-height: 200px;
    display: block;
    border: 2px solid #666;
    text-align: center;
    font-weight: 700;
    padding: 30px 0 26px;
    margin: 0 auto 10px;
}
.copy_btn:hover {cursor: pointer; color: #fff; background: #111111; opacity: .6;}
.copy_btn.copied {
	pointer-events: none;
	background: #333333;
	color: #ffffff;
}
.copy_btn.copied:hover {cursor: auto;}

/* ↓FontAwesome を使わない場合は、ここより下を削除してください↓ */
.copy_btn.copied:before, .copy_btn:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 3px;
}
.copy_btn:before {content: "\f0c5";}

CSS参考:「『記事タイトルとURLコピーする』だけのボタン」をWordPressで実装したコード公開 | とある浪速の調査雑記

ペースト(貼り付け)する場所

Titleurl css

外観 - CSS 編集を、クリックしてください。追加CSSのなかに、コピーしたCSSを加えて公開をクリックしてください。

ワンポイントアドバイス

ユーザーにわかりやすいように、テキストの先頭にアイコンをつけてみました。無料の「FontAwesome」Web フォントを、使っています。表示されない場合は、WordPressプラグイン「Font Awesome」をインストールしてください。またアイコンが必要ない場合は、「↓FontAwesome を使わない場合は、ここより下を削除してください↓」以下のCSSを削除してください。

作業終了!!

サウンドオルビス
サウンドオルビス
ボタンをクリックして、動作をチェックしてみよう!!

「記事のタイトルとURL」コピーボタンの動作チェック

「記事のタイトルとURLコピーするボタン」が、どんな感じで動くのかチェックしてみましょう。

動作チェック

この記事のURLとタイトルをコピーする

たとえば、この記事の場合は、下のような「記事タイトルとURL」のテキストがコピーされます。

コピーされるテキスト例
  • 記事のタイトルとURLコピーするボタンを、WordPressで導入する方法 https://soundorbis.com/title-url-copybtn/

ボタンを押したあと、メモ帳などに「貼り付け」をしてみてください。

3ステップを実行すれば、あなたの WordPress ブログにも簡単に導入することができますよ。

またあとで紹介する記事を参考にしながら、コードに変更をくわえています。

コピーボタンをクリックするまえとあとで、アイコンが変わるところがポイントですね。カラーリングなどは、ご自身のサイトにあったものをチョイスするようにしてくださいね。

サウンドオルビス
サウンドオルビス
これで、拡散力アップだ!!

参考記事のご紹介

「記事のタイトルとURL」コピーボタンの導入については、下記の記事を参考にさせていただきました↓

実際に自分で試してみて、初心者が引っかかりそうなところをカバーするつもりで記事を書かせていただきました。

やり方を公開している「WEB企画LABO 様」「とある浪速の調査雑記 様」には、感謝の気持ちでいっぱいでございます。

サウンドオルビス
サウンドオルビス
ありがとうございます!!

挑戦する前に、バックアップをお忘れなく!!

BackWPup

「記事のタイトルとURL」コピーボタンを WordPress に導入する前にバックアップをするようにしましょう。

HTML コードをコピペする際に、テーマファイルを修正します。失敗すると、ブログが真っ白になりますのでご注意を!!

バックアップは、プラグインでサクッとできます。もしものときに、備えておきましょう↓

BackWPupの使い方を解説!!WordPressを自動でバックアップ

まとめ

「記事のタイトルとURL」コピーボタンを、WordPressで導入する方法を解説してきました。

これで当ブログにも、SNSボタンに依存しない「記事タイトルと記事 URL のコピーボタン」で、読者にやさしい環境が整いました。

つねに、読者にとっていちばんよい選択をしていきたいですよね。

ほかにも、WordPress の疑問を解決する記事をご用意しております。詳細はこちらをどうぞ↓

「WordPress」カテゴリ新着記事はこちら

この記事のURLとタイトルをコピーする
記事へのお問い合わせ

サウンドオルビス

1,577,955 views

悩みからの解放宣言!!「音楽」と「テクノロジー」の悩みを解決するために、情報発信しています。現在「モバイルDTM」といえば、サウンドオルビス!!って言われるような記事をたくさん書いています。

プロフィール
  1. この記事へのコメントはありません。

ブログについて

「サウンド」「テクノロジー」をキーワードに、最新情報・商品レビュー・ハウツー講座・噂・小技など、個人で稼ぎたいクリエイターが役立つ情報を集めたメディアです。
Soundtech-Labo とは?

NEW POSTS

インスタグラム