< Tu wordpress a medida />

Cómo añadir las opciones de entrada y metadatos de OceanWP en tus CPT

Cuando creamos un Custom Post Type usando la plantilla OceanWP seguramente queremos que nos aparezcan los ajustes de entrada que vienen con este theme y así crear a nuestro gusto cada página o post.

Para poder usar estos ajustes en cada página o entrada de nuestro CPT tenemos que añadir este código en el archivo functions.php

Cambia la palabra videos por el nombre exacto de tu Custom Post y conseguirás que aparezcan estos ajustes.

/**
* Añade Ocean Setting Metabox en tus Custom Post Type
*/
function oceanwp_metabox( $types ) {

// Tu Custom Post Type
$types[] = 'videos';

return $types;

}
add_filter( 'ocean_main_metaboxes_post_types', 'oceanwp_metabox', 20 );

Ahora por otro lado, si lo queremos es que en nuestros nuevos posts aparezca la barra de metadatos con el autor, fecha, categorías, comentarios…

… tendrás que editar de nuevo el archivo functions.php y añadir este código.

function OWP_CPT_entry_meta() {

    global $post;
    if ($post->post_type == "videos") {
      ?>

      <ul class="meta clr">

            <li class="meta-author"<?php oceanwp_schema_markup( 'author_name' ); ?>><i class="icon-user"></i><?php echo the_author_posts_link(); ?></li>

            <li class="meta-date"<?php oceanwp_schema_markup( 'publish_date' ); ?>><i class="icon-clock"></i><?php echo get_the_date(); ?></li>

            <li class="meta-cat"><i class="icon-folder"></i><?php echo get_the_term_list(get_the_ID(), 'temas', '', ', ', ''); ?></li>

            <li class="meta-comments"><i class="icon-bubble"></i><?php comments_popup_link( esc_html__( '0 Comentarios', 'oceanwp' ), esc_html__( '1 Comentario',  'oceanwp' ), esc_html__( '% Comentarios', 'oceanwp' ), 'comments-link' ); ?></li>

      </ul>

      <?php
    }

}
add_filter('ocean_blog_entry_meta','OWP_CPT_entry_meta');

function OWP_CPT_single_meta() {

    global $post;
    if ($post->post_type == "videos") {
      ?>

      <ul class="meta clr">

            <li class="meta-author"<?php oceanwp_schema_markup( 'author_name' ); ?>><i class="icon-user"></i><?php echo the_author_posts_link(); ?></li>

            <li class="meta-date"<?php oceanwp_schema_markup( 'publish_date' ); ?>><i class="icon-clock"></i><?php echo get_the_date(); ?></li>
<li class="meta-cat"><i class="icon-folder"></i><?php echo get_the_term_list(get_the_ID(), 'temas', '', ', ', ''); ?></li>

            <li class="meta-comments"><i class="icon-bubble"></i><?php comments_popup_link( esc_html__( '0 Comentarios', 'oceanwp' ), esc_html__( '1 Comentario',  'oceanwp' ), esc_html__( '% Comentarios', 'oceanwp' ), 'comments-link' ); ?></li>

      </ul>

      <?php
    }

}
add_filter('ocean_blog_single_meta','OWP_CPT_single_meta');

Aquí tendrás también que cambiar videos por el nombre de tu CUSTOM POST TYPE.

y además en estas dos líneas…

<li class="meta-cat"><i class="icon-folder"></i><?php echo get_the_term_list(get_the_ID(), 'temas', '', ', ', ''); ?></li>

…donde dice temas, lo cambiarás por el nombre de la categoría que has usado en tu CPT, así conseguirás que se muestre la taxonomía propia de este Custom.

¿Has tenido problemas para implementarlo? Si tienes cualquier problema, escríbenos.

Sin comentarios

Como eliminar la categoría principal en tu URL y usar solo el nombre de las subcategorías

Uno de los factores más importantes en SEO es cuidar de tus urls y que estas sean lo más amigables posible y además, que no se extiendan de longitud.

Si necesitas usar solo el nombre de las subcategorías ya que estas llevan la palabra clave, necesitas usar este código en tu functions.php:

Eso eliminará la categoría principal de tu slug.

//Eliminar permalink categorías cuando hay subcategorías
add_filter( 'post_link', 'remove_parent_category', 10, 3 );
function remove_parent_category( $permalink, $post, $leavename )
{
    $cats = get_the_category( $post->ID );
    if ( $cats ) {
        usort( $cats, '_usort_terms_by_ID' );
        $category = $cats[0]->slug;
        if ( $parent = $cats[0]->parent ) {
            // Find parent categories and replace them in the link
            $parentcats = get_category_parents( $parent, false, '/', true );
            $permalink = str_replace( $parentcats, '', $permalink );
        }
    }
    return $permalink;
}

