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

WEBデザイン

記事のタイトルとURLコピーするボタンを、WordPressで導入する方法ってどうやるの?って疑問を、解決していきます。

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

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

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

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

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

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

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

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

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

実際にわたしが試してみた手順を、わかりやすく3ステップで説明していきますね。

それでは、いってみよ〜!

ステップ1:single.php に、HTML コピペする

Step01 singlephp

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

コピペするコード
<div class="copy_btn" data-clipboard-text="<?php the_title();  ?> <?php the_permalink();  ?>">
この記事のURLとタイトルをコピーする
</div>
ペースト(貼り付け)する場所

Titleurl html basho

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

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

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

Article copy single

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

ステップ2:<body></body> 内に、jQuery をコピペする

Step02 body

ステップ2は、<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>
ペースト(貼り付け)する場所

Insert Headers and Footers

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

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

ステップ3:追加 CSS に、コピーボタン用の CSS をコピペする

Step03 css

ステップ3は、「記事のタイトルと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";}
ペースト(貼り付け)する場所

Titleurl css

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

ワンポイントアドバイス

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

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

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

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

動作チェック

※ 令和2年6月7日現在、ブログの高速化のため一時的にクリックできない状態になっています。


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

たとえば、この記事では、下のような「記事タイトルとURL」のテキストがクリップボードにコピーされます。

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

ボタンを押したあと、メモ帳などに「貼り付け」をしてみてください。3ステップを実行すれば、あなたの WordPress ブログにも簡単に導入することができますよ。

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

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

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

参考記事のご紹介

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

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

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

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

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

BackWPup

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

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

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

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

まとめ

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

「記事のタイトルとURL」コピーボタンを、WordPressで導入する方法【3ステップ】
  • ステップ1:single.php に、HTML コピペする
  • ステップ2:<body></body> 内に、jQuery をコピペする
  • ステップ3:追加 CSS に、コピーボタン用の CSS をコピペする

※ ステップ1から挑戦する方は、「「記事のタイトルとURL」コピーボタンを、WordPressで導入する方法」のリンクをご利用ください。記事の上部に、移動できますよ!

これで当ブログにも、SNSボタンに依存しない「記事タイトルと記事 URL のコピーボタン」で、読者にやさしい環境が整いました。つねに、読者にとっていちばんよい選択をしていきたいですよね。

今回の記事が、あなたのブログがよりよいデザインになるお手伝いができていたら、うれしいです。それでは、今回はこの辺で!?

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

【関連】ブログ記事まとめ | サウンドテック・ラボ

関連する記事

サウンドオルビス

2,899,640 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

カテゴリ内の記事

おすすめの記事

カテゴリー