Windows11 壁紙（全32種類）がダウンロード可能に【高画質 4K】
289,961 view
閲覧している記事で、SNSシェアボタンを身近にみられることが多くあることかと存じます。
実際のところ、最近のSNSはログイン段階で2段階認証のものが多く、ログインしていない場合など、面倒ではないでしょうか。
解決として、本記事では、記事内に「この記事のURLとタイトルをコピーする」ボタンを実装していきます。
「この記事のURLとタイトルをコピーする」を表示したいテンプレートファイルへ、下記を記述します。
記述箇所は、投稿記事であれば、single.php。固定ページの場合は、page.php へ記述します。
1 | <div class="copyBtn" data-clipboard-text="<?php the_title(); ?> <?php the_permalink(); ?>">この記事のURLとタイトルをコピーする</div> |
1 2 3 4 5 6 7 8 9 10 11 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script> <script> var clipboard = new Clipboard('.copyBtn'); $(function(){ $('.copyBtn').click(function() { $(this).addClass('copiedBtn'); $(this).text('記事のURLとタイトルをコピーしました'); }); }); </script> |
お好きに調整してご使用ください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | .copyBtn { text-align: center; } .copyBtn { font-size: 11px; font-weight: bold; letter-spacing: 1px; background: #fff; border: 3px solid #ccc; cursor: pointer; display: block; line-height: 27px; width: 320px; padding: 0 5px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition-property: background-color, color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; transition-property:background-color, color; transition-duration: 0.3s; transition-timing-function: ease; margin: 0 auto 10px; } @media screen and (min-width: 768px) { .copyBtn { font-size: 13px; line-height: 54px; margin: 0 auto 20px; } } .copyBtn.copiedBtn { background: #ccc; color: #fff; pointer-events: none; } |
SD WEBWORKS代表。システム開発会社でコーディングや WordPressのカスタマイズを学び、2018年フリーランスに。200サイト以上の制作実績。WEB制作に関するお悩みがある方は、お気軽にご相談ください。
ホームページ : https://sd-webworks.com/