I am working on an existing Wordpress site that uses a Divi child theme with the editor creating layouts with the Visual Editor. The client wants to develop a Gatsby site with data from a GraphQL layer provided by the wp-graphql plugin.
When I access the REST API response for the pages that use these Divi layouts I get pure HTML for content and excerpts etc. However, when I access the GraphQL editor and make the same request using a GraphQL statement the content comes back with the Raw Divi shortcodes surrounded by one div tag.
My Graphql query is
query MyQuery {
posts {
nodes {
content(format: RENDERED)
}
}
}
And it returns
{
"data": {
"posts": {
"nodes": [
{
"content": "<div class=\"et-l et-l--post\">\n\t\t\t<div class=\"et_builder_inner_content et_pb_gutters3\">\n\t\t[et_pb_sectionfb_built=”1″ fullwidth=”on” _builder_version=”4.6.6″ background_enable_image=”off”][et_pb_fullwidth_image.......
Where is should be returning just html as the api does:
<div class=\"et-l et-l--post\">\n\t\t\t<div class=\"et_builder_inner_content et_pb_gutters3\">\n\t\t<div class=\"et_pb_section et_pb_section_0 et_pb_fullwidth_section et_section_regular\" >\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t<div class=\"et_pb_module et_pb_fullwidth_image et_pb_fullwidth_image_0\">
I have enabled the shortcodes to be rendered with the solution Why Divi shortcodes don't render in wp-json?. Any idea how I enable the shortcodes to be rendered in Graphql? Or if there is a setting or code I am missing in Divi?
Related
I am maintaining a MeteorJS web app and I need to add some specific meta tags into homepage.
I see that there is a head.html in the project that has all information, including
the existing og meta tags, I tried to add the specific meta tag there and restarted the server.
If I right click view source on the homepage, I can see the newly added meta tag.
However, if I try to use Facebook debugger to see what the FB Crawler sees, the newly added meta tag is not seen by the bot. In fact the bot sees some additional twitter meta tags that does not exist anywhere in the project.
Investigating further, I noticed the project uses a library called
manuelschoebel:ms-seo: https://github.com/DerMambo/ms-seo
This library is initialised in the Meteor.startup like this:
Meteor.startup(function() {
if(Meteor.isServer){
if(Meteor.DEBUG){
robots.addLine('Disallow: /');
}
robots.addLine('Disallow: /admin');
}
if(Meteor.isClient){
// default SEO
return SEO.config({
title: '...',
meta: {
"description": "..."
},
og: {
'image': '....'
}
});
}
Now I am guessing this SEO library is the reason why the bot does not see the newly added meta tag in the head.html.
What is the right way to add the newly meta tag in a clean way? why is this SEO library not respecting the head.html in the project?
I am trying to pull out a page via the WordPress API like so:
/wp-json/wp/v2/pages/MY_PAGE_ID?status=publish
However the page was built using the Divi Page Builder module and includes the various Divi tags in the content such as:
[et_pb_section fb_built=”1″ _builder_version=”4.6.0″ _module_preset=”default” module_alignment=”center” min_height=”627px” custom_padding=”||1px|||”]
I was wondering if there was a way of ensuring that the WordPress API can compile/render the full HTML generated by these tags before it's sent back via JSON to my front-end application?
Thanks very much for your time
Looks like shortcodes.
You could try to work with apply_filters()
Source: https://developer.wordpress.org/reference/hooks/rest_post_dispatch/
To filter the shortcodes to actual HTML use the do_shortcode() function.
Source: https://developer.wordpress.org/reference/functions/do_shortcode/
I'm currently working on a custom post type and want to be able to edit the archive page from Wordpress with a page template. So I created the CPT called 'cars' and created a page template with template name: 'Cars overview'. Next i create a page inside WordPress and choose the template page 'Cars overview' and gave it the URL: mywebsite.com/cars/
Now the problem is that the slug 'mywebsite.com/cars/' is already in use by the custom post type itself causing the page to load the custom post type loop instead of the page template loop. So I can't edit the title, content etc inside WordPress. I could change the url of the page, but i want to be able to control the overview page in WordPress.
Long story short: How can I create a page template that is using the same URL as the custom post type archive page?
Thanks in advance!
One simple solution, simply disable the archive where you create your custom post type:
register_post_type("cars", array("has_archive" => false));
Another approach rather then disabling the archiving and adding another page to show the cars. Changing the archive template used by your theme might be a better option.
First step is to find the template currently in use by your theme, copy it to your plugin file and you can change the template file to whatever you like. You can find more information about it here.
The only thing you need to do is point WordPress to the right direction:
add_filter("archive_template", "archive_template");
function archive_template($archive_template) {
global $post;
if ($post->post_type == "cars")
{
$archive_template = "path/to/your/template.php";
}
return $archive_template;
}
Disabling the archive and creating one manually seems a bit strange to me. And I always replace the archive page and sometimes single page from our theme (usually the7).
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
I am trying to get Wordfaire live blogging embed code to work on my site and having some problems. I created a new page for my live blog feed on site site and added the embed code to the html page in wordpress. When I test it out and try a test live blog nothing runs on the page.
Is there a trick to getting it to work on wordpress??
Thanks in advance to anyone that can assist!
It sounds to me that you are using the HTML view of the WordPress editor to paste the embed code, correct?
A better way would be to make a simple plugin that will create a shortcode with the embed code, then you use that shortcode to display the embed code on your page.
Example:
embed-shortcode-plugin.php
<?php
/*
Plugin Name: Plugin Name
Plugin URI: http://pluginurl.com
Description: Plugin description
Version: 1.0
Author: Author Name
Author URI: http://authorurl.com
*/
function embed_shortcode($atts,$content=null){
extract(shortcode_atts(array('optionname'=>'defaultvalue'),$atts));
// The extract() function above will allow you to do [shortcode optionname="defaultvalue"] in your pages and use $optionname to get the value below
// The extract() line is optional and can be removed
// $optionname = defaultvalue
return 'put your embed code here';
}
add_shortcode('shortcode','embed_shortcode');
// This will add the shortcode 'shortcode': [shortcode], change to whatever
?>
Put that in your plugins folder and then activate it. Alternatively, you could remove the stuff between the /* and */ and put that code right in your theme's functions.php file and it will run the same.