WP Githuber MDの設定変更だけしても反映されない場合がある

Markdornだけではなくモジュールなどいろいろな設定があるため、途中で設定を変更することもあると思います。

そのときはWordpressの管理画面より「設定 > WP Githuber MD」の設定に進んで、更新を行うことになりますが、そこを変更してもすでに書いてある過去記事には反映されない場合があります。

記事を再度更新する必要があるかもしれない

私が遭遇したのはコードのSyntax Highlightを表示するprism.jsとhighlight.jsの設定でした。こちらをオンにしても、既存の記事に変更がありませんでした。

おかしいと思っていると、highlight.jsを有効にした際にJavascriptのコンソールへ次のメッセージが出ていることに気づきました。

 WP Githuber MD
  You have enabled highlight.js modules already, but you have to update this post to take effect, identifying which file should be loaded.Githuber MD does not load a whole-fat-packed file for every post.

あっ…

その記事を編集画面で開いて更新ボタンを押すと、内容が更新されたようでハイライトも表示されました…

特に内容を変更する必要なく、更新ボタンを押すだけで良かったです。

他にもこういった、更新時に生成されているなにかがある場合があるので、設定変更の際に反映されなかったらそれを確認してみると良いと思います。

…とあるのですが、実際にはオプションをオンにするだけではうまくいきませんでした。

「Inline Code Block with Keyboard Style」をオンにする

まず設定より「Extentions > Inline Code Block with Keyboard Style」をオンにします。

このオプションにより、次のように記載した文字が <code class="kb-btn"> に変換されます。

`{ctrl}`+`{c}` 

そしてkb-btnクラスのCSSが適用され、

のように強調されて表示されるはずでした。

適用するCSSを設定する

kb-btnのCSSを手動で設定する

しかし、動作を見ているとそうはなりません。

こちらのサイトを見てもうまくいってないみたいなので、デフォルトではうまく動作しないようです…

WP Githuber MD が微妙に使えそうなハナシ | 雑廉堂の雑記帳

WordPress の マークダウンプラグイン、WP Githuber MD を試してみました。

www.rough-and-cheap.jp

追いかけてみるとkb-btnのCSSがページに含まれていないため、強調表示にならないようでした。

ですのでコード内の記述を参考に、kb-btnのCSSを自分で設定する必要があります。

githuber-md/Githuber.php at master · terrylinooo/githuber-md

Markdown editor plugin for WordPress. Contribute to terrylinooo/githuber-md development by creating an account on GitHub.

github.com

CSSだけ抜き出すと次になります。

                code.kb-btn {
                    display: inline-block;
                    color: #666;
                    font: bold 9pt arial;
                    text-decoration: none;
                    text-align: center;
                    padding: 2px 5px;
                    margin: 0 5px;
                    background: #eff0f2;
                    -moz-border-radius: 4px;
                    border-radius: 4px;
                    border-top: 1px solid #f5f5f5;
                    -webkit-box-shadow: inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9, 0 1px 2px #333;
                    -moz-box-shadow: inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9, 0 1px 2px #333;
                    box-shadow: inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9, 0 1px 2px #333;
                    text-shadow: 0px 1px 0px #f5f5f5;
                }

CSSは読み込まれる部分であればどこでも問題ありません。WPの「外観 > カスタマイズ > 追加CSS」あたりがお手軽かなと思います。

これで想定通り表示されるようになりました。

もしかして

記載されているコードをよく見ると、kb-btnが有効になる条件が

