新しいWordPress5.0の編集エディタ「Gutenberg」(グーテンベルグ)の使い勝手

筆者はwordpressを使ってこれまで複数のサイトを運営してきましたが、2018年12月から新たにインストールされた「wordpress5.0」を利用することになりました。そこで、初めてこの編成エディタを利用した際の戸惑いとそれを解消した手順について、更新しながらまとめていきます。

大きな違いを感じた点

では、最初にぶちあたった「投稿」での戸惑いからまとめていきます。

投稿レイアウト

ビジュアル/テキストの切り替えタブが見当たらない

サイト運用の初心者であれば、Wordpressの「ビジュアル」モードで記事を投稿しているかもしれませんが、ページのレイアウトや文字装飾に独自のスタイルシートを設定して使っている場合など、中級以上のウェブマスターになると「テキスト」モードでHTMLソースを投稿・編集する方も多いと思います。

WordPress5.0を使って初投稿をしようとした際に、画面の上部にあるはずの「ビジュアル/テキスト」の切替えタブがないことに戸惑いました。

えっ!強制的にビジュアルモードなの?!

というのが最初の困惑です。

【これで解決!】「ツールと設定をさらに表示」

しかし、htmlソースコードを見る方法はありました。画面の右上にある設定アイコンの右があるボタンにマウスをあてると「ツールと設定をさらに表示」が表示されます。「エディタ」>「コードエディタ」をチェックすると、以前のテキストモードに相当する「コードエディタ」でhtmlソースを見たり編集することができます。

ページのURLはどこだ?

筆者はこれまで、投稿タイトルの日本語がサイトのURLに反映されたままのURLを嫌うため、wordpressで投稿したあとに、投稿したページのURLに入っている日本語をローマ字・英数字に修正していました。

サイト運用面で設定したルールに沿って、投稿ページのURLが管理画面の上部に表示されていたと思います。そのURLが・・・見当たらない!

【これで解決!】「投稿タイトル」をクリックしてみる

URLの確認は可能です。”投稿タイトル”をクリックしてみてください。投稿タイトルを編集しようとすると、右側サイドバーに「パーマリンク」という項目が表示されます。ここで現在編集しようとしているページのURLが確認でき、URLをクリックすればページが表示されます。

右側にサイドバーがありますが、ここは編集しているブロックに応じて表示される項目が変化しています。

また、「URLの変更」も可能です。「投稿タイトルをクリックした状態」であれば、右サイドバーのURLを編集できます。投稿タイトルの上部にも「パーマリンク編集」が表示されます。こちらからでも「編集」ボタンをクリックしてURLの変更が可能です。

※画面サイズによっては「投稿を更新しました。投稿を表示」というメッセージが上にあるために、「パーマリンク編集」が見えない場合があります。その際は「×」ボタンでメッセージを閉じてから投稿タイトルをクリックすれば、タイトルのすぐ上にパーマリンク編集ボタンが見えます。

ブロック・パーツの移動はどうやるの?

見出しのタイトルやコンテンツとしてのテキストを書いていると、「やっぱりこの文章はもっと上の方にしておきたい」など、段落やブロックごと移動させたいことがあります。これまでのテキストモードなら、該当するhtmlソースごとカット&ペーストしてたので簡単でした。しかし、新しいエディタでは、行間にカーソルをあてることができない為、文章を入れたい段落と段落の間に、テキストをペーストすることができませんでした。

うーん、なんかめんどくさいな・・・・

【これで解決!】行間の中央に浮かび上がる「+」ボタンを押す

段落と段落の行間にマウスをあてて少し待つと、”行間の中央に「+」のボタン”が浮かび上がってきます。これを見落としていました。「+」をクリックして、「ブロックの追加」をすることが可能です。テキストであれば、「段落」を選択してからペーストすれば、記述したテキストの移動が可能です。

h2、h3、h4などタイトルを移動したいのであれば、同じく「+」をクリックして「T」(見出し)を選択してからペーストすれば、見出しの場所を移動できます。

気づいたらかなり単純なことですが、最初は戸惑ってしまいました。

ワードプレスイメージ画像
最新情報をチェックしよう!