たかなblog

のんびりと色んな情報を発信していきます。

Wordpress

WordPress4.5で、流れるような執筆体験を。

今回のアップデートでは、Wordpress付属のエディタで執筆する人をさらにサポートする機能が拡張されました。

毎回今さらな感じですが、記事を書きつつWordpressの新機能を確認するのは私の楽しみなので、今回もまったり書いていきたいと思います。

リンク機能が改善されました

WordPress4.3あたりから、ゴリゴリ改善が加えられているWordpressのビジュアルエディタ。

今回は、「リンク機能」が改善されました。

これまでのリンク機能

これまでWordpress付属のビジュアルエディタでテキストリンクを貼ろうと思うと、以下の手順を踏む必要がありました。

まずはリンクを貼りたい文字を選択し、リンクをクリック。
wordpress4.5.1

リンクの編集ウィンドウが表示されるので、必要事項を入力し、「リンクの挿入」で確定。
wordpress4.5.2

リンクが追加されます。
WordPress4.3の新機能

ぶっちゃけると私はそこまで手間でもないのですが、リンクボタンをクリックする、という「マウス操作」が発生するため、キーボードのみで流れるように記事を書きたい人にはストレスだったのかもしれません。

リンク機能はどう変わった?

まずはリンクを貼りたい文字を選択し、リンクを挿入/削除をクリック。
wordpress4.5.1

改善したといっても、この動作はそのままみたいです。
この時点でぶっちゃけこの改善って必要だったの?という気がしています。

テキストの下にURLの入力欄が表示されます。一応サイト内のURLであれば、一部を打ち込めば検索もしてくれます。
タイトル検索や部分検索には対応していないようなので、とりあえず自サイト内の最近の記事を探したい場合はhttpとでも打っておけば新着順で出てきます。
これまでのような検索機能を使いたい場合は、矢印横の歯車アイコンから以前のリンク編集ウィンドウを出しましょう。
wordpress4.5.3

書式ショートカットが追加されました

使っている人はきっと使っている、書式ショートカットが追加されました。
書式ショートカットとは、Wordpressのビジュアルエディタ内で特定の記号を入力すると、自動でh2タグやliタグ等を設定してくれる、というもの。

