Next Plugin guidance / loop through pages and read static property - next.js

I'm evaluating next.js for a project. We need to translate the route urls, so for
example.com/about-us becomes example.com/ueber-uns in German
Basically I can acheive this with rewrites and redirects. However it is tedious to set this up manually, so I though about writing a plugin. However I haven't found any docs regarding plugin development or a public API for plugin developers. Does such exist?
(1) add a static property to my pages inside the pages folder
const SomePage: React.FC = () => {
static i18nRoutes = { de: "ueber-uns" }
return "About us"
}
(2) Inside a plugin iterate over all pages, read the static i18nRoutes prop and add rewrite and redirect rules, so if the next project is generated for the German language, example.com/ueber-uns points to example.com/about-us
What I would like to know, besides existing plugin documentation, is how I can achieve the second point?

Related

Wordpress/Redirection plugin - how to redirect migrated blogger=>Wordpress.com `?m=1` links?

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>

how to hide a page from being seen in wordpress backend and frontend

In my plugin i have created a custom template that prints a requested sidebar. and for running the code of this template i assigned a custom page to it (by calling update_metadata) .
Is it a good idea for getting content of a specific sidebar into Ajax call ?
Now my problem is that WORDPRESS shows it in the dashboard and front page , and after searching i have not found any easy to understand solution for Hiding a page completely so only can be accessed by its id .
Can any one tell me how to do that ?
you are going about this the wrong way. You can create a function that can create anything that can be created on a wordpress page.
But if you really must you can create a page outside of the database, etc:
add_action('init', 'add_rewrite_rule');
function add_rewrite_rule(){
// add_rewrite_rule(REGEX url, location, priority (i.e. top is before other rewrite rules)
// I created a custom post type for this plugin called market -- replace post_type with whatever you want
//basically tell wordress to add a query var if sidebar is added to url.
add_rewrite_rule('^sidebar?','index.php?is_sidebar_page=1&post_type=market','top');
}
// register a query var
add_action('query_vars','market_set_query_var');
function market_set_query_var($vars) {
array_push($vars, 'is_sidebar_page');
return $vars;
}
// associate a template with your quer_var
add_filter('template_include', 'market_include_template', 1000, 1);
function market_include_template($template){
if(get_query_var('is_sidebar_page')){
$new_template = (theme or plugin path).'/pages/yourpage.php'; // change this path to your file
if(file_exists($new_template))
$template = $new_template;
}
return $template;
}
This will not be a page that will be in the admin section or in any query that relates to pages but someone could of course navigate to this page. But as i said above you would be better to create a function to create your sidebar. If you want a seperate file to handle the "view" you use require_once 'filename'; a file and keep your functions area free of html.
If you are creating functions in a wordpress plugin dont forget many functions may not be available until later in the load process. Use add_action() if you run into any undefined functions
edit:
you are loading wordpress before you get to the template so you have all the functions. (google wp load for more info) + get_header() / get_footer() will also load a few things like css, etc. I had a small typo in the code above, fixed that but basically what you are doing is telling wordpress if someone lands on www.example.com/sidebar to apply a query_var (rewrite rule). Wordpress will look up its saved vars (final function) and return the template assoc. The 2nd function just registers the var.
You also have wp_functions in any file you create and include in a plugin, etc hence why you can create a file that does exactly the same as this page.

Wordpress + angularJS route + SEO

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

Magento: Fishpig/Wordpress extension not parsing local.xml on Post pages

So I setup Fishpigs Wordpress extension about a month ago on my Magento site and all was working well. Somewhere, somehow in the last week the formatting went haywire. Tracking down what went wrong, I found that the post pages stopped using my custom .phtml layout ('wordpress.phtml'). All other wordpress related pages use the template properly though.
I had added
<wordpress_default>
<reference name="root">
<action method="setTemplate"><template>page/wordpress.phtml</template></action>
</reference>
</wordpress_default>
in my local.xml and all was good. Today I even tried setting all the layouts in the extension settings and same deal, only the post page isn't rendering the correct layout. This is a strange problem, I'm not sure where to start looking...
I see three possibilities here (assuming you've already performed the holy rite of clearing your cache storage)
The request for the post page isn't loading your local.xml file, possibly because its using a different theme and/or design package
The post page isn't issuing the wordpress_default handle, so although your local.xml file is being included, your setTemplate action is never called
There is a layout update that's called after your layout update (either via XML or directly in PHP code) which sets the root template to something else.
Investigate each of these three items and you should find your answer.
Regarding choice #3, I don't have an installation with the FishPig extension installed and haven't used it extensively, but it looks like the extension does some jiggery pokery in ViewController.php to automatically set the template to page/1column.phtml if the wordpress page object (? I don't know what this is) has a field set to 'onecolumn' or '1column'.
parent::loadLayout($handles, $generateBlocks, $generateXml);
if ($this->_getPage()) {
$keys = array('onecolumn', '1column');
$template = $this->_getPage()->getCustomField('_wp_page_template');
foreach($keys as $key) {
if (strpos($template, $key) !== false) {
if ($rootBlock = $this->getLayout()->getBlock('root')) {
$rootBlock->setTemplate('page/1column.phtml');
}
break;
}
}
}
I'd start looking there.

Change management in WordPress

I have a beginner question. What is the best way to address the change management issues in WordPress? I have an all-pages WordPress installation. Suppose name of some event or an entity changes from A to B, then I have to go to all the pages to make that change. Is there any better way of doing it? Like externalization or something.
Or the way similar to how WordPress handle blog name using bloginfo() function. You change blog name at one place and it is reflected everywhere.
Thanks,
Paras
If a URL on your site changes, it is always wise to leave a redirect to the new page. This will help your visitors and search engines. If you create redirects, it doesn't matter too much if you still have a link to the old address in one of your posts. There will probably be a plugin for this, but I don't know which one.
If you really want to keep all links pointing to the latest version, you could replace them with shortcodes that are evaluated to the real URL. <a href="[linkto postid=123]"> would then result in <a href="/2010/08/05/some-post">. I think this is doable, but I don't know whether a plugin already exists for this.
You can also use this technique to replace short snippets, like your company name. The Shortcode API is really easy:
// [company_name]
function replace_company_name($atts) {
return "My Awesome Company";
}
add_shortcode('company_name', 'replace_company_name');
// More generic
// [replace r='company_name']
// [replace r='company_motto']
function do_replacement($atts) {
$replacements = array(
'company_name' => 'My Awesome Company',
'company_motto' => 'A Company so Awesome even you would want to work here!',
);
return $replacements[$atts['r']];
}
add_shortcode('replace', 'do_replacement');
You can hardcode the strings in your plugin code, or you could create a Wordpress options page where users can add and edit new shortcodes.

Resources