Recuerda que si ya tenías creadas las URL desde hace tiempo, tendrás que crear redirecciones para no perder SEO, por ejemplo con el plugin Redirection.

Sin comentarios

Cómo crear menús dinámicos con CSS3

Os enseñamos código CSS con el que podrás hacer atractivos y dinámicos menús para tu web. Con este sencillo efecto mejorarás el diseño y creatividad de tu página.

Pasa el ratón con encima de cada ítem del siguiente menú y verás el efecto vamos a conseguir:

Este es el código que debes añadir en tu archivo CSS si quieres usar este hover. Puedes modificar el color, el grosor, el tiempo de ejecución… etc


nav a:before {content:"";
display:block;
position:absolute;
left:0;
bottom:0;
height: 2px;
width:0;
background:#017BA3;
-webkit-transition:width .20s;
-moz-transition:width .20s;
-ms-transition:width .20s;
-o-transition:width .20s;
transition:width .20s;
}

nav a:hover:before {width:100%;
}

 

Sin comentarios

Como eliminar la caja de autor de las entradas en Genesis

Para eliminar la caja de autor en los posts o entradas de Génesis tan solo tienes que añadir este código en tu functions.php

//* Eliminar autor en las entradas de Genesis
remove_action( 'genesis_after_post', 'genesis_do_author_box_single' );
//* Remove the author box on single posts HTML5 Themes
remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );

Si has tenido algún problema para eliminarlo ponte en contacto con nosotros.

Sin comentarios

Como añadir correctamente nuevos archivos CSS y JS en cualquier theme de WordPress

Aunque hay muchas maneras de añadir un nuevo archivo CSS o JS en nuestra instalación de WordPress. Esta que os muestro en la más correcta.

Para ello editamos el archivo functions.php,

y para añadir un nuevo CSS esta sería la función correcta, en este caso estamos añadiendo un archivo CSS nuevo que no teníamos, que es Font-Awesome.

function ecw_enqueue_style(){
	
wp_enqueue_style( 'fontawesome', get_template_directory_uri().'/assets/css/font-awesome.min.css');
wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array('font-awesome'), 'all');

}
add_action('wp_enqueue_scripts','ecw_enqueue_style');

Ejecutamos la función de WordPress wp_enqueue_style y usamos get_template_directory_uri para indicarle donde está el archivo.

Luego añadimos en la línea de nuestro style.css que ya teníamos el array(‘font-awesome’), así le decimos que es prioritario cargar este nuevo archivo antes.

Con esto, ya tendríamos añadido nuestro CSS nuevo correctamente.

Ahora añadimos un nuevo archivo JS, esta es la función:

function ecw_enqueue_script(){

wp_enqueue_script( 'functions-script', get_template_directory_uri().'/assets/js/functions.js', array('jquery'), 1, true);
wp_enqueue_script( 'main-script', get_template_directory_uri().'/assets/js/main.js', array('functions-script', 'jquery'), 1.0, true);

add_action('wp_enqueue_scripts','ecw_enqueue_script');

}

Ejecutamos la función de WordPress wp_enqueue_script, luego la damos un nombre (el que tú quieras) y con get_template_directory_uri le decimos donde se encuentra el archivo. Después aparece el array de prioridad de carga, la versión de este JS y un booleano con true o false para indicarle si carga en el footer o en la cabecera. True indicaría que se carga en el footer, esta es la opción más óptima.

Recuerda que en el caso de Javascript, WordPress ya viene con las librerías de JS más usadas por defecto, aquí las puedes consultar.

Sin comentarios

¿Qué archivos puedes y debes bloquear desde .htaccess?

Es importante para la seguridad de tu WordPress que utilices el archivo .htaccess para bloquear accesos a archivos importantes de tu instalación y que podrían estar en el punto de mira de posibles hackeos.

¿Qué archivos puedes bloquear desde htaccess?

Bloquea archivos de la carpeta wp-includes para evitar que los usuarios puedan inyectar código malicioso en sus archivos.

# Bloquea wp-includes 
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^wp-admin/includes/ - [F,L]
RewriteRule !^wp-includes/ - [S=3]
RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]
RewriteRule ^wp-includes/js/tinymce/langs/.+\.php - [F,L]
RewriteRule ^wp-includes/theme-compat/ - [F,L]
</IfModule>

Deshabilita el archivo wp-config donde hay demasiada información sensible sobre nuestra instalación

#Deshabilitar el archivo wp-config
<files wp-config.php>
order allow,deny
deny from all
</files>

