Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
This goes over Menu Helper and how it can help you set up Ajaxify Comments
Menu Helper provides shortcuts in the admin bar and is helpful when you are first setting up the plugin. It is disabled by default but is easily enabled in the admin settings.
The Admin Bar Must Be Enabled: Menu Helper lives in the admin bar, so if you don't see Menu Helper, go to your user profile and enable the admin bar on the front end.
Menu Helper has the following tools and shortcuts:
Simulate Enabled/Disabled - Simulate the page with Ajaxify Comments enabled or disabled. This is useful for debugging and also testing out the plugin before enabling it on the site.
Launch Selector Helper - This tool scans your page and tries to find the comment selectors for you.
Close/Open Comments - Quickly open and close comments. Please note that for Selector Helper to work, comments must be open.
Preview Error Messages - Launch the preview notifications that come with Ajaxify Comments. This is useful for previewing the notifications on the front end.
Admin Shortcuts - Shortcuts to the admin settings and the selectors allow for quick navigation between the front and admin sections.
Here is how to enable Menu Helper and how to use some of the various shortcuts and tools included.
To enable Menu Helper, head to the "Home" screen in the admin settings.
Toggle Menu Helper on and save the settings.
Navigate to a post with comments open and that has a few posted comments.
You'll find an Ajaxify menu item, which contains most of the Menu Helper tools and shortcuts.
One of the first things you'll want to do after enabling Menu Helper is to simulate what Ajaxify Comments looks like on your site. Understandably after installing the plugin, you want to make sure it works before actually enabling it. This is why Ajaxify Comments is disabled by default in the admin settings.
By clicking Simulate Enabled, you can test how Ajaxify Comments works without affecting the site.
Once enabled, try to post and interact with the comment section, and check that the error handling is working by submitting a blank comment and a duplicate comment.
When you're done, click "Back to Post" in the admin bar.
If Ajaxify Comments is indeed enabled, then you'll see a Simulate Disabled option in Menu Helper.
This is useful if you are testing an integration, or troubleshooting another plugin and need to test what it's like with Ajaxify Comments disabled. When clicked on, there is a "Back to Post" option as well.
Selector Helper is a wizard that tries to scan your site's source code for the right comment selectors.
Comments must be enabled, and at least one comment should be posted.
The wizard will check if comments are enabled and at least one comment has been left on the post.
If you need to enable comments, there is a shortcut in Menu Helper.
If all checks pass, you'll see a success confirmation allowing the Selector Helper to run.
Selector Helper first checks that there is at least one comment and that comments are open. If the tests pass, it will scan the source for the comment selectors.
If all of the selectors have been found, you'll see a table of the found selectors, which you can then save.
If you need to enable or disable comments, there is a shortcut in Menu Helper.
You don't have to post comments to test the notifications. You can do it right from Menu Helper.
Menu Helper is not designed to be active all the time. If you are done with Menu Helper, you can disable it in the admin settings. There is a shortcut to the settings in the Menu Helper toolbar.
For more information on how to get set up, please see the Getting Started guide.
Head to the Labels tab in the admin settings.
All labels shown to the users should be listed here, and you can update the language used for each label.
For translating Ajaxify Comments using WPML, please check out the link below.
This will walk you through how to get started with Ajaxify Comments.
When first installed, is disabled by default. This is so you can set up the selectors and appearance of Ajaxify Comments before enabling the plugin.
Head to the admin settings and view the Selectors tab. Selectors tell Ajaxify Comments about your comment section.
If you are an advanced user, please enter the selectors that make up your comment section.
Use Menu Helper: Find a post or page with comments and use Menu Helper to assist in finding your selectors.
Selectors are an advanced topic requiring you to inspect your comment section's HTML source. This is why Menu Helper was created. For first-time setup, Menu Helper is available to help you along.
Go ahead and enable Menu Helper.
Find a post with comments enabled and navigate to the front end of that post (i.e., view it on the site).
With the admin bar enabled, you'll see Ajaxify in the top admin bar.
Selector Helper is a wizard that tries to scan your site's source code for the right comment selectors.
Comments must be enabled, and at least one comment should be posted.
The wizard will check if comments are enabled and at least one comment has been left on the post.
If you need to enable comments, there is a shortcut in Menu Helper.
If all checks pass, you'll see a success confirmation allowing the Selector Helper to run.
Selector Helper first checks that there is at least one comment and that comments are open. If the tests pass, it will scan the source for the comment selectors.
If all of the selectors have been found, you'll see a table of the found selectors, which you can then save.
You can simulate what Ajaxify Comments will look like when enabled. Using Menu Helper, select "Simulate Enabled."
This will refresh the page, and you can post comments as if Ajaxify Comments is enabled. A "Back to Post" button will allow you to return to the page without Ajaxify Comments enabled.
With Ajaxify Comments enabled, you can use Menu Helper to simulate the loading, error, and success messages that Ajaxify Comments uses. This is useful for adjusting the appearance and previewing the changes on the front end.
Leave a few test comments and ensure all error messages work (posting duplicate comments, empty comments).
If comments are working as expected, it's time to enable Ajaxify Comments.
Using Menu Helper, visit the admin settings to enable Ajaxify Comments.
You can now enable Ajaxify Comments, and you can disable Menu Helper.
Please . A lot of work has gone into making this plugin, and star ratings help spread awareness of the plugin and help improve the plugin's reputation.
If you need help or support, please use the or the .
Ajaxify Comments is a free plugin: Please visit the plugin on the WordPress Plugin Directory
Log into your WordPress admin (i.e., your dashboard)
Go to Plugins->Add New
Type in "Ajaxify Comments"
Install and Activate the plugin
After activation, you can find the plugin's settings in the Dashboard under Settings->Ajaxify Comments.
Download the plugin zip file from the WordPress Plugin Directory
Unzip the plugin zip in a place you can remember for the next steps
Log into your FTP program of choice for your website
Upload the unzipped folder into wp-content/plugins
Log into your admin dashboard
Head to the plugins screen
Search for Ajaxify Comments.
Activate the plugin
After activation, you will be taken to the plugin's settings screen.
Post comments without a page reload
Ajaxify Comments allows you to post comments without a page reload. Any error messages are also rendered inline as well.
Ajaxify Comments hooks into the WordPress native comment system and is designed to work with most themes. The plugin is developer-friendly, customizable, and translatable.
You can adjust the appearance of the comment overlay in the Appearance settings.
A sticky preview bar shows so you can launch a preview after adjusting settings.
You can adjust the following:
Colors of the text and overlay
The opacity of the overlay
Padding and border-radius
Font size and alignment
Fade-in and fade-out speeds
Here's a GIF of how you can adjust the settings.
Callbacks allow you to run custom JavaScript code in certain parts of execution. For example, if you have an Edit Comments plugin, you can run a custom function that initializes the plugin after a comment has been posted.
Each callback can pass arguments, which are documented below and will be in scope for any custom JS functionality that needs to run.
A common use-case of callbacks is another plugin that needs to run before, during, and after Ajaxify Comments loads.
This allows you to run JavaScript code before Ajaxify Comments has selected the DOM elements.
One argument is in scope, which is a jQuery representation of the DOM elements selected.
If you'd rather use a native JS event, you can use the event: wpacBeforeSelectElements
This callback provides no arguments.
If you'd rather use a native JS event, you can use the event: wpacBeforeSelectElements
commentUrl (string)
unapproved (boolean)
If you'd rather use a native JS event, you can use the event: wpacAfterPostComment
newDom (jQuery DOM element)
commentUrl (string)
If you'd rather use a native JS event, you can use the event: wpacBeforeUpdateComments
newDom (jQuery DOM element)
commentUrl (string)
Ollie is a block theme for WordPress
Ollie has a different selector structure than a lot of themes. While FSE is catching on and themes are changing, we will update the selectors as needed.
These selectors are for reference until they can be built into Menu Helper.
This action is executed after all of Ajaxify Comments' scripts have been enqueued. This is useful to run custom scripts after Ajaxify Comments.
Regardless if Ajaxify Comments is disabled, you can pass true
to force load the scripts and functionality needed to take over the comment section. This can still be overruled by the dlxplugins/ajaxify/comments/can_load
filter.
Prevent any loading of Ajaxify Comments scripts or functionality regarding the comment section.
This next filter, if false
is returned, will not redirect the plugin to the plugin's settings screen after activation.
Ajaxify Comments allows changing the alert and text colors in the Appearance settings of the admin.
When selecting colors, Ajaxify attempts to get the theme's colors. You can return custom colors by hooking into this next filter.
Filter the options before they are output via JSON as settings. This can be used to manipulate labels or settings per post and post type.
Filter definition:
Please contact support.
The source files for the scripts are in /src/js/frontend
in the GitHub repo.
All five Ajaxify Comments scripts will load separately if:
Uncompressed scripts are enabled
Debug mode is enabled for the plugin
This will load Ajaxify Comments everywhere. Please note that if debug
mode is enabled, Ajaxify scripts will load everywhere in that case as well.
It is always advisable to load scripts in the footer for performance reasons.
Scripts will load in the footer if:
Place scripts in the footer is enabled
Debug mode is enabled
SCRIPT_DEBUG is enabled
Translate Ajaxify Comments with WPML
WPML is a popular multi-language plugin that allows you to translate strings for multiple languages using WordPress.
#translating-ajaxify-comments-labels
#translating-the-remainder-of-ajaxify-comments-strings
This guide will walk you through how to translate Ajaxify Comments using WPML.
You need the WPML Multilingual CMS plan: The Multilingual CMS plan comes with the String Translator add-on, which you'll need to translate Ajaxify Comments.
Ajaxify Comments has several labels available to translate. Here's how to translate them using WPML.
Ajaxify Comments has several labels that are displayed that can be translated. These can be found in the labels screen of Ajaxify Comments.
These labels are designed to be translated for one language, but you can use WPML and modify these labels per language.
Install WPML and WPML String Translation and follow the setup process for the plugin.
To register the strings for translation in WPML, we'll have to save the Ajaxify Comments settings.
Head to any of Ajaxify Comments admin screens and save the settings. This will register the strings.
Head to the Translation Management screen, which you can find in the WPML menu item.
Select "Ajaxify" from the "Types" menu and filter. You can now select the "Ajaxify Comment Labels" item.
Select "Ajaxify Comment Labels" and click the "Add to Translation Queue" button.
Head to the "Translations" item under the WPML menu item.
Once on the "Translations" screen, you'll be able to select "Ajaxify Comment Labels" and translate those.
While on the translate screen, you'll see the old labels that you can translate into your new language.
Complete all of the translations, mark them as complete, and save.
Head to the frontend, and try to post a few test comments while in the alternate language.
The labels are one small part of Ajaxify Comments. In order to translate Ajaxify Comments wholistically, you need to head to the Themes and Plugin Localization menu item under WPML.
Find the plugin Ajaxify Comments
and scan for the strings.
While on the same screen, after scanning, select the "Ajaxify Comments" translation to edit it.
Alternatively, you can head to the Strings Translation under WPML and select the wp-ajaxify-comments
domain.
Need more help?
Please reach out to support.
Ajaxify Comments will try to update the URL location bar to keep track of its state. You can disable this feature if you wish to prevent the URLs from being updated dynamically.
Here is an example of a dynamic URL created:
Selectors help tell Ajaxify Comments about your comment section.
Selectors can be an advanced topic, so it's best to allow Menu Helper to help with finding the right selectors.
To find the right selectors, it's recommended to open the developer tools in your browser and go to elements.
Selectors must be compatible with jQuery notation. IDs must have a #
sign and classes must have a .
in front of them.
This container wraps the comments list. You can usually find it by opening the dev tools and finding an individual comment.
Trace this comment back to its parent container, and you'll find the container ID or class.
This is the wrapper ID or class for the form
element in the comments section.
This can usually be found by inspecting the comment form's textarea element and tracing it back to the form
parent element.
This wraps the respond area for the comment section.
You can usually find this by selecting the comment form's textarea and tracing it back to the form's parent container.
This is the comment form's textarea field and can be found by selecting the comment's textarea.
This is the submit button for the comment section. It can be found by selecting the submit button and finding the ID or class of the button or input.
Advanced Selectors must be in jQuery notation.
Show Confetti when someone leaves a comment.
Ajaxify Comments is compatible out of the box with the Confetti plugin.
The pro version is equally capable and has many more styles.
Edit comments with Ajaxify Comments
Comment Edit Core allows you to edit comments for up to 5 minutes.
To ensure compatibility between Comment Edit Core and Ajaxify Comments, you can update the OnAfterUpdateComments
callback with the following snippet:
You should now be able to edit comments when new comments are posted.
Lazy loading comments can improve performance
Lazy-loading comments can improve the page load of your blog posts and pages. If there are a lot of comments on a post, this can slow down the page's loading speed.
Make sure you set your selectors first. You can use Menu Helper to help set your selectors.
Find the Lazy Load options in the admin settings. The first option on the page allows you to enable or disable lazy loading for comments.
You can use Menu Helper to simulate lazy loading before it's activated.
Here are the types of Triggers and what you can do for each one.
Comments do not load unless specifically invoked by an external source.
The external source will want to call this JavaScript function to load in the comments:
This option allows Ajaxify Comments to load when the comments section has been reached. This will be useful for never loading the comments for the user until that user reaches further down the page in the comments section.
You can adjust a vertical scroll offset (in pixels) to "trigger" loading a certain distance above the comments section.
This will load comments once the page has finished loading. This is the default behavior.
This option allows you to set which HTML element or CSS selector must be scrolled into view in order to load comments.
Use a valid CSS selector using jQuery notation (.css-class,#css-id,form
)
For example, if you set a selector to some Related Posts at the bottom of your content, the comments will load in when the posts are scrolled into view.
You can set the scroll offset so that the loading occurs a certain number of pixels above the offset.
Units are in pixels: Scroll offset is in pixels.
You can set the loading trigger to be scroll distance. This will load the comments when a user reaches a certain number of pixels from the top of the screen.
You can choose between an overlay or no overlay for lazy loading. An animation of the loading popover is below.
The Overlay can be configured in the Appearance settings.
When leaving comments, Ajaxify Comments will try to scroll to the comment so it is in view when posted.
Disabling the Scroll to Anchor feature prevents any such scrolling from occurring.