これまでは#を2回打って始める→見出し2
(#を3回打って始める→見出し3、#を4回打って始める→見出し4、、、)
*を打った後に半角スペースを入れる→リスト化

という、2パターンのみが登録されていました。
使用頻度が高い書式なのでこれだけでも充分便利だったのですが、今回新たに2パターンが追加。

「‘」で囲うとCODEに

コード表示したい文字を‘の半角版でくくると、<code></code>でくくったことにしてくれるようになりました。
「‘」は、Shiftを押しながら@キーです。

‘code‘

↑のように打ち込んでいくと、Enterを押した時点で「‘」が消えます。ビジュアルでは<code>が本当に設定されているのかわかりませんが、テキストに切り替えるとちゃんとくくられているのが確認できます。

wordpress4.5.4

Stinger7やAffingerでみてみるとこんな感じ。プラグイン類を使わずに以下のように表示するのなら、テーマのCSSをいじってやる必要があります。

因みに私はCrayon Syntax Highlighterというプラグインを利用しています。Syntax Highlighter Evolvedは、内容がシンプルでわかりやすく使いやすかったのですが、重すぎて実用は無理でした。

元々テキストエディタや外部エディタで<code></code>タグを多用している方は便利になったかも。

「-」3回で水平線に

これはものすごくわかりやすいのですが、「-」を3回入力してEnterで水平線になります。

↓こんなのです。


 

感覚的に覚えやすいし、hrタグごときでわざわざテキストエディタに切り替えるのも面倒なので、個人的にはこれはかなり「あり」です。しいて言うならhrタグなんかあんまり使わないよ!ってとこくらいでしょうか。

テーマカスタマイザーで、レスポンシブデザインを確認できるようになりました!

こちらはお待ちかねの機能です。今までなかったのが不思議なくらい。
スマホからのビュー数がPCを上回るようになった現在、レスポンシブデザインの対応は必須。
そんな中、スマホからのデザインをPCから確認する為にはGoogleChrome等の外部ツールに頼るしかなかったWordpressですが、ついにカスタマイザーで確認できるようになりました!

wordpress4.5.5

設置場所は、カスタマイザーの一番下、「折りたたむ」の右側です。
PC、タブレット、スマホの順に並んだアイコンをクリックすることで、それぞれのウィンドウサイズで表示してくれます。

惜しむらくは、確認できるのは本当にレスポンシブデザインのみ、ということ。
GoogleAdSenceのレスポンシブ広告や、Stinger3のような、「読みこむ際に表示を決定するタイプ」ではなく、CSSで動的にデザインを変えている部分のみが確認可能です。
クリックしたときにページのリロードまでやってくれたら最高なのですが、スマホ表示をクリックしてからページをリロードしても、PC版表示に戻っちゃいます。ここは今後に期待、といったところ。

サイトロゴがカスタマイザーから設置可能になりました

StingerやAffingerといったテーマで既に取り入れられているので使っている人も多いのではないでしょうか。お世話になっている機能です。
私はWordpress4.4の状態で既にこの機能を使用していたのですが、今後はテーマ開発者が楽にこの機能を付けられる、ということなのかな?

開発者向けの変更

開発者向けの変更は、更新内容は難しかったりしますが、後々デフォルトテーマ等に反映されていて、いつの間にかこんなところが便利になっている!と感じられる素敵な変更が多かったりします。地味に動作が早くなっていたりとか。

選択的なリフレッシュ

テーマカスタマイザー関連の更新です。テーマカスタマイザーの一部をリアルタイムで更新できるようになりました。メニュー配置等でその恩恵を実感できるようですが、今回のレスポンシブデザインの確認ができるようになったのも、この機能の恩恵かな?

高性能な画像リサイズ

画像の自動リサイズの性能が上がりました。これにより、これまでとほぼ同じ画質のまま、最大50倍のスピードで画像が読みこまれるようになりました。これはずごい。。

JavaScript ライブラリの更新

jQuery等の同梱ライブラリが増えました。外から持ってくる必要があるものが減る、というのは素晴らしいですね。

スクリプトローダーの改善

私はあまりスクリプトをゴリゴリ書くタイプではないのでいまいちよく理解できていないのですが、wp_add_inline_script() を使って登録されたスクリプトにコードを追加することができるようになったそうです。
jsファイルとかを直接いじらなくても、テーマの編集などから変更を加えられるってことですよね?便利、なのかなぁ。

埋め込みテンプレートの改善

WordPress4.4から、Wordpressで作製されたサイトのURLをビジュアルエディタで貼り付けると、その記事のタイトルや概要、アイキャッチなどを埋め込んでくれる「埋め込み」機能が加えられましたね。

http://cosmickinoko.xsrv.jp/2016/04/30/biohazard/

WordPress4.5からは、この「持ってきた記事」のデザインを、自サイトの「テーマ」で行えるようになりました。

wordpress4.5.6

出典:https://make.wordpress.org/core/2016/03/11/embeds-changes-in-wordpress-4-5/

テーマ内に

embed-{post-type}-{post_format}.php
embed-{post-type}.php
embed.php
wp-includes/theme-compat/embed.php

上記ファイルそれぞれを作成することで、具体的にデザインを指定することが可能です。

さいごに

よりレスポンシブに、そしてより、「Wordpressだけ」での作業がしやすく進化していてワクワクしますね!
既に4.5.1が公開されていますので、是非とも更新して便利になったWordpressライフを楽しんでください!

それではまた。

-Wordpress
-, , ,

おすすめ記事

1
母の日のプレゼントに!2017年最新お取り寄せグルメ一覧

こんにちは!毎年この時期になると、「母の日 プレゼント」や「母の日 贈り物 花以 ...

2
2016年 母の日にどうぞ!楽天レビュー数10000以上、評価4以上のお取り寄せグルメ一覧

今回は「日々の贅沢」「贈り物」の参考としていただくため、健康食品や1kgで100 ...