Gutenberg移行後の最初の編集

今までクラシックエディターのみでWordPressの記事をアップしてきた。それが2022年には使えなくなるという情報である。それなら早くからのGutenbergへの移行が得策ではないかと考えた。

Headerの例(h2)

今までクラシックエディターのみでWordPressの記事をアップしてきた。
それが2022年には使えなくなるという情報である。
それなら早くからの移行が得策ではないかと考えた。
【Gutenberg疑問事項】

  1. ダッシュボードの機能操作性は変わらないのか?大丈夫!
  2. 編集画面上の:(アイコン)からメニューを開き「オプション」を選択

・文書パネル
・パーマリンク
・カテゴリー
・タグ
・アイキャッチ画像
・枠
・ディスカッション

  1. すべてにチェックを入れてよいか?(自動的にすべてON)!
  2. フォーマット(標準・アサイド・画像・・・)の処理は?ブロックで!
  3. カテゴリー→親子関係はあるか?ある!
  4. タグ(操作方法は同じか?)同じ!
  5. アイキャッチ画像(どこに、大きさは?)今までと一緒!
  6. ブログランキングのバナーの取り付け方法は同じか?ブロックにコピー!
  7. 抜粋は?ある!
  8. 投稿の表示方法(プレヴューか?)そう!
  9. ダッシュボードのメニューのplaceの仕方は同じか?同じ!
  10. WP SyntaxHighlightに代わる「CodeMirror Blocks」はどうか?OK!
  11. カスケードメニューがどうなるか?今までと同じ!
  12. 月別アーカイブの常時表示はできるか?すべて表示!

疑問点はまだまだある!。見切り発車をすべきか?すべき!

文字のサイズからヘッダーと段落の違いからです。バナーの貼り付け方も分かっていません。

Gutenbergにまだ正直迷っています。

散歩道に咲いた小さな花

#USBログオフ時メッセージプロンプト処理
#メッセージ文
$messagePath="C:\temp\usbmessage.txt"
#ログ出力パス
$usbLOG="C:\temp\test\usblog.txt"
 
#--------------------------------------
#メッセージボックス
#--------------------------------------
function MessageBox([string]$p_value = "")
{
    [Void][Windows.Forms.MessageBox]::Show($p_value,"お知らせ","OK", "Warning")
}
 
 
$crUSB = Get-WmiObject -Class win32_usbhub | ? { $_.name -eq "USB 大容量記憶装置" } | ? { $_.status -eq  "OK" }
 
 
if ($crUSB) {
    write-output "$env:computername,$env:username,$(get-date)" >> $usbLOG
 
    #Windowsフォームのロード
    [Void][Reflection.Assembly]::LoadWithPartialName("System.Windows.Forms");
 
    MessageBox $([String]::Join("`r`n", (Get-Content $messagePath)))
    
}
#USBログオフ時メッセージプロンプト処理「PowerShell(.ps1)」 CodeMirror Blocks 使用(Gutenberg移行に伴ってWP SyntaxHighlighterは使用中止)
↑人気ブログランキングに参加しています。ポチっと1票を!

Gutenberg移行前の最後の編集

今までクラシックエディターのみでWordPressの記事をアップしてきた。それが2022年には使えなくなるという情報である。

Gutenberg移行前の最後の編集

今までクラシックエディターのみでWordPressの記事をアップしてきた。
それが2022年には使えなくなるという情報である。
それなら早くからの移行が得策ではないかと考えた。
【Gutenberg疑問事項】

  1. ダッシュボードの機能操作性は変わらないのか?
  2. 編集画面上の:(アイコン)からメニューを開き「オプション」を選択
  3. ・文書パネル
    ・パーマリンク
    ・カテゴリー
    ・タグ
    ・アイキャッチ画像
    ・枠
    ・ディスカッション

  4. すべてにチェックを入れてよいか?
  5. フォーマット(標準・アサイド・画像・・・)の処理は?
  6. カテゴリー→親子関係はあるか?
  7. タグ(操作方法は同じか?)
  8. アイキャッチ画像(どこに、大きさは?)
  9. ブログランキングのバナーの取り付け方法は同じか?
  10. 抜粋は?
  11. 投稿の表示方法(プレヴューか?)
  12. ダッシュボードのメニューのplaceの仕方は同じか?
  13. WP SyntaxHighlightに代わる「CodeMirror Blocks」はどうか?
  14. カスケードメニューがどうなるか?
  15. 月別アーカイブの常時表示はできるか?

疑問点はまだまだある!。見切り発車をすべきか?

↑人気ブログランキングに参加しています。ポチっと1票を!

wp-syntaxhighlighterの記事は野性の証明でないと見られません

wp-syntaxhighlighterの記事は野性の証明でないと見られません

野性の証明 を参照。

wp-syntaxhighlighter を参照。

アイキャッチ画像は最近のカスケードメニューです。

↑人気ブログランキングに参加しています。ポチっと1票を!

WP SyntaxHighlighterを見つけた!

写真はビビハニム・モスクです。
191116

WPSyntaxHighlighter

wp-syntaxhighlighter を参照

使ってみる
設定が終わったところで、実際に使ってみましょう。投稿画面のビジュアルエディタタブを選択します。

preボタンは、ドラッグした箇所をハイライト対象にしてくれるもの。
codeボタンは、ソースコードを貼り付けて挿入するもの。
わたしは、ほとんどcodeボタンしか使ってませんが、状況に応じて使いわけるといいでしょう。
preボタンの使い方
preボタンの場合は、まずビジュアルエディタにプログラムコードを書き込みます。例として以下のようなhtmlコードを書きました。

こういった直接ビジュアルエディタに書き込んだコードに対してSyntaxHighlighterをあてるには、preボタンを利用します。使い方は、コード全体をドラッグしてpreボタンを押すだけです。

preボタンでhtml言語を選択→「挿入」。

SyntaxHighlighterが適応されます。

テキストで見るとこんな感じ。htmlのハイライトが適応されているのが分かります。

codeボタンの使い方
続いてcodeボタンの使い方。こちらは、コードをそのまま貼り付けたい時に利用します。インデントなどもそのまま維持されます。わたしはローカル環境で動作確認したコードを貼ることがほとんどなので、こちらのcodeボタンを利用するほうが圧倒的に多いです。
codeボタンをクリックします。

言語を選択して、コードを貼り付けます。先ほどと同じhtmlコードを貼り付けてみましょう。

挿入ボタンを押すと、貼り付けたコードがそのまま反映されます。preボタンの時と同じ結果になるのが分かります。

表示
実際の表示をプレビューで見てみましょう。例として作成したコードは以下のように表示されるます。ただし、設定で選択したテーマによって見栄えは異なります。

スポンサード リンク
WP SyntaxHighlighterのいいところ
ソースを切れに表示させるSyntaxHighlighterをWordPressでも簡単に使わせてくれる点はもちろんですが、もう1点。
ショートコードを使わなくていい点がわたしは好きです。他の有名な「SyntaxHighlighter Evolved」はショートコードありきの設計になっています。
わたしはショートコードがあまり好きではなく、それはそのプラグインの開発が終わってしまった途端に(もしくはそのプラグインを利用しなくなった時点で)ゴミのコードになってしまうからですね。
今後のことを考えるとなるべくなら使わない方がいいということで、WP SyntaxHighlighterに軍配をあげています。
おわり
(写真はY.O.氏から借用)

↑人気ブログランキングに参加しています。ポチっと1票を!