「noteで書く」ボタンをWordPressに設置する

「noteで書く」ボタンをWordPressに設置してみる

ボタンを設置したいページに、下記のコードを追加します。

data-url属性の値にページのURLを入力してください。（例:https://www.pieceofcake.co.jp/）

code:button.html

目標:data-url属性に、そのページのurlを放り込むようなphpを書く。

設置するのは、個別投稿を扱うphpファイル。

私の場合はStacker Liteを使っているので、content-single.php

記事の下に表示する感じで

まず現状

code:before.php

<?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();の下辺りを狙ってみる。

code:after.php

<?php

wp_link_pages();

the_content();

<?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とする。

表示させてみる

https://gyazo.com/eff3d769c11a361e816bad58ffc9c10d

うまくできた

表示位置が下すぎる気もするので、全体的なデザインの改修は必要だろう

関連ページをjetpackから独自のものに変えた方がいい

Twitterボタンエトセトラもいっそのこと変えてしまって、jetpackを抜いてもいい

ボタンを押すと

https://gyazo.com/87ed89d1233015747a302c1f366c4c94

きちんとURLが取得されている。