Joli Table Of Contents

Leírás

Adds a SEO-friendly Table of Contents to your posts/pages. Makes your website look more valuable for both your visitors and Google.

Performance friendly: Styles/Scripts DO NOT load if the Table Of Contents is not supposed to display.

Features

  • Auto-insert table of contents (select post types and position in the content).
  • Manual insert table of contents by shortcode.
  • Customizable Table of Contents Title.
  • Show headings by custom depth (From H2 to H6).
  • Show TOC only if a minimum of headings has been found in the content (Optional).
  • Hierarchical (amount of empty space customizable) or Flat View.
  • Optional Numbering Prefix (ex: 1. Title 1; 1.2. Subtitle 2, etc…).
  • Pretty hash in the actual URL (ex: mysite.com/my-article/#subtitle-2
  • Customizable Numbering Prefix Separator (Ex: “.” => “1.1.2”; “-” => “1-1-2”).
  • Customizable Numbering Prefix Suffix (Ex: ).” => “1.1.2)”; “/” => “1.1.2/”).
  • Customizable Padding.
  • Customizable Headings Height (makes the TOC look more or less dense).
  • 6 Auto-insert positions available (See below for details).
  • Auto-insert to posts and/or pages.
  • Fully responsive.
  • 2 Visibility Options on page load (Unfolded, Folded (unfoldable)).
  • Hide or Show Overflowing Headings when viewport cannot fit the whole title length.
  • Smooth scrolling available.
  • Customizable TOC Title alignment (left, center, right).
  • Customizable TOC Toggle button position (left, right) (when folded).
  • Customizable TOC Toggle button: Text/HTML/Custom icons (open & close states).
  • 2 Themes included (Default & Classic).
  • Themes settings can be overriden (Colors, size, etc).
  • Customizable Width: Min/Max Width or 100% Width.
  • Customizable Font Size, Font Weight.
  • Optional Shadow.
  • Colors fully customizable (Table of Contents, Title, Headings, Shadow, Prefix).
  • Custom CSS available.
  • Developer-friendly. Many hooks provided. (See below for details).

Pro Features

Get Joli Table Of Contents Pro

  • All of the free features.
  • Custom Post Type Support.
  • Exclusive Floating Widget that shows the current section ( see details below ).
  • 5 Visibility Options on page load (Unfolded, Folded (unfoldable)).
  • Additional Themes (Default, Dark, Classic, Classic Dark, Wikipedia-like).
  • Force Enable/Disable TOC per post settings.
  • Customizable Floating Position ( Top or Bottom ).
  • Customizable Floating Offset (Horizontally & Vertically).
  • Expands on Hover or Click.
  • Collapses on Leave hover or Click away.
  • Optional Expanding Animation.

Auto-insert

The Auto-insert feature is optional and allows to automatically insert the Table of Contents to your content with the following options.

Supported post types:
* Post
* Pages
* Custom Post Type (Pro only)

Auto-insert positions:
* Before the content
* After the content
* Before H1
* After H1
* Before first H2
* After first paragraph

Visibility Options

  1. Invisible, floating on scroll (Pro only)

Table Of Contents is invisible after page is loaded. It only shows on scroll through a floating widget

  1. Unfolded, in-content

Table Of Contents is unfolded after page is loaded. It remains in its position and no widget shows on scroll.

  1. Unfolded, folded & floating on scroll (Pro only)

Table Of Contents is unfolded after page is loaded. It also shows on scroll through a floating widget.

  1. Folded, in-content

Table Of Contents is folded after page is loaded. It can be unfolded at will. It remains in its position and no widget shows on scroll.

  1. Folded, folded & floating on scroll (Pro only)

Table Of Contents is folded after page is loaded. It can be unfolded at will. It also shows on scroll through a floating widget.

Shortcode

Use the following shortcode within your content to have the table of contents display where you wish to:

[joli-toc]

Hooks

You can use any of the hooks provided to add custom content to the actual Table Of Contents.

How to use ?

Copy & paste the code examples below into your theme’s functions.php file:

Filters

  • joli_toc_disable_autoinsert

Globally disables Joli Table Of Contents site-wide.

add_filter('joli_toc_disable_autoinsert', function(){ return true; });
  • jolitoc_shortcode_tag

Customizes the shortcode tag ( Useful if you were using a different plugin before ).

add_filter('jolitoc_shortcode_tag', function(){ return 'custom-tag';});
  • joli_toc_expand_str

Customizes the toggle button (expand).

//Using Text
add_filter('joli_toc_expand_str', function(){ return '>';});

//Using Font Awesome
add_filter('joli_toc_expand_str', function(){ return '<i class="fa fa-caret-down"></i>';});
  • joli_toc_collapse_str

Customizes the toggle button (collapse).

add_filter('joli_toc_collapse_str', function(){ return '˅';});

Actions

