Emulsion Theme

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

Category: docs

Emulsion Theme

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

Category: docs

  • Child theme (of block theme)

    There is a child theme for customizing WordPress. You can also create a child theme with a block theme. (Emulsion theme supports child theme in version 2.2.0)した) This page explains the main points about the child theme of emulsion theme. Minimal child theme index.php (emulsion テーマのindex.phpのコピー) style.css note: The emulsion theme loads the child theme’s style.css once the child theme is created, so you don’t need the code to load the child […]

  • チャイルドテーマ(ブロックテーマの)

    ワードプレスのテーマカスタマイズのために、チャイルドテーマがあります。 ブロックテーマでも、チャイルドテーマを作成することができます。(emulsion テーマは、version 2.2.0 でチャイルドテーマのサポートを行いました) このページでは、emulsion テーマのチャイルドテーマについて、要点を説明します。 最小構成のチャイルドテーマ index.php (emulsion テーマのindex.phpのコピー) style.css note: emulsionテーマは、チャイルドテーマが作成されると、チャイルドテーマのstyle.cssをロードするので、functions.php でチャイルドテーマ用style.css ロードするコードは必要ありません。 このテーマでは、もし、(theme-slug).jsがチャイルドテーマに含まれている場合は、それも自動的にロードします。 一般的なチャイルドテーマの構成 親テーマの、block-templates, block-template-parts をコピーして、チャイルドテーマに含めます。必要に応じて、functions.phpを追加することも出来ます。 さて、このチャイルドテーマの構成にcategory.phpやcategory-624.phpといったテンプレートが含まれていますが、これは、クラッシックテーマのテンプレートのようにも見えます。 以下、これらのファイルの目的と使用方法について説明をしたいと思います。 HTMLテンプレートとPHPテンプレートの共存 emulsion テーマの、category.phpは、以下のように記述されています。 If a PHP template with the same priority exists in the child theme, the PHP template will be applied instead of the HTML template.If a PHP template exists, you will not be able to edit it in the site editor. get_template_part関数でincludeするテンプレートは、以下のものです。 template-fse.php emulsion_block_template_part()を使用して、PHPからhtmlテンプレートを取得して表示します。 updated:2022/2/14 (ver 2.2.4) […]

  • WordPress 5.9 with emulsion Theme

    In WordPress 5.9, the customizer has not taken the lead, and a new editor (site editor) has taken the lead. The new editor allows everyone to consistently change settings to their liking, such as changing to a grid layout, changing colors, showing or hiding the posting date, showing or sizing the poster icon, etc. became. The template system has been completely redesigned and changed from the traditional PHP template to the HTML […]

  • WordPress 5.9 と emulsion Theme

    WordPress 5.9では、カスタマイザーはわき役に回り、新しいエディタ(サイトエディタ)が主役に躍り出ました。 新しいエディタは、グリッドレイアウトに変更したり、色の変更や、投稿日の表示非表示、投稿者アイコンの表示やサイズ等、誰もが一貫した方法で、自分好みの設定に変更ができるようになりました。 テンプレートシステムは、完全に一新され従来のPHPテンプレートから、HTMLテンプレートシステムに変更され、この事で、エディタ上でテンプレートを作成、保存することも可能になりました。 従来のテーマを使用する場合は、従来通り使用できます。WordPress Themes: Full Site Editing Free を使用した場合に限り、新しい機能で操作可能になります。 一般的に、従来テーマと、フルサイトエディティングテーマには、互換性はありません。 エマルジョンテーマは、あなたが大切にしているコンテンツを、最新のWordPressの機能で表示することも、過去10年以上安定した動作を誇るクラッシクな機能でも表示できる、ユニバーサルテーマです。 emulsion 2.2.0 で、チャイルドテーマサポートを追加しました。現在チャイルドテーマの機能改善に取り組んでいます。 チャイルドテーマでの、機能強化目標の一つが、「HTMLテンプレートとPHPテンプレートの共存」です。 知っておいてください このテーマは、テーマカスタマイザーのテーマスキームで、テーマの動作状態を変更できます。 3つの項目で、テーマの動作状態を切り替えることができます Full Site Editing Theme  選択すると、エディタ(サイトエディタ)が利用可能な最新の機能を使用することができます。 FSE Transitional Theme 投稿のメインコンテンツをHTMLテンプレートシステムで表示します。サイドバーが必要な場合に便利です。 Classic Theme ブロックエディタや、クラッシックエディタで作成した投稿をPHPテンプレートシステムで表示します。 Classic Theme以外では、テーマのフィルタ、テンプレートタグは動作しなくなりますので注意してください。 上記の設定を行った場合は、カスタマイザの他の設定項目も変更になるので、設定を行ったら、すぐに保存して、一度ブログを表示してから、カスタマイザを開き直してください。 投稿の編集 ブロックエディタで、スラッシュインサータ、ブロックサーチを使用する場合は、以下の小ネタを覚えておくと便利です。 例えば、h3要素をスラッシュインサータで入力する場合は で、h3要素を入力できます。 キーボードから手を放して、マウスで見出しレベルを選択しなくてよいので便利です。 テンプレート階層 テンプレート階層は、テンプレート適用条件をファイル名で関連付けるルールです。エディタのテンプレート名はテンプレート階層を使用した名前を付けることができます。 Editor( full site editor )がサポートするのは テンプレート階層 のプライマリーテンプレートとセカンダリーテンプレートのみになります。バリアブルテンプレートは、Editorでは、サポートされないので注意してください。 「Editorでは、サポートされない」少し掘り下げると Editorでは、サポートしないのですが、、、 テーマに例えば、single-post.htmlという投稿タイプと関連付けたテンプレート階層のテンプレート名を使った場合は、single.htmlやsingular.htmlに代わってこのテンプレートは有効になります。 個別投稿や固定ページのテンプレートの、新規作成テンプレートは、カスタムテンプレートです。このテンプレートは、テンプレート階層とは無関係です。 Custom CSS Custom CSSは、カスタマイザの、テーマの動作状態がClassic Theme 以外の場合には、表示されないように、テーマ側で設定してあります。 Full Site Editing Themeや、FSE Transitional Theme設定で、どうしても必要な場合は、 Customize / Theme Scheme Site Editor with […]

  • 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 ボタンが表示されるので、さらにクリックすると、元に戻ります。 […]

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

    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 […]

  • WordPress 5.8とemulsion theme FSEサポートについて

    WordPress 5.8で、フルサイトエディタのサポートが予定されています。 emulsion テーマは、WordPress 5.8でフルサイトエディタサポートテーマとして機能するための準備を行っています。 beta tester プラグイン等を使うと現在でも5.8のテストをすることができます。 フルサイトエディタ この機能は、現在実験的な機能です。 emulsion テーマでは、通常のテーマ機能、移行準備の transitional mode、FSE(Full Site Editing mode)で、テーマを使用するための切り替えスイッチをカスタマイザーに実装します。この機能を実際に使用するためには、 WordPress 5.8 Gutenberg Plugin (必須) emulsion-addons Plugin (推奨) 上記の条件を満たす必要があります。 emulsion themeには、フルサイトエディタテーマ機能を組み込み済みです。 フルサイトエディタ対応テーマのフルサイト機能とは、 一般的なフルサイト編集テーマとの違い フルサイト編集テーマ emulsion theme Customizer hide Show(5.9) theme mode : ShowFSE mode: Hide ShowTransitional mode: Show Site Editor Show theme mode : hideFSE mode: ShorwTransitional mode: Show Widget Show theme mode : ShowFSE mode: ShowTransitional mode: Show NEW Template Please check each theme […]

  • About WordPress 5.8 and emulsion theme FSE support

    Full site editor support is planned for WordPress. WordPress 5.8 has made some iconic changes to pave the way. The emulsion theme is preparing to function as a full site editor support theme in WordPress 5.8. You can still test 5.8 wid the beta tester plugin Full site editing currently an experimental feature. The emulsion theme implements a changeover switch for using the theme in the customizer with normal theme functions, transitional […]

  • Improved so that the theme class is reflected in the block editor

    Note The emulsion addons plugin must be enabled. Thematic-specific positioning classes are now accurately reflected within the block editor With blocks, even blocks that do not have an alignment menu can be handled by adding advanced setting / additional CSS classes, improving layout flexibility Details of the class will be displayed when the emulsion-addons plugin is enabled.Please check the appearance / emulsion documents. alignleft alignright alignwide alignfull Example of applying the alignleft […]

  • ブロックエディタで、テーマクラスが反映するように改良しました。

    テーマ特有の、位置指定クラスがブロックエディター内で正確に反映するようになりました。 Note emulsion addons プラグインを有効にする必要があります。 ブロックにより、位置揃えメニューが存在しないブロックに対しても、高度な設定/追加CSSクラスを追加することで対応ができ、レイアウトの柔軟性を向上させました。 クラスの詳細につきましては、emulsion-addonsプラグインを有効にした時に表示される、外観/emulsion documentsをご確認ください。 alignleft alignright alignwide alignfull 段落に、alignleft alignrightクラスを適用した例 リストブロックに、alignleft alignrightクラスを適用した例 見出しブロックに、alignleft alignrightクラスを追加した例 引用ブロックに、alignleft alignrightクラスを適用した例 コードブロックに、alignleft alignrightクラスを適用した例 プレフォーマットブロックに、alignleft alignrightクラスを適用した例 詩ブロックに、alignleft alignrightクラスを適用した例 スペーサーブロックに、alignleft alignrightクラスを適用した例 テーマ特有のサイズ指定クラスがブロックエディター内で反映するようになりました size1of1 size1of2, size1of3, size2of3, size1of4, size3of4, size1of5, size2of5, size3of5, size4of5 aliginleft alignrightとの組み合わせでは、1of2 以下のサイズが有効になります。 センタリングしたい場合は、aligncenter クラスと組み合わせてください。 テーマ特有の、アイコン画像がブロックエディター内で反映するようになりました。

Copyright © 2022 Site proudly powered by WordPress