Emulsion Theme

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

Category: news

Emulsion Theme

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

Category: news

  • 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 Theme editor Type

    Editor Type is a setting item in Customization. The emulsion theme allows you to choose an editor based on this setting. The image on the left is a screenshot of the settings screen. Experimental mode Experimental mode will be abolished in ver2.1.6 If you select this item, the following menu will be displayed in the admin bar. You can use this menu to view your current site with a new theme, such […]

  • Emulsion Theme Scheme

    Editor Typeは、カスタマイズにある設定項目です。 emulsion テーマは、この設定に基づいて、エディタを選ぶことができます。 左画像のEditorには、以下の項目があります。 Experimental mode Experimental modeは、ver2.1.6で廃止します。 この項目を選ぶと、アドミンバーに 以下のメニューが表示されます あなたは、このメニューを使用して、WordPress5.8で始まったFull Site テーマで表示したり、FSE-OFFにして従来のクラッシックエディタで表示するなど、現在のサイトが、新しいテーマでどのように表示されるか試したり、CSSの変更を行ってみた目をそろえていくといった作業ができます。 full site EdiTing Theme WordPress 5.8で始まったフルサイトエディタ、フルサイトテーマを使ってテーマを表示します。 WordPress 5.9.3でウィジェットを開くと上記のメッセージが表示されるようになりました。サイドバーが必要な場合は、FSE Transitional Theme をお勧めします。 FSE Transitional Theme フルサイトエディタが有効になりますが、フルサイトエディタは、テーマのメインコンテンツに埋め込まれます。 従来のテーマのように、サイドバーウィジェットや、フッターウィジェットを使う事ができます。 Classic Theme 従来の安定した、クラッシックテーマで表示します。 Header Template , Footer Template Theme Default 設定でも、ヘッダーテンプレート、フッターテンプレートを、新しいテンプレートを使用することができます。

  • emulsion テーマでFSEを有効にする方法

    emulsionテーマは、単にフルサイトエディタ対応というだけでなく、従来テーマとしての機能も含んでおり、カスタマイザーで、タイプを選択する必要があります。 カスタマイズから、Full Site Editor セクションを開いていただくと、下記のメニューが表示されます。Theme Defaultは、従来通りのPHPテンプレートで表示されます。 FSE Transitionalは、従来テンプレートを使用し、メインコンテンツ部分だけを、FSEで表示します。(サイドバーにウィジェットがあれば、ウィジェットを表示できます) Full Site Editorは、テンプレート全体をFSEに置き換えます。 Experimenntal Modeは、アドミンバーで、これら3つのモードを切り替えながら、それぞれの表示を行うことができます。 既知の問題 ブロックエディタモードから、通常のテーマモードに変更ができない場合には、一度gutenberg プラグインをデアクティベートして、通常テーマモードで表示してから、再度プラグインをアクティベートしてください

  • 従来型テンプレートと、新しいテンプレートのおさらい

    テンプレートとは、 エディタで作成した、投稿タイトルや本文、メタデータ(投稿日やカテゴリー)などを、どんなHTMLで表示するかを記述したファイルです。 従来は、PHP形式でしたが、新しく追加されるテンプレートは、HTMLで、カスタム投稿タイプに保存されるので、エディタですべて完結する利点があります。 テーマへの依存性が大幅にするなくなるため、これまでのようにチャイルドテーマを作成してカスタマイズするといった作業は多分過去のものになっていくだろうと思います。 一方、PHP形式のテンプレートと、ショートコードを組み合わせたり、条件分岐タグを複雑に使用したテンプレートで、出来ていたことが、出来なくなるということもありそうですが、もともとのテンプレート階層を、全面的に置き換えるものではなさそうなので、必要な場所では、従来のPHPテンプレートを使用することを検討する余地もありそうです。 いずれにしろ、現在のテンプレート階層と、新しいテンプレートシステムの違いや動作の仕組みを十分理解することは、重要になりつつあります。 テンプレート階層 投稿や、固定ページで使用されるテンプレートは、命名規則があり、特定の投稿IDやURLスラッグなどと組み合わせて、特定の投稿で特別なテンプレートを使用して表示することができるようになっています。 カスタムテンプレート https://wpdocs.osdn.jp/ページテンプレート テーマに、以下のようにコメント行を追加したテンプレートを作成しておくと、テーマの投稿編集画面で、テンプレートを選択できるようになります。Template Post Typeを指定しておくことで、投稿、固定ページいずれでも選択できるようになります。 従来から使用された PHP カスタムテンプレートは、WordPressの外部で、phpファイルを作成して、アップロードする必要があり、作るのが面倒でしたが、 WordPress5.8からは、エディタのメニューから、作成できるようになります。 テンプレートの項目に ‘New’ というリンクが見えますが、このリンクをクリックすると、新しいテンプレートが作成できます。 作成したテンプレートは、外観/テンプレートに保存されます。このテンプレートには、wp-custom-template というプレフィックスのついたテンプレートとして保存されることを覚えておいてください。 テンプレートパートファイル ヘッダーやフッターなど、テンプレートの一部分を構成する部分で使用されるテンプレートです。 以下の関数を使用することで slug-name.phpファイルを表示します。 slug-name.phpが、存在しない場合は、slug.phpを表示します。 これ以外にも、ヘッダーやフッターを呼び出す場合に引数を追加することで header-html5.phpが存在すれば、そのファイルを表示し、存在しない場合は、header.phpを表示する仕組みがあります。 これらのテンプレートでは、条件分岐タグ – WordPress Codex 日本語版 を使用することで、さらに詳細な表示条件を指定することができるようになっています。 従来から使用された PHP テンプレートは、WordPressの外部で、phpファイルを作成して、アップロードする必要があり、作るのが面倒でしたが、 これらのテンプレートも、外観/テンプレート、外観/テンプレートパート内で、新規に作成することができるようになりました。 作成したテンプレートは、Template Partブロックや、headerブロック、footerブロックなどを使って、呼び出すことができます。 WordPress 5.9 HTMLテンプレート WordPress 5.9で計画されている新しいテンプレートの仕組みは、これらのもともとあるテンプレートの仕組みに、新たにカスタム投稿タイプにテンプレートを保存する仕組みが追加されます。 テンプレートフィルターで、以下のテンプレートがカスタム投稿タイプに保存されるようになります。(WordPress5.8現在) これらのテンプレートがカスタム投稿タイプに保存されることで、これまで、テーマに付属するテンプレートをカスタマイズする場合には、チャイルドテーマを作成する必要がありましたが、チャイルドテーマを作成しないくても、テンプレートのカスタマイズができるようになり、このことが「ノーコーディングでカスタマイズができる」といった言い方の意味です。 サイトエディタでヘッダー部分やフッタ部分を変更した場合は、それらもテンプレートパートファイルとして保存されます。 WordPressを初めて使い始めた方などは、「なんかめんどくせえ」話になりそうで、気が引けますが、大事な部分は、 WordPressのテンプレート階層の主要なテンプレートは、がHTMLテンプレートに置き換えられますが、全部のテンプレート階層が置き換えられるわけではないという事です。 チャイルドテーマを作らなくて済むなら、既存のサイトでFSEを有効にしたいと思うかもしれません。 実験してみましょう。 ブロックエディタ対応テーマの、TT1 blocks 0.4.7を使用して、Gutenberg を有効にします。コアは、WordPress5.7.2です。 テーマに、archive.phpを追加してみましょう。ファイルの中身は、hello archiveとだけ書いておきましょう。 適当なカテゴリーを開くと、 私の環境ではhello archive が表示されました。 実験2を行ってみます。 テーマをemulsion に切り替えて、archive.phpを追加して、PHPテンプレートが使用されるかどうかを調べてみたいと思います。 テーマのモードは、FSEにするのを忘れないでください。 結果、PHP テンプレートで表示されることはなく、表示に変化はありません。 なにがこの違いを生んでいるのでしょうか? PHPテンプレートで表示するためには、emulsion テーマの block-templates内のテンプレートの名前を変更する必要があります。category.html , archive.htmlを他の名前にリネームしてみると、phpテンプレートが適用されます。 このことから、Full Site […]

  • Review of traditional templates and new templates

    What is a template? It is a file that describes what kind of HTML is used to display the post title, body text, metadata (post date and category), etc. created with the editor. Traditionally it was in PHP format, but the newly added template is in HTML and is saved in a custom post type, which has the advantage of being all done in the editor. I think the task of creating […]

  • How to enable FSE in emulsion theme

    The emulsion theme is not only compatible with the full site editor, but also has the function as a conventional theme, and you need to select the type in the customizer. From Customize, open the Full Site Editor section and you will see the menu below. Theme Default is displayed in the traditional PHP template. FSE Transitional uses traditional templates and displays only the main content part in FSE. (If you have […]

  • About plugins

    A brief description of plugins that have been tested AMP AMP (originally an acronym for Accelerated Mobile Pages[1]) is an open source HTML framework developed by the AMP Open Source Project.[2] It was originally created by Google as a competitor to Facebook Instant Articles and Apple News Accelerated Mobile Pages – Wikipedia If you enable the AMP plugin, AMP-enabled pages will be generated automatically. The generated AMP page is an individual post, and a link is displayed in the admin bar, so you can check […]

  • プラグインについて

    動作確認済みプラグインの簡単な説明 AMP Accelerated Mobile Pages (AMP) ã¯ã€Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクト Accelerated Mobile Pages – Wikipedia AMP プラグインを有効にすると、AMPに対応したページが自動的に生成されるようになります。 生成されたAMPページは、個別投稿で、管理バーにリンクが表示されますので、そこから確認できます。 AMPプラグインが有効な場合、テーマは、AMPページに、テーマのスタイルを適用するようになります。 一部、例えば カバー画像などの全幅は適用されるけど、広幅は適用されないなど、通常のページとは、異なる表示になりますがご了承ください。 PWA Progressive Web Applications(英語記事) – ãƒ—ログレッシブウェブアプリケーション。webサイトを、ネイティブアプリのように扱うことができる技術。GoogleChromeやSafariなどの特定ブラウザの機能を利用して登録する。 PWA – Wikipedia PWA プラグインを有効にすると、アプリのように、モバイルデバイスにショートカットを作成したりすることができるようになります。 このプラグインは、特別な設定ページ等はありません。 PWAプラグインを利用する場合は、カスタマイザーで「サイトアイコン」の設定が必須になります。 Note このプラグインは、REST APIを使用します。 Disable REST API プラグインや、REST APIを無効にする処理をしている場合は正常に動作しません。 Disable REST API で有効にする例 wp-scss wp-scssプラグインを有効にした場合 テーマの、source/scss ホルダ内のscssファイルを、cssホルダーの各cssファイルに、書き出しを行います。 scssファイルを直接編集したい場合に使用することができます。scssファイルを直接編集しない場合には、不要です。 emulsion-addonsプラグインを有効にした状態で、wp-scssプラグインを有効化してください。ソースホルダーの設定や、書き出し先ホルダーの設定が自動的に行われます。 emulsion-addons emulsion-addonsプラグインは、このテーマ専用のカスタマイズのためのプラグインです。 プラグインを有効にすると、カスタマイザーにカスタマイズの項目、編集画面へのメタボックス、テーマカスタマイズのためのドキュメントの追加が行われます。 プラグインを使用した場合、例えばタイトルの文字量に応じてフォントサイズが調整されるといった機能等々が有効になります。プラグインを停止した場合は、そこまで微調整はされないといった違いがあります。 プラグインで行った変更は、プラグインを停止した場合でも、配色やレイアウトの変更は維持されますので、カスタマイズが完了したら、プラグインを停止するといった事ができます。 ワードプレスにあまり詳しくない友人にサイトをプレゼントするような場合、余計な作業でサイトの表示がおかしくなるといった問題も起きにくくなるので、このプラグインの特徴を覚えておいてください。

Copyright © 2022 Site proudly powered by WordPress