Skip to content
This repository has been archived by the owner on Jan 4, 2022. It is now read-only.

Commit

Permalink
changes readme and screenshot
Browse files Browse the repository at this point in the history
  • Loading branch information
pixolin committed Jun 27, 2016
1 parent 67705ed commit 3014499
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 46 deletions.
54 changes: 27 additions & 27 deletions README.md
Expand Up @@ -4,41 +4,39 @@

![Scroll-to-anchor](/assets/banner-1544x500.png)

## Description ##
== Description ==

Do you write longer text in posts or pages and want to provide links to skip parts?
Do you write longer text in posts or pages and want to provide links to skip parts? Anchor links to the rescue! In HTML you can define skip marks, so called anchors. Using a link with a pound-sign, readers can jump to the anchor and skip parts, which might be less interesting.

Usually this is done by adding HTML anchors in the text editor as link targets. But not everyone feels happy writing HTML code, which also may be error-prone. After installing this plugin you can use the new anchor icon in your visual editor toolbar to place anchors.
This plugin makes it easier for you to create anchors: No HTML is needed and all you need to do to add a new anchor is to click the new anchor icon in the visual editor icon bar and name the anchor (e.g. _summary_). If you click the OK-Button, a shortcode is inserted into your text, which automatically is replaced with the correct HTML in the frontend.

Click in your text where you want to place the anchor, then click on the anchor icon. A dialog box appears where you can provide a short name for your anchor (e.g. "summary"). Optionally you may also provide CSS class name to individually style the anchor. As a result, a shortcode will be placed into your text. This shortcode will render according to your settings and get replaced in the front end with the correct HTML.
Once your anchor has been added, you can link to it: Add and select text, click the link icon and then enter the name of the anchor preceded by a pound sign, e.g. _#summary_. That's all.

Next you can create a link to this anchor. Write some Text (e.g. "Skip to summary"), mark the text and use the default link icon in the editor toolbar. Instead of the complete URL it is sufficient to provide the previously created anchor name, preceded by a hash sign (e.g. "#summary"). That’s about it. If a visitors of your website now clicks on that link in the front end, they will see the web page scrolling smoothly to the defined anchor.
For a <strong>better user experience</strong>, a JavaScript function replaces the typical behaviour (i.e. to jump directly to the anchor) with a smooth scrolling animation. You can set the speed of that animation under **Reading > Settings**.

### Individual Settings ###
A couple of other settings provide just as much flexibility as you may need: If your website has a sticky header, you can set an offset for the scrolling animation. You can also choose if you want anchors to show up and set a descriptive expression to precede the anchor's name.

This plugin provides some enhancement only, so it doesn't come with yet another settings page but instead adds a settings section to the menu **Settings > Reading**.
Some users reported conflicts with other plugins, which use anchor tags for various reasons. To avoid issues, this plugin already excludes Woocommerce Tabs and Bootstrap Accordions, but you _could_ still run into issues with themes or plugins. To deal with this, you can add one or more CSS class names for sections, in which this plugin should be disabled. Although this is a little more complicated than I hoped for, it seems to be the best workaround. I'm happy to hear your thoughts, how this might even be improved in the future.

Here you can select the speed of the scrolling animation or even disable the animation entirely.
I made this plugin because I love WordPress. Period. I don't ask for donations, no upsell, no sketch of the team. **But I would love to get your feedback to learn more.**

You can also set an **offset** for anchors, which comes handy if you e.g. use a fixed header.

Some users just want the smooth scrolling effect, but don't want any text to show up in their posts or pages. Therefore the plugin won't display anything in the front end unless you choose differently in the settings. Those who want to show the anchors as text, may choose their own label for anchors, e.g. "footnote" or "section" (followed by the name you chose for that particular anchor).

I appreciate all feedback.

### Installation ###
== Installation ==

You can install **Scroll to Anchor** automatically from the plugin directory, or by uploading the files manually to your server. After activating **Scroll to Anchor** you'll be forwarded to the settings section at the bottom of the menu **Settings > Reading**.

