jQuery

JavascriptでWordPressの投稿画面にコピー出来るメモを作る

WordPressの投稿画面ではよくショートコードを使いますが、使いたいときに頭に入ってなくて、他のページからコピペしてくる事が多々あります。

書いててもテンポが悪く不便だと普段から思ってました。投稿画面を新しいグーテンベルクに変更し、書く事がかなり楽になったので、この際Javascript(jQuery)で作ってみようと思い作ってみました。

まずはどんな感じかご覧ください。

配置したのは画面右の設定画面内。ここが一番邪魔にならず使いやすいのでここに配置しました。

配置されたボタンを押すと該当のテキストがコピーされます。そのあとは好きな箇所に貼り付ければOKです。

ボタンとして配置したのはよく使うショートコードですが、配列を追加すれば好きなように増やせます。(改行付きはまだ実装出来ていません)

一番上の外部リンクのショートコードは下のinput要素にURLを入れれば上のショートコードに埋め込まれます。COPYを押せばそのままコピー。好きな箇所に貼り付けてください。

ショートコードを貼り付けた後にURLを追加してもいいんですが、グーテンベルクだとHTML要素に変更しないと書き換えできないので、この方式にしました。

使用したもの

使ったのはブラウザのアドオンです。Javascriptをページに配置できるものです。chromeならこれがオススメです。

よく見るサイトを自分好みに!どのサイトにも自作のJavaScriptを追加できるchromeアドオン「ScriptAutoRunner」が便利最近はブラウザで完結する仕事がかなり増えていますが、外部のサービスを使っているとどうしても不便な事が出てきます。 「ここに更新ボタンがあ...

ほかのブラウザでも似たようなアドオンがあるので探してみてください。

使用したJavascript

素人作成なのでおかしい箇所もあるかと思いますが、よかったらお使いください。

テンプレートリテラル(`)が使われているので古いブラウザではたぶん動作しません。

なぜ直接phpで導入しないのか

そもそもphpがそれほど詳しくないのと、Wordpress自体を直接いじるのは不安じゃないですか?私はなるべくやりたくないんですよね。

プラグインでもそういったのは色々ありますが、グーテンベルクにするとうまく使えないものや画面が崩れるものが多く断念しました。

また最悪問題が起こってもJavascriptの配置を止めればいいだけなので、対処もしやすいです。

今回のまとめ

プログラミングは勉強中ですが、ちょっとしたものが作れるようになると楽しいですね。これからも欲しいものは自分で作ってみようと思います。

プログラミング集中的に学びたい方向け






プログラミング自分のタイミングで学びたい方向け

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA