Articles Moduleを使用して当サイトのHome(Top)ページをカスタマイズします。
概要
- 当サイトのHomeページは、Menu Item TypeにFeatured Articlesを指定しており、Featured指定したArticleを表示するようにしています
- このHomeページのFeatured Articlesの下部にArticle Moduleを配置して、カテゴリー別Article一覧を表示します
Joomla!におけるページ作成の基本
ページビルダーによるサイト構築
- Joomla! Coreで作成できるページは基本的にシンプルな構成です
- これに対し、サプライヤーが提供しているWYSIWYGライクなページビルダーを使えば、便利な編集機能や様々なパターンのモジュールが用意されていますので、凝ったデザインのページを簡単に作成することができます
- わたくしはJoomshaperのSP Page Builderを使用しています
- その他、次のようなページビルダーが有名です
- 上記で紹介したページビルダーのサプライヤーは同時にTemplateのサプライヤーでもあります
- サプライヤーは自社が開発したフレームワーク(HelixやGantryなど)と親和性のあるページビルダーを使用して、レスポンシブでSEOフレンドリーなTemplateを提供しています
- そして、当方のような小さなサイトと違い、Joomla!ベースで構築された中規模以上のサイトの多くは、事業者自ら開発したサイトを除きサプライヤーによるページビルダーやTemplateを使用しているのではないでしょうか
ページビルダーを使わずページ作成をする手順
- 当サイトはTemplateもJoomla! Core同梱のシンプルなCassiopeiaを選択しており、ページビルダーが便利であることは重々承知の上で、ページビルダーを使わず標準Moduleを使ってページ作成してまいります
- ページビルダーを使わずページ作成をする手順は次のとおりです
- なお、好みのTemplateを選択すれば、すでにHeader, Footer, Sidebar(場合により)はあらたか用意(複数のModuleで構成)されていますので、本稿で説明する「ページ」とは、header要素とfooter要素に挟まれたmain要素(厳密にはそれを囲むClass: site grid contaierのDiv要素)を指しております
- 新しいメニューを作成
- ページの目的に合わせて、Menu Item Typeを選択します
- 当サイトのHomeページはメインコンテンツをFeatured Articlesのリストとするため、Featured Articlesを指定しました
- Single Articleを指定してサイト内容は空のまま、次の手順で作成するSite Moduleを複数配置してコンテンツのすべてを構成する選択もあります
- メインコンテンツに追加するコンテンツとして、新たにSite Moduleを作成して任意の位置に配置します
- Joomla! Coreにも標準で幾つかのArticle用Moduleが用意されています
- 当サイトではFeatured Articlesの下にカテゴリ別Articleのリストを配置しました
Site Module: Articles
- Site Module: ArticlesはJoomla! 5.2 Coreに搭載された過去の複数のArticle Moduleを統合したModuleになります
Help5.x:Site Modules: Articles | Joomla! Documentation
- Joomla! 6.0.2で用意されているArticle Muduleは次のとおりです
- Articles
- Articles - Archived
- Articles - Categories
- Articles - Category (Legacy)
- Articles - Latest (Legacy)
- Articles - Most Read (Legacy)
- Articles - Newsflash (Legacy)
- D, E, F, Gは旧来のMuduleです
- 当サイトはAのArticlesを使用してカテゴリ別Articleのリストを配置しています
カテゴリ別Articleリスト(Articles by Category)の作成
- 作成するカテゴリ別Articleリストは次のとおりとします
- Gategory: アルファベット昇順
- Article: タイトル名昇順
- Columns: 4列
- Article Title Heading: h5
- Created Date: yyyy/mm/dd表記
- Intro Text: 表示
- Content > Site Modules 右の+をクリックします
- Select a Module Type: Articlesをクリックします
- Module: Articles > Module tabが表示されます
- Title: Articles by Categoryと入力しました
- Category: 表示するカテゴリを選択します
- Title: Show
- Titleのテキストを表示します
- Position: bottom-b
- メインコンテンツのFeatured Articlesの下に配置するためbottom-bを選択しています
Source: J4.x:Cassiopeia Template Customisation
- メインコンテンツのFeatured Articlesの下に配置するためbottom-bを選択しています
- Module: Articles > Menue Assigment tab > Menu Assigment blkへ移動します
- Menu Assigment: Only on the pages selectedを選択します
- Menu Selection: Homeのみ選択します
- Module: Articles > Display Options tab > Display Options blkへ移動します
- Layout: Horizontalを選択します
- Max. Number of Columns: 4を指定します
- Article Title: Showを指定します
- Header Level: h5を指定します
- Date: Showを指定します
- Date Field: Created Dateを選択します
- Date Format: Y-m-dを指定します
- Introtext: Showを指定します
- Introtext Limit (Characters): 100を指定します
- Module: Articles > Filtering Options, Ordering Options, Grouping Options, Advanced, Permissions各タブはデフォルトのママ、特にオプションを変更していません
- Save & Closeをクリックします
- ブラウザで表示を確認します
