「noteで書く」ボタンをWordPressに設置する
>ボタンを設置したいページに、下記のコードを追加します。
> data-url属性の値にページのURLを入力してください。（例:https://www.pieceofcake.co.jp/）
button.html<a href="https://note.mu/intent/social_button" class="note-social-button" data-url="https://www.pieceofcake.co.jp/"></a>
<script async src="https://cdn.st-note.com/js/social_button.min.js"></script>目標:data-url属性に、そのページのurlを放り込むようなphpを書く。
設置するのは、個別投稿を扱うphpファイル。
私の場合はStacker Liteを使っているので、content-single.php
記事の下に表示する感じで
まず現状
before.php<div id="content">
<?php
wp_link_pages();
the_content();
posts_nav_link( ' · ', 'previous page', 'next page' );
edit_post_link( __( 'Edit', 'stacker-lite' ), '<span class="edit-link">', '</span>' );
?> the_content(); の下辺りを狙ってみる。after.php<div id="content">
<?php
wp_link_pages();
the_content();
?>
<a href="https://note.mu/intent/social_button" class="note-social-button" data-url="<?php the_permalink(); ?>"></a>
<script async src="https://cdn.st-note.com/js/social_button.min.js"></script>
<?php
posts_nav_link( ' · ', 'previous page', 'next page' );
edit_post_link( __( 'Edit', 'stacker-lite' ), '<span class="edit-link">', '</span>' );
?>data-urlの中に
<?php the_permalink(); ?> を放り込んで、各記事のURLとする。表示させてみる
うまくできた
表示位置が下すぎる気もするので、全体的なデザインの改修は必要だろう
関連ページをjetpackから独自のものに変えた方がいい
Twitterボタンエトセトラもいっそのこと変えてしまって、jetpackを抜いてもいい
ボタンを押すと
きちんとURLが取得されている。