Add guide to mimic demo page

This commit is contained in:
Tetrakern 2024-04-03 17:19:14 +02:00
parent 08b6b2aa59
commit 534defa104
3 changed files with 69 additions and 60 deletions

View File

@ -2,24 +2,7 @@
This is a quick guide to get you started if you want to contribute to the theme, fork off your own version, or create a child theme. Nothing too comprehensive, but enough to introduce the core concepts and practices.
### Table of Contents
* [Coding Standards & Documentation](#coding-standards--documentation)
* [Build Pipeline](#build-pipeline)
* [CSS/SCSS](#cssscss)
* [CSS Custom Properties (Variables)](#css-custom-properties-variables)
* [Functions](#functions)
* [JavaScript](#javascript)
* [Libraries](#libraries)
* [Shorthands](#shorthands)
* [Custom Events](#custom-events)
* [AJAX Requests](#ajax-requests)
* [Hooked Actions & Filters](#hooked-actions--filters)
* [Caching](#caching)
* [References](#references)
* [Functions](#functions-1)
### Additional Resources
## Additional Resources
* [Theme action hooks](ACTIONS.md)
* [Theme filter hooks](FILTERS.md)

View File

@ -2,48 +2,7 @@
This documentation is about the Fictioneer theme. If you need help with WordPress in general, take a look at the [official documentation](https://wordpress.org/support/category/basic-usage/) or search the Internet for one of the many tutorials. For the installation, look [here](INSTALLATION.md) first and then come back once you are done.
### Table of Contents
* [Stories](#stories)
* [Meta Fields](#meta-fields)
* [eBooks/ePUBs](#ebooksepubs)
* [Chapters](#chapters)
* [Meta Fields](#meta-fields-1)
* [Text-To-Speech Engine](#text-to-speech-engine)
* [Collections](#collections)
* [Meta Fields](#meta-fields-2)
* [Recommendations](#recommendations)
* [Meta Fields](#meta-fields-3)
* [Example Sentences](#example-sentences)
* [Shared Options](#shared-options)
* [SEO & Meta Tags](#seo--meta-tags)
* [Landscape Image](#landscape-image)
* [Page Layout](#page-layout)
* [Comments](#comments)
* [Additional CSS Classes](#additional-css-classes)
* [HTML Block / litRPG Box](#html-block)
* [Shortcodes](#shortcodes)
* [Article Cards](#article-cards)
* [Blog](#blog)
* [Bookmarks](#bookmarks)
* [Contact Form](#contact-form)
* [Cookie Buttons](#cookie-buttons)
* [Latest Chapters](#latest-chapters)
* [Latest Posts](#latest-posts)
* [Latest Stories](#latest-stories)
* [Latest Recommendations](#latest-recommendations)
* [Latest Updates](#latest-updates)
* [Chapter List](#chapter-list)
* [Search Form](#search-form)
* [Showcase](#showcase)
* [Images & Media](#images--media)
* [Users & OAuth](#users--oauth)
* [Checkmarks, Follows & Reminders](#checkmarks-follows--reminders)
* [Bookmarks](#bookmarks)
* [User Profile](#user-profile)
* [Common Problems](#common-problems)
* [Missing Blocks](#missing-blocks)
* [Reserved URL Slugs](#reserved-url-slugs)
Click the outline toggle in the top-right corner to see the table of contents.
## Stories

View File

@ -671,6 +671,73 @@ There are two ways to customize the theme. The obvious one is the Customizer of
The second way is to directly modify the templates, styles, and scripts. This is indefinitely more powerful but requires some developer skills — and you can easily break your site. The themes files can be modified under **Appearance > Theme File Editor**, although you should never actually do this. Always create a [child theme](https://developer.wordpress.org/themes/advanced-topics/child-themes/) because any code changes you make, regardless of quality, will be overwritten again when you update the theme.
### Demo Layout
As per popular demand, here is a small guide on how to mimic the demo site. Please be aware that the demo is more for showing off features than being a production example. But you can layout your site as you like. Make sure to look at the available [shortcodes](DOCUMENTATION.md#shortcodes) and their possible configurations. If you are new to WordPress, better read a guide about using the CMS first since the basics will not be covered here.
First, create two new pages with the "No Title Page" template, one called "Home" and the other "Posts" (or whatever you like). Then go to **Settings > Reading > Your homepage displays** and set it to "A static page". Assign the pages you created. Now you can add blocks and shortcodes to your "Home" page; leave the "Posts" page empty.
For simplicity, here is the copied content of the demo home page (minus the site-specific things). Put that into the Code editor view and adjust it as needed.
<details>
<summary>Editor content</summary><br>
```html
<!-- wp:shortcode -->
[fictioneer_latest_posts count="1"]
<!-- /wp:shortcode -->
<!-- wp:spacer {"height":"24px"} -->
<div style="height:24px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:shortcode -->
[fictioneer_article_cards per_page="2" ignore_sticky="1"]
<!-- /wp:shortcode -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Latest Stories</h2>
<!-- /wp:heading -->
<!-- wp:shortcode -->
[fictioneer_latest_stories count="10"]
<!-- /wp:shortcode -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Latest Updates</h2>
<!-- /wp:heading -->
<!-- wp:shortcode -->
[fictioneer_latest_updates count="6"]
<!-- /wp:shortcode -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Latest Chapters</h2>
<!-- /wp:heading -->
<!-- wp:shortcode -->
[fictioneer_chapter_cards count="6"]
<!-- /wp:shortcode -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Latest Recommendations</h2>
<!-- /wp:heading -->
<!-- wp:shortcode -->
[fictioneer_latest_recommendations count="6"]
<!-- /wp:shortcode -->
<!-- wp:heading {"className":"show-if-bookmarks hidden"} -->
<h2 class="wp-block-heading show-if-bookmarks hidden">Bookmarks</h2>
<!-- /wp:heading -->
<!-- wp:shortcode -->
[fictioneer_bookmarks count="10"]
<!-- /wp:shortcode -->
```
</details>
### Header Style
![Customizer HSL Sliders](repo/assets/customizer_header_style_preview.jpg?raw=true)