I'm currently on a project where I want to have :
Wordpress for easy content managment.
AngularJS for some UX (the goal is to have no page reload + nice animation between pages loading) + further functionalities.
And care about the SEO.
In that purpose, I'm using Angular's Route module to get the user a smoother experience, and using the Angular HTML5 "pretty urls" mode to "hook" the page switching (No hashbang -> natural links).
I don't want to generate hashbangs because it's more difficult to maintain (HTML snapshots with phantom.js server etc...) than just leaving Wordpress generate the content as he does it well.
So my intention was to let angularJS controls the user's navigation, and wordpress to generate the content when user will F5 & for the SEO bots(No JS).
But I can't find a clean & clear solution to this problem because either the Angular way will work, either the "PHP" way will work.
Any ideas will be welcome ! :)
Wordpress already provides you with wp_ajax_ hook for AJAX requests. ( link)
Example:
mysite.com/my-test-page
Wordpress
In this simple case we need our wp_ajax_ hook to retrieve a page by it's slug.
One easy way is to use get_page_by_path($page_path, $output, $post_type), to get the page we want where $page_path is the slug.
Then return the page data as JSON, return json_encode($pageArray);
AngularJS
Route: Do a simple GET:
.when('/:page_slug', {
templateUrl: 'views/page.html',
controller: 'PageController',
resolve: {
page : function($route) {
return $http.get(wp_ajax_url,
{
'action': 'the_ajax_hook',
'data': $route.current.params.page_slug
}
);
}
}
})
SEO
Google recently announced they are updating the Webmaster Tools to show you how a Javascript generated site renders and provide you with tips on how to make your site crawl-able.
http://googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html
Apart from that you can use other services to make your site SEO-friendly today:
getseojs.com
brombone.com
prerender.io
Related
I've migrated (Google) Blogger blog into Wordpress.com.
The blog is rather large (300+ posts) and I still get 404s multiple times a day due to URLs ending with ?m=1 query param.
e.g.
https://softwarearchiblog.com/2019/01/technical-debt.html?m=1
will yield HTTP 404, while
https://softwarearchiblog.com/2019/01/technical-debt.html
works fine
I use the Redirection Plugin, which does a fairly good job for various other issues - but I can't define a proper expression in its language.
The issue is around not being able to define the target URL as a regex:
Is there any way around it?
Is there any other plugin that will "do this work" and can live side-by-side with Redirections?
Since I work with hosted Wordpress.com - I understand I cannot modify the .htaccess file for a more generic redirect. Any other way to do it?
With the Redirection Plugin you can ignore the query parameters:
https://redirection.me/support/matching-a-url/
But I think you'll need an entry for each of your posts.
I think, it's possible to do using javascript. You might put this code in the header.php or 404.php file (it depends on your theme) or use this plugin to insert the code Insert Headers and Footers
<script type="text/javascript">
var uri = window.location.toString();
if (uri.indexOf("&m=1", "&m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("&m=1"));
window.location.replace(clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("?m=1", "?m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?m=1"));
window.location.replace(clean_uri);
};
</script>
I build a plugin that base on plugin https://wordpress.org/plugins/amp/ and I want to check state when the user on AMP post or page.
What is the function that allows us to check AMP endpoint in WordPress?
You can use the is_amp_endpoint() function to check if the currently loaded page/post is an AMP one.
I strongly suggest to use the is_amp_endpoint() function and wrap it within an existing condition, such as the following:
if (function_exists( 'is_amp_endpoint' ) && is_amp_endpoint()) {
// do stuff
}
That way your Wordpress web site won't crash if/when the WP-AMP plugin gets disabled (or changes its behaviour / method signature).
For additional info and alternative ways to do that, check out this blog post that I wrote on this topic.
I am writing a WordPress plugin that has an AJAX element to it - blocks of HTML are fetched by the front end from the plugin using AJAX.
I am having difficulty joining up the pieces here, and I suspect it is just a terminology issue. How would I implement a page completely provided by the plugin?
The content of the page will be HTML - the plugin can generate this in response to POST or GET parameters.
There needs to be a route to this page. The route does not have to be user-friendly or a REST style - just some kind of URI that gets to the plugin. Is there perhaps a way to register a custom page with an arbitrary name, without having to create it as a WP post?
I would like all this to be self-contained in the plugin, so should not involve the administrator having to create posts or pages, or have to add anything to the theme.
Ideally I would avoid any URLs that go into the wp-admin directory. End users don't belong in here.
I would strongly suggest referring to https://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side
You need to have a php script in your plugin directory that returns what you request, and you need to determine that url at run time for reference in your ajax. The above link gives an example for enqueuing and using wp_localize_script() to provide the url for your custom php script.
wp_enqueue_script( 'ajax-script',
plugins_url( '/js/my_query.js', __FILE__ ), array('jquery') );
// in JavaScript, object properties are accessed as
// ajax_object.ajax_url, ajax_object.we_value
wp_localize_script( 'ajax-script', 'ajax_object',
array( 'ajax_url' => plugins_url( '/php/myapi.php' ));
Your javascript file will be included on every page and will listen for events on the page which require a block of HTML, as you've described it.
Your file myapi.php then needs to take a request, probably using a query string, get the appropriate content from the wordpress api, and respond with said content, which your javascript will put into place.
To have access to the wordpress api as well though, you have two options:
Force wordpress to run starting with your file, by including wp-load.php. This is probably not the cleanest way.
Set up a custom page or slug to direct to your plugin.
I would advise the second option, and advise a slug, in which case you may find this post helpful: wp_rewrite in a WordPress Plugin
From Jason's comment, based on the link above:
The rewrite rules are mentioned a lot, but are really a distraction -
they just help to make URLs look more "friendly", which was not an
objective here. The key is: register a custom GET parameter; look for
that parameter early in the page rendering process; if you find the
parameter is set, then output/echo stuff and die(). There are a
number of hooks that can be used to look at the parameters, chosen
dependin on how much you want WP to set up and process first.
I'm trying to get browser-sync to work with my multipress wordpress install, for simpler mobile / responsive development.
Currently I'm having problems in that, my normal development takes place at local.example.com, and browser-sync is proxying this (via 123.456.78.9:3202, as per browser sync).
So far browser-sync loads the site, but none of my scripts or CSS are loading (although images load fine). They jsut fail with no response in the network panel.
I'm using NGINX for hosting the site, as opposed to apache.
Does anyone have any wordpress browser-sync experience? Am I missing something with the browser-sync set up? And tips for this would be super welcome. I'd love to get this as a solid part of my work flow.
The problem is to do with how wordpress handles URLs, in that it normally uses full URLs for including content and links etc.
The proxy is trying to access these on another domain and that's why it's failing.
Update
A much simple, cleaner and maintainable strategy, that also helps with development environments is to use the Root Relative URLs plugin. Adds hooks and configs similar to below, but also updates your content and editors to apply the same structure, so it's a bit more robust
Original Answer
You can add a simple hook (source: wordpress relative urls) to filter wordpress generated urls and remove the base domain so you get relative links to styles and posts etc:
$relative_url_filters = array(
'script_loader_src', //js
'style_loader_src', //css
'post_link', // Normal post link
'post_type_link', // Custom post type link
'page_link', // Page link
'attachment_link', // Attachment link
'get_shortlink', // Shortlink
'post_type_archive_link', // Post type archive link
'get_pagenum_link', // Paginated link
'get_comments_pagenum_link', // Paginated comment link
'term_link', // Term link, including category, tag
'search_link', // Search link
'day_link', // Date archive link
'month_link',
'year_link'
);
foreach ( $relative_url_filters as $relative_url_filters ) {
add_filter( $relative_url_filters, 'wp_make_link_relative' );
}
Which should clean up most of your issues and get browser-sync working nicely.
I'm still having some issues where I have more complex inclusions for images, but more or less it's working and we're already seeing how cool it is!
I have a client who is interested in having a text-only view of their website available to visitors with accessibility needs. This would be in addition to the usual, fully themed view.
I like what the Kennedy Center did for text-only view, www.kennedy-center.org/text. I like how it appears to the user as a subdirectory, but I am trying to figure out how to accomplish that in WordPress. Two themes? Subdirectory? Session cookie? Intercepting the URL and loading different stylesheets?
Any suggestions or any built-in capability that anyone can suggest?
Thanks...
...Allen
A very fast way to go is to set a cookie and a GET variable.
Basic example:
In function.php:
if (isset($_GET['text'])) {
setcookie("is_text", 'true', time()+60*60*24*365*10,"/");
}
In header.php:
if (isset($_COOKIE['is_text'])||isset($_GET['text'])) {
// text CSS stylesheet
} else {
// standard CSS stylesheet
}
So you can switch the view in every page just by adding ?text to your url.
Try to use Theme Switcher plugin.
See here for the demo: http://www.nkuttler.de/wordpress-plugin/theme-switch-and-preview-plugin/