Deshabilita el propio archivo htaccess  para que no puedan inyectar reedirecciones

#Deshabilitar el archivo htaccess
<files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
satisfy all
</files>

Y, aunque esto sucedía en versiones más antiguas de WordPress, sigue evitando también la navegación por directorios de tu sitio

#Deshabilita la navegación por directorios de tu sitio
Options All -Indexes
Sin comentarios

Como hacer que los adjuntos del formulario de Elementor lleguen a tu email

El plugin de Elementor PRO tiene un widget muy útil que es el formulario, pero, si este formulario contiene adjuntos, estos adjuntos llegan a tu servidor y lo que hace el plugin es enviarte un email con un enlace para descargar este archivo adjuntado.

adjunto

Si lo que quieres es que el documento o archivo adjunto llegue directamente a tu email y no se almacene en tu servidor. Tienes que añadir este código a tu functions.php

Para ver este contenido tienes que ser Usuario Premium, puedes Suscribirte aquí para acceder al contenido premium, descargas y soporte por solo 3.99€/mes

Si ya eres usuario
Sin comentarios

¿Cómo solucionar el aviso “Served Scaled Image” de GTmetrix?

Si estás midiendo la velocidad de tu página web a través de gtmetrix.com y te aparece la advertencia o error “Served Scaled Image”, tu web está perdiendo tiempo de carga por culpa de las imágenes. Aquí te explico que significa este error y como solventarlo.

servescaled

Served Scaled Image, lo que realmente quiere decir es que tú estás subiendo imágenes de, por ejemplo (como ves en la imagen), 1600×700 píxeles y WordPress las está redimensionando en los tamaños que necesita el theme o plugin que estés usando, por ejemplo en este caso 322px x 141px. Este proceso, obviamente, hace ralentizar el tiempo de carga de tu web.

La Solución para Served Scaled Image

Lo que tienes que hacer es que WordPress pueda crear una imagen en ese tamaño para que no tenga que redimensionarla.

Accede al escritorio WordPress > Ajustes > Medios y crea la miniatura que GTmetrix haya indicado en el error. Como ves en el ejemplo de la imagen, en este caso sería (322x141px).

Tamaño miniatura

Una vez guardados los cambios, aún no se habrá solucionado, esto es porque cuando añades los nuevos tamaños, estos se aplicarán únicamente en las imágenes que subas a partir de este momento.

Para poder redimensionar las imágenes anteriores, instala y activa este plugin Regenerate Thumbnails.

Ahora en tu escritorio Herramientas > Regenerate Thumbnails, haz clic en el botón Regenerate Thumbnails for All Attachments.

Ahora sí, habrás solucionado el problema Served Scaled Image, si no es así ponte en contacto con nosotros y vemos tu caso.

Sin comentarios

Añadir Código de Analytics en functions.php excluyendo usuarios logueados o administradores

Como ya sabes, hay muchas formas de añadir el código de seguimiento de Google Analytics en tu página web: Mediante un plugin, añadiendo el script en el header.php y la manera menos conocida, añadiendo el script en functions.php.

Aquí vemos como hacerlo de esta última manera, en la que además, te permite no rastrear las visitas que se hagan cuando un usuario está logueado en nuestra página web.

Añade este código en tu functions.php y ya tendrás implementado Google Analytics sin rastrear las visitas logueadas.

/* Añadir código Analytics excluyendo users */
add_action('wp_head', 'ecw_analytics_code');
function ecw_analytics_code(){
if(is_user_logged_in()==false) { ?>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXX-1');
</script>
<?php  }
};

Si lo que quieres es que no rastree las visitas únicamente de usuarios administradores usa este otro código.

/* Añadir código Analytics excluyendo admin users */
add_action('wp_head', 'ecw_analytics_code');
function ecw_analytics_code(){
if ( !current_user_can('administrator') ){ ?>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXX-1');
</script>
<?php  }
};

Date cuenta que tienes que cambiar dos veces el UA que aparece en el código A-XXXXXXX-1, por el tuyo propio.

Si tienes cualquier duda sobre esto no dudes en escribirme

Sin comentarios

Mostrar un aviso solo para Internet Explorer

Vamos a crear un topbar o barra superior con un aviso que se mostrará solo en usuarios que accedan desde Internet Explorer. Esto nos servirá para avisar a los navegantes que, por ejemplo, nuestra web no es compatible con este navegador.
error-internet
Para ello, añade este código en el archivo functions.php de tu WordPress

Para ver este contenido tienes que ser Usuario Premium, puedes Suscribirte aquí para acceder al contenido premium, descargas y soporte por solo 3.99€/mes

Si ya eres usuario
Sin comentarios