¿Quieres mostrar contenido exclusivo para tus usuarios logueados?. En este tutorial te voy a explicar cómo crear zonas privadas en WordPress con Gutenberg sin necesidad de utilizar ningún plugin.
Insertando el código PHP
Lo primero que deberemos hacer es insertar el código PHP que encontraras más abajo. Para no perder el código en futuras actualizaciones del tema podemos hacer varias cosas.
Podemos crear un child theme de nuestro tema, si no sabes como hacerlo haz click aquí.
Una vez creado deber ir a apariencia/editor de archivos del tema, seleccionar el child theme en el selector y pegar el código al final del archivo functions.php.
La otra opción es utilizar plugins como code snippets o wpcode y pegar el mismo código dentro del body.
El código a insertar es el siguiente:
function cwpai_create_private_block() {
register_block_type('cwpai/private-block', array(
'editor_script' => 'cwpai-private-block-editor',
'render_callback' => 'cwpai_render_private_block',
));
}
add_action('init', 'cwpai_create_private_block');
function cwpai_enqueue_private_block_assets() {
wp_enqueue_script(
'cwpai-private-block-editor',
get_template_directory_uri() . '/assets/js/private-block-editor.js',
array('wp-blocks', 'wp-element')
);
}
add_action('enqueue_block_editor_assets', 'cwpai_enqueue_private_block_assets');
function cwpai_render_private_block($attributes, $content) {
if (is_user_logged_in()) {
return $content;
} else {
return __('Este contenido es para usuarios logueados en la web.', 'text-domain');
}
}
function cwpai_contenido_privado_shortcode($atts, $content = null) {
if (is_user_logged_in()) {
return '<div class="private-content">' . do_shortcode($content) . '</div>';
} else {
return __('Este contenido es para usuarios logueados en la web.', 'text-domain');
}
}
add_shortcode('contenidoprivado', 'cwpai_contenido_privado_shortcode');
Personalizar el mensaje de la zona restringida
Por defecto, el mensaje que aparece a los usuarios no logueados es «Este contenido es para usuarios logueados en la web.». Si queremos personalizarlo deberemos modificar el texto que hay dentro del return en las líneas 20 y 27.
Si lo que queremos es dar estilos CSS al mensaje lo que podemos hacer es meter el mensaje dentro de una etiqueta div y aplicarle una clase y luego aplicarle a la clase los estilos CSS que queramos. Estos estilos los podemos definir en apariencia/personalizar/CSS adicional.
return __('<div class="personalizar">Este contenido es para usuarios logueados en la web.</div>', 'text-domain');
Creando nuestra zona privada
Lo último que nos faltaría es crear la zona privada para los usuarios logueados desde el editor de Gutenberg.
Para definirla utilizaremos el siguiente shortcode y englobaremos dentro todo el contenido que queramos que este oculto para cualquier usuario que no este logueado.
[contenidoprivado] [/contenidoprivado]
A continuación tienes un ejemplo de cómo deberían estar puestos los shortcodes para definir una zona privada.
Si tienes alguna duda de los pasos a seguir también puedes darle un vistazo al siguiente video:
