Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

Month: December 2021

Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

Month: December 2021

  • Full Site editor ( Editor ) の使い方

    WordPress5.9で、新しいタイプのテーマ、フルサイト編集テーマ を使用すると管理画面にエディタという項目が追加されます。従来のテーマを使用している場合は、表示されません。 フルサイト編集テーマとは、なんでしょうか? WordPress5.9に同梱される TwentyTwelve テーマが、WordPress初のフルサイト編集テーマになります。 file twentytwentyone twentytwentytwo functions.php 643行 151行 style.css 5927行 123行 テンプレートファイルは、PHPから、htmlファイルに変更になり、CSSやPHPコードの量が劇的に減少していることがわかります。 カスタマイザーの設定項目も、減少しています。 本サイトで配布中のエマルジョンテーマの場合も、カスタマイザーでの設定項目は大幅に変更されます。 emulsionテーマは、テーマの動作を切り替える設定があります Customize / Theme Scheme / Theme Operation Mode Settingで、テーマの動作を切り替えることができます  Full Site Editing Theme を設定した例です。 classic theme full site editing theme emulsion テーマは、従来型のテーマと、フルサイト編集テーマを一つのテーマ内で切り替えて使用できるユニバーサルテーマのため、デフォルトテーマと比べると複雑ですが、それでもフルサイト編集テーマに切り替えた場合、カスタマイザーはかなりシンプルなものになります。 この変化が私たちにもたらすもの PHPテンプレートから、HTMLテンプレートへの変更 WordPressのテンプレートは、PHPファイルを使っていましたが、PHPは、データベースからの設定情報の表示や、フィルターなどのテンプレートとして必須の機能だけでなく、PHPのすべての機能を利用できるため、望ましくない使い方が行われたり、サニタイズされていないデータを表示してしまうといった事も少なからずあったと思われますが、PHPから、HTMLに変更になる事で、過剰なカスタマイズ性を抑制する方向に進んだとみることができると思います。 また、現在のところ従来型のテーマが使えなくなるわけではないので、どちらを選択するか、または、共存させることで、本当に必要な部分だけPHPテンプレートを使うとか選択肢がないわけでもなさそうです。 WordPressを使っているけれど、PHPはよくわからないといった人たちには、テーマを簡単に自作したり、編集画面でクエリーを操作して、カテゴリーAの個別投稿に、カテゴリーA一覧を追加して表示するといったような作業がエディタ内で出来ることはすごく便利なことだと思います。 カスタマイザーから、エディタに移行するとどんなメリットがあるの? まずは、従来のカスタマイザーによる設定の変更についてざっくりとみていきましょう。 カスタマイザーは、テーマのレイアウトや、背景色の変更等々テーマによっては、100項目以上の変更ができるものも珍しくありません。しかし、どのような項目を選択していくと、目的の設定にたどり着けるのかは、とにかくそのテーマ次第で非常に難解な傾向がありました。 私自身、WordPressのサポートフォーラムで、数年前まで、5000回程度ユーザーとのやり取りを行ってきましたが、配布テーマの問い合わせの中には、「○○の色を変更したいが、どうすればいいですか?」「カスタマイザー/外観/○○の項目で変更できるのでやってみてね」といった説明を繰り返してきており、ユーザーがわかりやすいと思う、カスタマイザーのメニュー設定がとても難しいものだと実感しています。 その点、エディタは、コアに組み込まれているため、ユーザーは一度その方法を学習すれば、どのテーマでも、同じように変更が可能になるという点で優れているように思えます。 もちろん、テーマ開発者が「ここにこだわりたい」といった部分が、必ずしも「エディタ」機能で操作できないといった事もあると思いますが、カスタマイザー自体がなくなるわけではないので、悲観的になる必要もないと思います。 エディタの使い方と、出来ることの例 管理パネルのエディタをクリックすると以下のような画面が表示されます。 ここからは、テーマによって動作が異なるため、emulsion テーマを例に紹介していきます。 上部メニューバーに home と表示されていますが、これが現在編集しようとしているテンプレートです。編集するテンプレートを変更する場合は、上部の一番左のアイコンをクリックして、template をクリックすると、編集可能なテンプレートを選択できます。 home というテンプレートは、投稿一覧に適用されるテンプレートですまずは、投稿一覧のレイアウトを変更してみます。 クエリーループを選択すると、上の写真のようにメニューが表示されます この状態で、右サイドバーのcolorを選択して、背景を黒、テキスト色を白、リンク色をグレーに設定してみます。 次に、メニューのこの部分を変更します。田アイコンをクリック 保存して、ブログを表示してみましょう テーマはグリッドレイアウトに変更になりました。 この変更を元に戻す方法 エディタ画面の、左上のアイコンをクリックして、Template Part を開きます。 青い丸印が表示されているのが、変更のあったテンプレートです。右側に、縦3点ボタンがありますから、クリックすると画面に表示されているClear Customization ボタンが表示されるので、さらにクリックすると、元に戻ります。 […]

  • Create a post in the block editor

    The block editor has various functions that were not possible with the classic editors so far. The block editor is characterized by the fact that even beginners can create posts and pages with no coding (minimum coding), but that is not always convenient for those who already understand HTML and CSS. There seems to be. For example, consider a heading block. If you enter “/Heading” in the paragraph block and select the […]

  • ブロックエディタで投稿を作成する

    emulsion テーマを使うと、ブロックエディタのSlash Inserter や Block Search がちょっと快適になったりします。 主要な要素(h2-6,ol,ul,table,section,aside,div,hr,table)は、要素名で検索できるので、マウスでクリックする手間がなくなります。 ブロックエディタには、これまでのクラッシクエディタでは不可能だった、さまざまな機能がありますが、ブロックエディタでの編集作業を俯瞰するような記事は、見かけません。 ブロックエディタは、初心者でもノーコーディング(最小コーディング)で投稿やページを作成可能だというのが特徴とされていますが、初心者以外のHTMLやCSSをすでに理解している人にとっては必ずしも便利とは言えないこともありそうです。 例えば、見出しブロックを例に考えてみましょう。 段落ブロックで「/見出し」を入力して、見出しブロックを選択すると、h2見出しがデフォルトで表示されます。 ユーザーが記事を作成する時の見出しレベルをh3にしたいと思っていれば、見出しレベルをメニューで変更しなければなりません。(現在のところ…) 見出し要素は、記事を書くときに頻繁に使用するブロックなので、「毎回、毎回」同じ作業を強いられるのは、不便さを徐々に増幅していくことになるかもしれません。少なくとも私自身は、そうでした。 結局、ユーザーの学習レベルによって、毎回マウス操作を伴うような作業はいやだとか、いろいろ変更できて素敵だとか、評価が分かれることになりそうです。 今後、theme.json や editor によるデフォルト設定を詳細に行えるようになる時まで、自分用の工夫でしのいでいくこと必要と思います。 「楽にやりてー派」に向けて、簡単な入力方法やemulsion テーマでの工夫などを紹介します。 ご意見ご感想いただけると嬉しいです。 新規投稿を作成して、タイトルを入力後エンターキーを押すと、以下のような表示が現れます 文字を入力し始めると、段落表示で文章を作成できます。段落内改行は、shift + enter enter だけだと次の段落を作成 画像の入力 入力する画像をコピーして貼り付けると、自動的に画像をアップロードし、貼り付けることができます。 見出しの入力 私の場合 最初は段落を使ってタイトルを入力します。入力し終わったら、行頭に### (### + space)を追加すると、h3に変換できます。 h1 # # + space h2 ## ## + space h3 ### ### + space h4 #### #### + space h5 ##### ##### + space h6 ###### ###### + space 見出しタグの markdown 記法 段落のアイコンをクリックして、段落から見出しに変換することも可能ですが、デフォルトでh2に変換されるので、見出しレベルを選択し直さなくてはいけないので、指摘には、ちょっと面倒だと思っています。 emulsion テーマ限定ですが、ブロックの検索機能を使って以下のように入力することも出来ます。 h1 […]

  • State of the word 2021

    https://wordpress.org/five-for-the-future/ https://wordpress.org/openverse/ https://wordpress.org/photos/ 1 00:00:01,920 –> 00:00:05,910 I’m moving around, so I’m masking. I aour mobile microphone, but we have 2 00:00:05,910 –> 00:00:09,360 standard microphone also. We havpeople all over the place in the worl 3 00:00:09,360 –> 00:00:13,950 at home and we also have a residenquestion asker right here 4 00:00:14,190 –> 00:00:16,641 So he’s going to represent thonline questions right 5 00:00:16,641 –> 00:00:17,970 – Yes, correctAlso, so you […]

  • block をブックマークレットから挿入

    ブロックをブックマークレットから挿入すると便利だよ ブロックエディタで、例えば「見出しブロック」を挿入するときには、メニューバーから、h3を挿入とか、テキスト位置を指定したり、毎回同じ作業を繰り返すのは面倒だと思っていませんか? 私は、見出しの挿入の度に、見出しレベルを設定したり、テキスト位置を指定するのは、慣れてくるほど面倒に感じます。 行頭に「### 」を入力する方法もありますが、日本語で入力している場合、半角英数に切り替えるのもおっくうです。 何とかならないかと思い、ブックマークレットでブロックの挿入をしてみることにしました。 コードは、こんな感じのものです。 minify して、ブックマークレットのリンク先にしました。 h1 h2 h3 h4 h5 h6 上のリンクを、ブラウザのツールバーにドラッグすると、挿入できるようになります。 投稿の編集ページを開いた状態で、試してみてください

Copyright © 2022 Site proudly powered by WordPress