公開日:2021/07/09

720 view

WordPressで「この記事のURLとタイトルをコピーする」を実装する

WordPressで「この記事のURLとタイトルをコピーする」を実装する公開日：2021/07/09

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

閲覧している記事で、SNSシェアボタンを身近にみられることが多くあることかと存じます。

実際のところ、最近のSNSはログイン段階で2段階認証のものが多く、ログインしていない場合など、面倒ではないでしょうか。
解決として、本記事では、記事内に「この記事のURLとタイトルをコピーする」ボタンを実装していきます。

目次 [ひらく ▼]

single.php、またはpage.phpへ記述する
footer.phpの閉じタグの前に記述する
style.cssへ記述する（CSSサンプル）

single.php、またはpage.phpへ記述する

「この記事のURLとタイトルをコピーする」を表示したいテンプレートファイルへ、下記を記述します。
記述箇所は、投稿記事であれば、single.php。固定ページの場合は、page.php へ記述します。

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

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

footer.phpの<body>閉じタグの前に記述する

<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>

var clipboard = new Clipboard('.copyBtn');

$(function(){

$('.copyBtn').click(function() {

$(this).addClass('copiedBtn');

$(this).text('記事のURLとタイトルをコピーしました');

});

</script>

style.cssへ記述する（CSSサンプル）

お好きに調整してご使用ください。

.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;
}

.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;

}

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

杉本大貴

SD WEBWORKS代表。システム開発会社でコーディングや WordPressのカスタマイズを学び、2018年フリーランスに。200サイト以上の制作実績。WEB制作に関するお悩みがある方は、お気軽にご相談ください。
ホームページ : https://sd-webworks.com/

コラム一覧をみる

SERVICEサービス

コーポレートサイト制作CORPORATE

リクルートサイト制作RECRUIT

ECサイト制作SHOPPING

サービスサイト制作SERVICE

ポータルサイト制作PORTAL

オウンドメディア制作OWNED MEDIA

ランディングページ制作LP

会員制サイト制作MEMBERSHIP SYSTEM

動画・映像制作VIDEO PRODUCTION

イラスト制作ILLUSTRATION

コーディング・制作代行CODING

WEBサイト保守管理MAINTENANCE

COLUMNコラム

【2022年最新版】「HTML Living Standard」がHTML標準に！

チャットボットサービスとWordPressプラグイン徹底比較６選

【2023年最新版】ワードプレスのおすすめプラグイン 15選

Windows11 壁紙（全32種類）がダウンロード可能に【高画質 4K】

【2022年最新版】「HTML Living Standard」がHTML標準に！

チャットボットサービスとWordPressプラグイン徹底比較６選

【2023年最新版】ワードプレスのおすすめプラグイン 15選

Windows11 壁紙（全32種類）がダウンロード可能に【高画質 4K】

【2022年最新版】「HTML Living Standard」がHTML標準に！

チャットボットサービスとWordPressプラグイン徹底比較６選

【2023年最新版】ワードプレスのおすすめプラグイン 15選

WordPressで「この記事のURLとタイトルをコピーする」を実装する

single.php、またはpage.phpへ記述する

footer.phpの<body>閉じタグの前に記述する

style.cssへ記述する（CSSサンプル）

Windows11 壁紙（全32種類）がダウンロード可能に【高画質 4K】

【2022年最新版】「HTML Living Standard」がHTML標準に！

チャットボットサービスとWordPressプラグイン徹底比較 ６選

WordPressで「この記事のURLとタイトルをコピーする」を実装する

single.php、またはpage.phpへ記述する

footer.phpの<body>閉じタグの前に記述する

style.cssへ記述する（CSSサンプル）

チャットボットサービスとWordPressプラグイン徹底比較６選