joli_toc_before_table_of_contents
joli_toc_before_title
joli_toc_after_title
joli_toc_after_headings
joli_toc_after_table_of_contents

Example: adding a horizontal bar after the title

Copy & paste the following code into your theme’s functions.php file:

add_action( 'joli_toc_after_title', 'echo_hr' );

function echo_hr(){
    echo <hr class="joli-div">;
}

Képernyőmentések

  • General settings
  • Auto-insert settings
  • Behviour settings
  • Appearance settings
  • Documentation
  • Default theme demo with shadow option
  • Classic theme demo
  • Font awesome toggle icon example 1
  • Font awesome toggle icon example 2

Telepítés

This section describes how to install the plugin and get it working.

e.g.

  1. Upload the plugin files to the /wp-content/plugins/plugin-name directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress
  3. Use the Settings->Plugin Name screen to configure the plugin
  4. (Make your instructions match the desired user flow for activating and installing your plugin. Include any steps that might be needed for explanatory purposes)

INSTALLING FROM THE WORDPRESS ADMIN

  1. Go to the “Plugins > Add New” page.
  2. Type “Joli Table Of Contents” in the search field
  3. Look for the “Joli Table Of Contents” plugin in the search result and click on the “Install Now” button, the installation process of plugin will begin.
  4. Click “Activate” when the installation is complete.

INSTALLING WITH THE ARCHIVE

Go to the page “Plugins > Add New” on the WordPress control panel
Click on the “Upload Plugin” button, the form to upload the archive will be opened.
Select the archive with the plugin and click “Install Now”.
Click on the “Activate Plugin” button when the installation is complete.

MANUAL INSTALLATION

Upload the folder joli-table-of-contents to your site’s plugin folder, usually it is /wp-content/plugins/.
Go to the page “Plugins > Add New” on the WordPress control panel
Look for “Joli Table Of Contents” in the plugins list and click “Activate”.

HOW TO DISPLAY THE TABLE OF CONTENTS ON MY WEBSITE ?

Once you’ve installed Joli Table Of Contents, go to the Settings page under the Menu “Joli TOC”.

Then You have 2 choices:
1. Under Auto-insert, select the post types you would like to have to TOC to display
2. Use the [joli-toc] shortcode directly inside your content.

WHAT TO DO AFTER ACTIVATION ?

Go to the Settings page under the Menu “Joli TOC”, then configure the following basic options to get started:

GENERAL > GENERAL
1. Choose a Title for the Table Of Contents
2. Choose to display a prefix or not

AUTO-INSERT > AUTO-INSERT TABLE OF CONTENTS
1. Select which post types you would like to have the TOC display.
2. Choose the TOC Position

BEHAVIOUR > BEHAVIOUR
1. Select the Visibility.
2. Choose how to deal with the Headings overflow.
3. Select your prefered toggle button position.

APPEARANCE > THEMES
1. Choose a theme
2. Select your prefered Title alignment.
2. Customize any of the Appearance settings to override theme defaults.

GYIK

How can I make it work after installation ?

Once you’ve installed Joli Table Of Contents, go to the Settings page under the Menu “Joli TOC”.

Then You have 2 choices:
1. Under Auto-insert, select the post types you would like to have to TOC to display
2. Use the [joli-toc] shortcode directly inside your content.

Can I use custom icons such as FontAwesome for the toggle button ?

Yes! You can easily customize the toggle button using either text or icons.
The toggle button has 2 states: collapsed and expanded.

Use the following hooks into your theme’s functions.php to customize the button:

add_filter(‘joli_toc_expand_str’, function(){ return ”;});
add_filter(‘joli_toc_collapse_str’, function(){ return ‘[close]’;});

Is Joli Table Of Contents responsive ?

Yes, it is fully responsive and hover events work as touch actions on mobile.

The title, headings or toggle button won’t show, what to do ?

Depending on your theme, text color may have the same color as the TOC background color as they are inherited by default.
In order to change the color, go to the Settings, then under the Appearance tab, change any color.

Vélemények

2019.10.01.
I was looking for a more modern toc plugin and I came across this brand new table of contents plugin. It has many customization options and comes with a few themes (hope to see more in the future). I gave it a shot and so far I am very happy with it. Coming from easy table of contents, I didn't even have to change the shortcodes from my existing content as I could modify the actual shortcode tag using the provided hook. Smooth! I'm sure some details could be improved but I will be following this plugin as it looks promising!
2 (az összes) vélemény olvasása

Közreműködők és fejlesztők

“Joli Table Of Contents” egy nyílt forráskódú szoftver. A bővítményhez a következő személyek járultak hozzá:

Közreműködők

“Joli Table Of Contents” fordítása a saját nyelvünkre.

Érdekeltek vagyunk a fejlesztésben?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Változási napló

1.0.1

  • Fixed text domain issue
  • Added Settings link for convenience.
  • Added quick start guide & notice in the settings.

1.0.0

  • Initial release.