Closed axelverglas closed 6 months ago
Hello @gregrickaby do you have any solution ?
@axelverglas Yes, there is a way!
I copied the method from my Next.js WordPress Plugin, and turned it into a function you could drop into functions.php
. If you already use the Next.js WordPress Plugin, you'll need to edit that to point at the preview route of your front-end.
/**
* Customize the preview button in the WordPress admin.
*
* This function modifies the preview link for a post to point to a headless client setup.
*
* @param string $link Original WordPress preview link.
* @param WP_Post $post Current post object.
* @return string Modified headless preview link.
*/
function set_headless_preview_link( string $link, WP_Post $post ): string {
// Set the front-end preview route.
$frontend_preview_route = 'http://localhost:3000/preview';
// Update the preview link in WordPress.
return add_query_arg(
esc_url_raw( "{$frontend_preview_route}/{$post->ID}" )
);
}
add_filter( 'preview_post_link', 'set_headless_preview_link', 10, 2 );
add_filter( 'rest_prepare_page', 'set_headless_rest_preview_link', 10, 2 );
add_filter( 'rest_prepare_post', 'set_headless_rest_preview_link' , 10, 2 );
Good luck! 🍻
Hello,
I installed the plugin and added this in the functions.php of my theme but neither works I even have a blank page when I add this in the function.php in the page to write or modify an article
Hello @gregrickaby do you have any news for this ?
@axelverglas Be aware you need to modify the code posted by @gregrickaby to make it work in your specific case.
The adjusted code in my case looks like this:
add_filter( 'preview_post_link', 'set_headless_preview_link', 10, 2 );
function set_headless_preview_link( string $link, WP_Post $post ): string {
// Set the front-end preview route.
$frontendUrl = HEADLESS_URL;
$frontend_preview_route = "$frontendUrl/preview";
// Update the preview link in WordPress.
return add_query_arg(
[ 'secret' => HEADLESS_SECRET ],
esc_url_raw( esc_url_raw( "{$frontend_preview_route}/{$post->ID}" ))
);
}
function set_headless_rest_preview_link( WP_REST_Response $response, WP_Post $post ): WP_REST_Response {
// Check if the post status is 'draft' and set the preview link accordingly.
if ( 'draft' === $post->post_status ) {
$response->data['link'] = get_preview_post_link( $post );
return $response;
}
// For published posts, modify the permalink to point to the frontend.
if ( 'publish' === $post->post_status ) {
// Get the post permalink.
$permalink = get_permalink( $post );
// Check if the permalink contains the site URL.
if ( false !== stristr( $permalink, get_site_url() ) ) {
$frontendUrl = HEADLESS_URL;
// Replace the site URL with the frontend URL.
$response->data['link'] = str_ireplace(
get_site_url(),
$frontendUrl,
$permalink
);
}
}
return $response;
}
Hello @Bjornnyborg, I tried like you and like @gregrickaby but it still doesn't work I adapted I replaced the variables with mine I have the plugin installed and the theme I put what you said in the functions.php but nothing works...
Hello, There is no way to change the preview link directly in WordPress to access the preview for article ?