sibahuです。
今回はWordPressで記事のタイトルとURLをコピーするボタンの導入方法を紹介します。
SNSシェアボタンよりも手軽に共有できるので、是非ご自分のサイトでも使ってみてください!
「記事のタイトルとURL」コピーボタンを導入する方法
WordPress Ver 5.4 | Cocoon Ver 2.1.4.1 | Cocoon Child Ver 1.0.6 |
私の動作環境は上記の通りです。
Cocoon以外でもコピペする場所が違うだけで動作はしますので、安心してください。
今回は、最終的にこのようなボタンを導入します。
ボタンを押すと、「コピーしました」の通知と共にURLとタイトルがコピーされます。
たったの3ステップで導入できますので順番に行っていきましょう。
STEP1 : functions.phpに記載する
STEP1は、「functions.php」にコピペします。
function myshortcode_copy_btn() { $title = wp_get_document_title(); $url = get_permalink(); return ' <div class="copy_main"> <div class="copy_btn" data-clipboard-text="'.$title.' '.$url.'"> <i class="fa"></i><span>記事のタイトルとURLをコピー</span> </div> </div> '; } add_shortcode('copy_btn', 'myshortcode_copy_btn');


> functions.php
STEP2 : style.cssに記載する
STEP2は、「style.css」にコピペします。
/************************************************************* **記事のタイトルとURLをコピーするボタン **************************************************************/ .copy_main { margin: 0 0 2.4em; } .copy_btn { padding: 20px 0; border: 2px solid #666; color: #333; text-align: center; font-size: 22px; line-height: 1em; cursor: pointer; border-radius: 50px; /*角丸の角度*/ font-weight: 700; } @media (max-width:575px){ .copy_btn span{ font-size: 16px; } .copy_btn.copied span{ font-size: 18px; } } .copy_btn i:before{ display: inline-block; margin-right: 8px; content: '\f0c5'; font-size: 28px; } .copy_btn:hover{ opacity: .7; } .copy_btn.copied{ border: 2px solid transparent; background: #1e6562;/*クリック後の背景色です*/ color: #fff;/*クリック後の文字色*/ pointer-events: none; } .copy_btn.copied{ cursor: auto } .copy_btn.copied i:before{ content: '\f00c'; } .copy_btn.not-copied{ background: #d90028; } .copy_btn.not-copied i:before{ content: '\f06a'; } .copy_text{ display: none; overflow: hidden; } .copy_text div{ margin: 15px 8px 0; font-size: 13px; line-height: 1.2em; } .copied+.copy_text div{ display: none; } .not-copied+.copy_text div{ display: block; } #copy_textbox{ margin-top: 10px; width: 100%; border: 1px solid #bbb; border-radius: 3px; font-size: 16px; }


> style.css

STEP3 : footer.phpに記載する
最後のSTEP3は、「footer.php」にコピペします。
私が使用しているCocoonテーマでは親テーマの「footer.php」を直接弄らなくてもいいように「footer-insert.php」というファイルが存在します。
Cocoon以外のテーマを使用している方で、「footer.php」を直接弄らなくても良いファイルがある場合はそちらにコピペを行ってください。
なければ直接「footer.php」にコピペを行ってください。
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script> <script> var clipboard = new Clipboard('.copy_btn'); clipboard.on('success', function(e) { jQuery(".copy_btn").addClass('copied'); jQuery(".copy_btn span").text('コピーしました'); jQuery(".copy_text").slideDown('slow'); }); clipboard.on('error', function(e) { jQuery(".copy_btn").addClass('copied not-copied'); jQuery(".copy_btn span").text('コピーできませんでした'); jQuery(".copy_text").slideDown('slow'); }); </script> <script> jQuery('#copy_textbox').on('click', function(e) { e.target.setSelectionRange(0, e.target.value.length); }); </script>



「記事のタイトルとURL」コピーボタンの動作チェック
実際にボタンを配置して動作を確認してみましょう。
記事内とSNSシェアボタン上に設置する場合には記載場所が異なります。
ですので、手順を2つに分けました。
記事内に[copy_btn]の設置
記事内にショートコード[copy_btn]を好きな場所に記載するだけです。

SNSシェアボタン上に[copy_btn]の設置

まとめ
今回、行った手順は以下の通りです!
・style.cssに記載する
・footer.phpに記載する
・「記事のタイトルとURLコピーボタン」の設置
参考サイト
【WordPress】ブログ記事の「タイトルとURLだけをコピー」するボタン https://workaholicdiary.com/wordpress/url-and-title-copy-button
記事のタイトルとURLコピーするボタンを、WordPressで導入する方法
https://soundorbis.com/title-url-copybtn/
コメント