if ( '_blank' === githuber_get_option( 'post_link_target_attribute', 'githuber_preferences' ) ) {

と記載されています。

これは設定としては「Preferences > Link Opening Method」に当てはまり、こちらを「New window.」に変更すると確かにCSSが有効になります。
(ただこれをオンにすると、トップページのリンクから開いた記事が全部新しいタブになってしまったので、ちょっとウチでは使えませんでした…)

このオプション自体はリンクを外部ウィンドウで開くかどうかというもので、キーボードスタイルには関係なさそうに思います…

この修正が入ったissueはこちらなんですが、修正コミットと合わせてみると、おそらく「必要なぶんだけCSSをロードする」ために入れた修正じゃないかと思います。

もしかして条件判定する対象の設定を間違えているんじゃないかしら…

トラブルシューティング

設定してもうまく表示されない場合

WP Githuber MDは、保存したときの設定で表示用のデータを作成しているようです。

なので「Inline Code Block with Keyboard Style」設定だけ変更しても、 それまでに書いた記事のcodeタグにkb-btnクラスはついていないかもしれません。

クラスがなかった場合は、記事の編集画面から一度更新することを試してみてください。

　いろいろと調べていった結果、ひとまず使える方法が落ち着いたのでまとめてみました。

「WP Githuber MD」を使用する

　WP Githuber MD プラグインをインストールすると、記事を書くときにMarkdownを使用できます。

　エディタも専用のものに自動で(強制的に)変更されます。

「WP Githuber MD」プラグインのインストール

　「プラグイン > 新規追加」からインストールできます。

　「markdown」あたりで検索すれば出てくると思います。

　インストールしたら有効化します。

あとは書くだけ

　プラグインを有効化すると、エディタも専用のものに変わっていると思います。

　クラシックエディタっぽい感じですね。

　リアルタイムでプレビューもしてくれて便利です。

プレビューボタン

　おそらくClassic Editorをベースに作っていると思われるので、Gutenbergと違ってプレビューボタンは固定されておらず、長い記事を書いているとページのプレビューが不便に感じることもあります。これはそういう作りだからどうにもならなさそうですね…

　手前味噌ですが、以前作ったプレビュー表示用ブックマークレットがCWP Githuber MDのエディタでも使えましたので、もしよければご利用ください。

「Classic Editor + Jetpack」を使用する

　別の方法として、4.x以前のWordPress標準エディタにJetpackで記述する方法もあります。

「Classic Editor」プラグインのインストール

　5.xから導入されたブロックエディタ(Gutenberg)を使用せず、プレーンテキストで入力できるようにすることは必須みたいです。

　ですのでエディタを4.x以前のもの(Classic Editor)に切り替えるため、Classic Editorをインストールします。

　「プラグイン > 新規追加」から検索すれば出てくるので、そのままインストールすればOKです。

デフォルトエディタをClassic Editorに切り替える

　続いてWordPressの設定を、エディタとしてClassic Editorを使うように変更します。

　「設定 > 投稿設定」に選択項目が出てきていますので、「Classic editor」を選択します。

　新規投稿をしてみると、4.x以前のエディタに戻っています。

Markdown対応プラグイン(Jetpack)をインストールする

　次にMarkdownを使えるようにするためJetpackプラグインをインストールします。

　JP MarkdownはもともとJetpackからMarkdown機能だけ抜き出したプラグインだったようで、JetpackプラグインにはMarkdown機能がオプションで入っています。(オプションのために全部入りを使うの、ちょっと本末転倒感はありますが…)

　インストールは「プラグイン >新規追加」から行います。「jetpack」あたりで検索してもらえれば出てきます。

　Jetpackは機能によって有料となりますが、Markdownは無料版でも使用できました。

Markdownの有効化

　「Jetpack > 設定 > 執筆」タブから設定を有効にします。

　「プレーンテキストの Markdown 構文で投稿やページに書き込み」を有効にします。

　あとは記事を書くときに「テキスト」タブからMarkdown形式で記述すればOKです！

オプションが有効にできないときは

　上記のようにオプションが選択できない場合もあります。この場合は競合しているプラグインがある可能性があるので、プラグイン一覧を確認してそれっぽいものを無効にしてみてください。

　私はWP Githuber MDが衝突していました。こちらを無効にしたら、オプションを変更できるようになりました。

番外編：ブロックエディタ(Gutenberg)でMarkdownを使用する

　JetpackのMarkdownオプションを有効にすると、GutenbergでもMarkdown形式で入力できるようにもなります。

　右絵のメニューから「コードエディタ」に切り替えて入力することで、Markdownでも記述できるようになります。

　ただし、保存するとHTMLタグに自動変換されるので後からMarkdownで編集することはできませんでした…

　プレーンテキストのまま保存しておいてくれたらよかったのですが…残念。

さいごに

　JP Markdownはずっとお世話になっていて(むしろ今も使ってる)よかったのですが、これからだとエディタもセットになっているWP Githuber MDのほうが便利かもしれません…

　またGutenbergも日記とかだらだら書くぶんにはそんなに悪くなかったので、Markdown使いたい！　って場合でなければそのままでも良いかもしれないですね。

　意外と悪くないですからアレ。動作もそう悪くない感じですし。

「プレビュー」ボタンを押したことにするブックマークレット

次のリンクをドラッグ＆ドロップして、ブラウザの「ブックマーク」や「お気に入り」などに登録してください。

WPプレビュー

または次の文字列をコピーして、ブックマークのURLとして登録してください。

javascript:document.getElementById('post-preview').click();

あとはそのブックマークをWordPressの編集ページで押すだけ。 簡単！

仕組み

プレビューボタンには「post-preview」のIDがつけられていたので、その要素を取得してclickイベントを実行しています。

以前にはてなブログの「編集」ボタンが押せなさすぎてブックマークレット作ったことがあったの思い出して、それを応用してみたら上手くいきました！

ブックマークバーはブラウザ側の制御でつねに見えるところにおいてあるからWP内の配置も気にしなくてよくてとても楽になりました。

またショートカットキーの追加とは違ってWordPressをいじらなくてもよく、ブックマーク追加するだけで済むのでとても手軽です！

本当はGutenbergエディタにすれば解決されるので、そうしたほうが良いとも思うのですが…

Markdownで書いてきた記事が多すぎてまだちょっと移行できる気がしないの…

　そこが　おまえの　居場所だ！

※2021/3/8追記
ブックマークレット作ってみたらめちゃ便利で専らこっち使ってます。

[WordPress] Classicエディタでプレビューができるブックマークレット作ってみました

なんか思いついたらかんたんな話でした… 「プレビュー」ボタンを押したことにするブックマークレット 次のリンクをドラッグ＆ドロップして、ブ...

www.scriptlife.jp

2021-03-08 01:10

長文書いてるとプレビューがめんどくさいWordPressのエディタ

　WordPressのエディタは標準で「下書き保存」「プレビュー」「公開」を行うメニューが右上にあります。

　短い記事を書いてるときは別にそこでもよいのですが…長文になっていくといちいち画面を上にスクロール押さないといけない。

　そしてまた戻ってくる…を繰り返して非常にめんどくさい。

　なんとかならんかといろいろ検索してみたのですが、

ショートカットは存在しなさそう？

　先人の方々もいろいろ苦労されているようで…標準ではショートカットキーはなさそうでした。

　他に方法としては、JavaScriptを使ってショートカットをカスタマイズする方法と、Tab2回押してEnterする方法が見つかりました。

【作業効率化】ワードプレスのプレビューボタン押すのめんどくさくない？｜つめまるブログ

WordPress投稿画面のプレビューボタンにショートカットを割り当てて作業を効率化しよう。プレビューボタンを押すために画面上までスクロールするのがめんどくさいない？直前に直してた文章も見失うしデメリットしか感じないです。

tumemaru.com

WordPressプレビューを表示させるショートカット【簡単】

WordPressのプレビュー画面を、キーボードの簡単な操作で一発表示させる方法の紹介です。 この方法を使えば、今後ブログ作業の効率が上がること間違いなし！ 難しい設定等は一切ありませんので、ぜひやっ

daifuku-diary.com

　JavaScriptはさすがに面倒なので、Tab2回をやってみたところうちの環境では2回で済まず3回必要でした。どうもメニューの開閉ボタンに先に反応してしまっているみたい。

　しかもカーソルがどこに移動してるかみえないから、下手すると「更新」ボタンを間違って押してしまう可能性があって、ちょっと怖いなと思いました…

メニューだったら移動できるのでは？　→できた

　そこでふと「これもしかして丸ごと移動できるのでは？」と思い「公開」となっているタイトル部分をクリックしたままドラッグしてみると見事に動かせました！　これでいける！

　ただ問題は移動先。右のメニューはいっぱいあるから下手に下のほうにすると今度は、短い記事をかいてるときに困ります…

　適当な場所を探してると、ふとこの記事の下にもメニューブロックがあるっぽいことに気がついたので放り込んでみたら動いた。

　そういうことです…

　だいたいプレビューが必要になるときは記事の下のほうを書いているし、見直しているときとかでも記事フォームの下にあったほうが便利かなと思います。私は記事が長めになることが多いから、ここがよさそうと思ってしばらく置いてみます。

　メニューブロックは移動できる範囲なら位置を自由に決められるので、使い方によっては右メニューの真ん中とかでも良いかもしれませんし、記事作成の度合いによって都度移動してもいいかもしれません。

　まあでも、上までスクロールさせるのが下までスクロールさせるのに変わっただけとも言えるので、そこまで違いはないかもしれないですが…余力のある人はJavaScriptをかましてショートカットを追加するが良いと思います。

　標準にプレビューのショートカット搭載されないかなあ…

WordPress5の標準エディタ(Gutenberg)だと問題ない話だった

　公開とプレビューのメニューが上部に固定されているからそもそも問題にならないですね…

　Gutenberg使いづらくてWordpress4以前のエディタ(Classic)に戻して使っていたから気がつかなかった。

　テーマの機能とかもGutenberg向けに作っているような感じあるし、こっちに慣れていかないとだめなのかなあ…

プレビューを実行するブックマークレット作ってみた

[WordPress] Classicエディタでプレビューができるブックマークレット作ってみました

なんか思いついたらかんたんな話でした… 「プレビュー」ボタンを押したことにするブックマークレット 次のリンクをドラッグ＆ドロップして、ブ...

www.scriptlife.jp

2021-03-08 01:10

ブックマークバーから実行できるからほんと便利。

　そういうわけで戻しました。

　「プラグイン > 新規インストール」にそのものずばり「Classic Editor」があって、これをインストールし有効化するとエディタが旧バージョンのものになりました。

　よかったのかよくないのか。いやでもやっぱりあれはないよ。

Classic Editor

以前の「クラシック」エディターを有効化し、TinyMCE、メタボックスなどを含む旧スタイルの投稿編集画面を使えるようにします。この画面を拡張するすべてのプラグインに対応しています。

ja.wordpress.org

Parse error: syntax error, unexpected T_FUNCTION in /path/to/file.php on line xx

　ただ、独自ドメインをつけて同じWordPressにアクセスしていますが、独自ドメインからは問題なくて、ロリポップのデフォルトドメインでアクセスするとエラーになるような状態でした。

PHPのバージョンがドメインごとに設定されていた

　独自ドメイン (scrptlife.jp)からのアクセスは問題なかったので気付くのも遅くなってしまいましたがこのエラーを調べていたところ「PHPのバージョンが古い」場合に発生するようだと言われていました。

　ですがエラーとなっていたプラグインのコードを見ると無名関数を使用しているだけのところで、特に問題があるとは思えませんでした。

　ただ、ロリポップはPHPのバージョンが変更できるようなので、管理画面の「サーバーの管理・設定 > PHP設定」より確認してみるとscriptlife.hacca.jpは見事にPHP5.2で動いていた。(無名関数機能の追加は5.3から)

　古いドメインなので設定が昔のままだったわけですね…

　これをPHP7.1に変更して保存。反映に5-10分ほどかかるらしいとのことで、しばらくするとエラーは出なくなりました。

　今回のエラーに関してはそもそも発生するバージョンが古すぎるものになるので、新しくロリポップで始める場合には無縁だと思います。しかしドメインごとにPHPバージョンが設定されていることを知っておくと他のトラブルでも役に立つと思います。

　T_FUNCTIONのエラーもロリポップ独自の問題ではありませんが、今となっては発生することがレアケースなのでロリポップで踏んだ話のほうが汎用性あるかもしれないと思います。

CGIで動作しているらしい

　しかしまた器用なコトしてるなと思ってよく見ると(CGI版)と書いてあって久しぶりに聞いたこの言葉。

　PHPをapacheで動作させるときはだいたいモジュールとして組み込むほうが一般的だと思うのですが、ロリポップではCGIとして設定しているようです。

　モジュール化もオプションとしてあるようなので、そちらを選択しようと思いましたがスタンダードプラン以降でしか対応していないようでした。

　共有レンサバでPHPバージョンを一括でアプデしたくない気持ちは分からなくもないから、VirtualHostごとに設定できるnginxを使った方がもしかして幸せになれるのではとか思ったりもしました。

コンテンツキャッシュもできるようになっていた

　あと全然関係ないけど設定見てたらコンテンツキャッシュとかも増えていました。昔からあったっけ…

　「サーバーの管理・設定 > コンテンツキャッシュ」から開くことができます。オフになっていたのでとりあえずオンにしてみた。

スポンサーリンク

　HTTPS化するときに注意する点として残しておきたいと思います。

Google Serch ConsoleからAMPの警告が来て気付いた

　これまたこの間ようやくAMP対応をしてみたところ、Search Consoleから

AMP ページのエラーを修正してください
 
 https://www.scriptlife.jp/ のウェブマスター様
 
お客様の一部の AMP ページが弊社のガイドラインに準拠していないことが判明しました。そのため、該当するページは Google 検索の AMP 関連機能の対象とはなりません。該当するページの一部は Accelerated Mobile Pages レポートでご確認いただけます。

　とのメールが飛んできました。

　前にもよくわからんことでAMPの警告が飛んできていたのですが、とりあえず確認してみると「タグ「amp-iframe」の属性「src」の URL プロトコル「http」が無効です。」とのことでそのURLを開いてみるとAmazonのリンクが見事に消えてしまっていました。

　以下、こちらのページを例として説明していきます。

　Amazonの商品リンクとは、よく見る次のようなものです。

　これを貼り付けているところが見事に消えていました。

　AMPだと商品リンクだけがわずかに残っています。

iframeでhttp呼び出しをしていたから無効化されていたみたい

　開発コンソールを確認すると、次のエラーが記録されていました。

(index):378 Mixed Content: The page at 'https://www.scriptlife.jp/contents/programming/2015/12/01/post-1118/' was loaded over HTTPS, but requested an insecure resource 'http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=kagerouts-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=B0002DOSQW'. This request has been blocked; the content must be served over HTTPS.

　どうもiframeの中でhttpのリンクを使用していたことが引っかかっていたようです。

対応1　商品リンクを作成し直す

　この記事を書いたときが2015年12月。この頃のAmazonリンクではダメなのではと思い、改めて「画像とテキスト」のリンクを作成して設置してみましたら、すんなり上手くいきました。

　AMPでも大丈夫でした。

　商品リンクを作成するときに、これ真っ白に消えてしまっているのでなんともって感じになるのですが、エディタの「テキスト」またはソースコードを開くと、該当部分のiframeで「http://rcm-fe.amazon-adsystem.com～」とリンクが読み込まれているところがあると思います。そのリンクをコピペしてブラウザで開いてやると、商品リンクのブログパーツが表示されると思いますのでそこからジャンプできます。

　「テキスト」エディタだと「&」を「&」 (半角アンパサンド)に置き換える必要があるので、右クリックからソースコードを開いて「iframe」などで検索してみた方が楽かもしれません。

　またChromeなどブラウザにある開発用コンソールでメッセージを見ると、エラーとなっているiframeのリンクが出ている場合は、そちらからジャンプすることもできます。

対応2　カエレバを導入する

　ただこれも昔のリンクなので、いっそカエレバにしてしまったほうがいいかなと思って置き換えました。

　AMPでも安心です。

　まだいくつかあるようなので、地道に直していきます…

　ファイルをアップロードしようとすると、「HTTPエラー。」とだけ表示されてアップロードされない。昨日まではできていたのに…って話です。

　それで「Wordpress HTTPエラー」で軽く調べてみると結構皆さん引っかかっているようで…

WordPressのメディアライブラリでHTTPエラーの原因は意外な場所にあった

とか

WordPress の「HTTPエラー。」でメディアアップロードができない、を調査

とか、現象は出てくるけど原因は様々な厄介系のエラーであることがわかります。

　それで私の場合は、4.7.5にアップデートしたら治りました。再インストールとかでもいけるかもしれません。

　いや放置していたわけではなく、少し前に自動アップデートで4.7.5になっていたはずなのですが、うちのWordpressって手動でやらないとダッシュボードに更新通知が出続ける謎の環境なのです。そこから改めてやってみたところちゃんとアップロードできるようになりました。

　原因も何も追ってなくて、とりあえずやってみたら治ったくらいの雑な話ですまない気持ちありますが、事例の一つとして参考になればと思います。

で、そのサムネイルがオリジナル画像のリンクになってると思っていたのですがそうでもなかった。

「メディアへのリンク」を設定する

　例えば次の画像。

これは元画像802x627なのですが、サムネイルなので300x235になっています。

　ざっと見るときはこれでいいのですが、文字などを見たいときには大きくしてもらえればと思い、このサムネイルからオリジナルサイズへの画像へのリンクが設定できないかと思いました。

　で、こちらがオリジナル画像へのリンクを設定したもの。

　WordPressの編集画面で画像をクリックしたときに出てくる、

の「編集」(鉛筆マーク)をクリックして編集ページに移動し、

「リンク先」を「なし」から「メディアファイル」に設定します。

するとURLが出てきて、元画像にリンクされるようになります。

大きい画像をアップロードすると余計な読み込みになったりしない？

　これは私も少し心配したのですが、どうやらWordPressさんがサムネイル用に画像を作ってくれているようです。

(ページにある画像を右クリックして「新しいタブで画像を開く」とかやってもらうと、リサイズされた画像が出てきます)

　実はそのあたり気づかなくて自分でリサイズしたりしてもいましたが、そういう心配は無用ということですね。賢い！