2018-12

WordPress

Gutenbergのビジュアルエディタとコードエディタの切り替えなどを検出する方法

ブロックエディタには「ビジュアルエディター」と「コードエディター」の二種類のエディタが用意されており、気軽に切り替えることができます。 ビジュアルエディターコードエディター エディタにデザインを適用させるためにクラスを...
WordPress

Gutenbergエディタにテーマ以外の外部CSSを追加する方法

テーマのCSSをエディタに適用することで公開後のデザインに近づけることができます。 今までのクラシックエディタではテーマディレクトリ配下のCSSを「add_editor_style」を使用して追加することができました。 その場...
WordPress

Gutenbergエディタとクラシックエディタの判定やCSSの読み込み方法まとめ

エディタの判定 以下の方法でGutenbergエディタ(ブロックエディタ)とクラシックエディタを判定することが可能です。 $current_screen = get_current_screen(); if ( ( method_ex...
WordPress

Marker Animationプラグインの更新 v1.1.9~v1.2.4

Marker Animationプラグインは蛍光ペンを引くようなアニメーションを設定できるようにするWordPressのプラグインです。 v1.1.9 WordPress5.0のGutenbergエディタへの対応...
WordPress

GutenbergエディタのDOMを操作をしたい場合

今までのエディタでは「tiny_mce_before_init」フィルタなどのフックでクラスを付与したり色々な設定を変更したりすることができました。 Gutenbergでは同様の方法をとることができません。 新たにDOMの構築後...
WordPress

Gutenbergエディタ(ブロックエディタ)にボタンを追加する

WordPressのバージョンが5.0になり、エディタが新しくなりました。 これまでのTinyMCEとは異なりReactを利用したモダンな実装になっており、エディタへの機能の追加方法も大きく変わりました。 ここでは選択し...
WordPress

WordPressのTinyMCE投稿エディタでダイアログを出すボタンを追加する

WordPress5.0からGutenbergという新しい投稿エディタがデフォルトになりましたが、プラグインで前のバージョンの投稿エディタ(TinyMCE)はまだ使えます。 また新しいエディタ内でも「フォーマット」⇒「Clas...
WordPress

WordPressでマーカーアニメーション

先日マーカー(蛍光ペン)で線を引くようなアニメーションをつけるjQueryプラグインを作成しました。 せっかくなのでWordPressから簡単に使用できるようにプラグイン化しました。 導入方法 プラグイン...
プログラミング

jQueryプラグインを作成する(npmパッケージ化)

先日初めてjQueryプラグインを作成しました。 作成したものは以下のマーカーで塗るようなアニメーションを行うプラグインです。 作成するにあたっての手順のメモです。 環境はmacです。 最終的な成果物 ...
プログラミング

マーカーアニメーションをjQueryプラグイン化してみた

画面に表示されたときにマーカー(蛍光ペン)で線を引くようなアニメーションを付けるjQueryプラグインを作成しました。 動作例  導入 ソースはGitHubで管理しています。 ダウンロードして利用する場合 リリースバー...