To uninstall, just deactivate and delete the plugin. Remember to remove the shortcodes you may have added using the plugin.

### Frequently Asked Questions ###
== Frequently Asked Questions ==

Q: Why don't I see any settings page?
There is no need to add yet another settings page. You'll find the plugin settings at **Settings > Reading**.
Q: Why don't I see any additonal settings page?
To keep the plugin as unobstrusive as possible, I didn't add yet another settings page. Instead I added a settings section at **Settings > Reading**.

Q: Are there any restrictions for anchor names?
The plugin skips anchor links starting with `#respond` (usually comments) and on pages with a body-class `.woocommerce` anchors starting with `#tab` to avoid conflicts with WooCommerce's product tabs.
The plugin is disabled for anchors, if
* the anchor starts with <code>#respond</code> (usually comments),
* the anchor starts with <code>#tab</code> and a body-class <code>.woocommerce</code> is provided (WooCommerce's product tabs),
* the anchor is within a section <code>.accordion</code>
* you set other classes to be excluded.

### Screenshots ###
![Settings > Reading](https://github.com/pixolin/scroll-to-anchor/blob/master/assets/screenshot-1.png)
Expand All @@ -49,37 +47,39 @@ The plugin skips anchor links starting with `#respond` (usually comments) and on
3. Creating a link to anchor

### Changelog ###
#### 0.4.0 ####
Enhancement: Adds settings field to exclude CSS classes and avoid conflitcs with animations by third party themes and plugins, e.g. for accordions or tabs. Bootstrap's CSS class .accordion is excluded by default now.

### 0.3.7 ###
#### 0.3.7 ####
Customized JavaScript according to [WordPress Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/)

### 0.3.6 ###
#### 0.3.6 ####
Improvements in the JavaScript. Special thanks to Felix Arntz (flixos90).

### 0.3.5 ##
#### 0.3.5 ##
Release date: April 8, 2016
Bug-Fix: added exception for Woocommerce Tabs
(thank you for feedback by francismacomber)

### 0.3.4 ###
#### 0.3.4 ####
Release date: March 26, 2016
Bug-Fix: Settings weren't deleted from the database due to a wrong variable name.
Enhancement: Changes initial setting after installation to hide the anchor in the front end by default. Settings menu rearranged and with easier to understand descriptions.

### 0.3.3 ###
#### 0.3.3 ####
Release date: March 14, 2016
Bug-Fix: Replaces hook used to show settings link

### 0.3.2 ###
#### 0.3.2 ####
Release date: March 12, 2016
Enhancement: Menu plugins now shows link to settings section

### 0.3.1 ###
#### 0.3.1 ####
Release date: February 13, 2016
Enhancement: .pot-File for translation and German formal translation added.
Bug-Fixes: Some minor changes like removing unnecessary variables.

### 0.3 ###
#### 0.3 ####
Release date: February 12, 2016
Initial release.

Expand Down
Binary file modified assets/screenshot-1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 17 additions & 19 deletions readme.txt
Expand Up @@ -2,34 +2,28 @@
Contributors: pixolin
Tags: anchors, scrolling
Requires at least: 4.0
Tested up to: 4.5
Stable tag: 0.3.7
Tested up to: 4.5.3
Stable tag: 0.4.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Adds smooth scrolling to anchors, that you can easily set in the visual editor.
Easily add anchors with a smooth scrolling animation.

== Description ==

Do you write longer text in posts or pages and want to provide links to skip parts?
Do you write longer text in posts or pages and want to provide links to skip parts? Anchor links to the rescue! In HTML you can define skip marks, so called anchors. Using a link with a pound-sign, readers can jump to the anchor and skip parts, which might be less interesting.

Usually this is done by adding HTML anchors in the text editor as link targets. But not everyone feels happy writing HTML code, which also may be error-prone. After installing this plugin you can use the new anchor icon in your visual editor toolbar to place anchors.
This plugin makes it easier for you to create anchors: No HTML is needed and all you need to do to add a new anchor is to click the new anchor icon in the visual editor icon bar and name the anchor (e.g. _summary_). If you click the OK-Button, a shortcode is inserted into your text, which automatically is replaced with the correct HTML in the frontend.

Click in your text where you want to place the anchor, then click on the anchor icon. A dialog box appears where you can provide a short name for your anchor (e.g. "summary"). Optionally you may also provide CSS class name to individually style the anchor. As a result, a shortcode will be placed into your text. This shortcode will render according to your settings and get replaced in the front end with the correct HTML.
Once your anchor has been added, you can link to it: Add and select text, click the link icon and then enter the name of the anchor preceded by a pound sign, e.g. _#summary_. That's all.

Next you can create a link to this anchor. Write some Text (e.g. "Skip to summary"), mark the text and use the default link icon in the editor toolbar. Instead of the complete URL it is sufficient to provide the previously created anchor name, preceded by a hash sign (e.g. "#summary"). That’s about it. If a visitors of your website now clicks on that link in the front end, they will see the web page scrolling smoothly to the defined anchor.
For a <strong>better user experience</strong>, a JavaScript function replaces the typical behaviour (i.e. to jump directly to the anchor) with a smooth scrolling animation. You can set the speed of that animation under **Reading > Settings**.

= Individual Settings =
A couple of other settings provide just as much flexibility as you may need: If your website has a sticky header, you can set an offset for the scrolling animation. You can also choose if you want anchors to show up and set a descriptive expression to precede the anchor's name.

This plugin provides some enhancement only, so it doesn't come with yet another settings page but instead adds a settings section to the menu **Settings > Reading**.
Some users reported conflicts with other plugins, which use anchor tags for various reasons. To avoid issues, this plugin already excludes Woocommerce Tabs and Bootstrap Accordions, but you _could_ still run into issues with themes or plugins. To deal with this, you can add one or more CSS class names for sections, in which this plugin should be disabled. Although this is a little more complicated than I hoped for, it seems to be the best workaround. I'm happy to hear your thoughts, how this might even be improved in the future.

Here you can select the speed of the scrolling animation or even disable the animation entirely.

You can also set an **offset** for anchors, which comes handy if you e.g. use a fixed header.

Some users just want the smooth scrolling effect, but don't want any text to show up in their posts or pages. Therefore the plugin won't display anything in the front end unless you choose differently in the settings. Those who want to show the anchors as text, may choose their own label for anchors, e.g. "footnote" or "section" (followed by the name you chose for that particular anchor).

I appreciate all feedback.
I made this plugin because I love WordPress. Period. I don't ask for donations, no upsell, no sketch of the team. **But I would love to get your feedback to learn more.**

== Installation ==

Expand All @@ -39,11 +33,15 @@ To uninstall, just deactivate and delete the plugin. Remember to remove the shor

== Frequently Asked Questions ==

Q: Why don't I see any settings page?
There is no need to add yet another settings page. You'll find the plugin settings at **Settings > Reading**.
Q: Why don't I see any additonal settings page?
To keep the plugin as unobstrusive as possible, I didn't add yet another settings page. Instead I added a settings section at **Settings > Reading**.

Q: Are there any restrictions for anchor names?
The plugin skips anchor links starting with <code>#respond</code> (usually comments) and on pages with a body-class <code>.woocommerce</code> anchors starting with <code>#tab</code> to avoid conflicts with WooCommerce's product tabs.
The plugin is disabled for anchors, if
* the anchor starts with <code>#respond</code> (usually comments),
* the anchor starts with <code>#tab</code> and a body-class <code>.woocommerce</code> is provided (WooCommerce's product tabs),
* the anchor is within a section <code>.accordion</code>
* you set other classes to be excluded.

== Screenshots ==

Expand Down

0 comments on commit 3014499

Please sign in to comment.