Si eres nuevo en WordPress y estás en el proceso de crear tu primer sitio web profesional, definitivamente querrás leer este artículo. Este artículo trata sobre cómo configurar un control deslizante de publicación fija sin un complemento.
Obviamente, lo primero que usted o cualquier otra persona debe preguntar es por qué deberíamos hacerlo manualmente cuando podemos usar complementos para lo mismo.
Bueno, la mayoría de los complementos funcionan sin problemas la mayor parte del tiempo, pero dado que la mayoría de ellos son complementos de terceros, no puede confiar en ellos todo el tiempo.
Siempre es bueno hacerlo manualmente, pero el problema es que debe estar bien versado en HTML, CSS3, PHP, etc. Si es bueno codificando, ciertamente puede configurar su propio control deslizante de publicación fija que muestra su postea a la perfección.
Simplemente siga las instrucciones que se enumeran a continuación para la carta y debería poder iniciar sus controles deslizantes de publicaciones fijas en muy poco tiempo.
Tenga en cuenta que cualquier cambio que realice puede perderse después de actualizar WordPress, por lo que siempre recuerde guardar los cambios a medida que los realiza.
Una de las razones por las que es posible que desee elegir un control deslizante de publicación fija en lugar de publicaciones fijas es porque la versión actual de WordPress distrae demasiado de las últimas publicaciones.
Por lo tanto, es una buena idea poner publicaciones fijas como un control deslizante en lugar de usar la versión actual, y esto hará que sea más fácil para los usuarios revisar diferentes publicaciones en su sitio, desde aquellas marcadas con una publicación fija hasta las más nuevas.
Paso para agregar el control deslizante Sticky Post en WordPress sin complemento
MooHerramientas y novatoSlide
Para los fines de esta publicación, usaría principalmente noobslide, pero los trucos que se enumeran a continuación también se pueden usar junto con otros controles deslizantes.
Y dado que vamos a utilizar noobslide, deberá incluir la biblioteca MetoolsJavascript. Simplemente vaya al archivo functions.php en su plantilla y agregue los códigos que ve a continuación, eso es todo.
function register_custom_js() {
wp_register_script( 'mootools', 'http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js', '1.3.0' );
wp_register_script( 'noobslide', get_bloginfo('template_directory') . '/_class.noobSlide.packed.js' , array( 'mootools' ) );
}
add_action( 'init', 'register_custom_js' );
function enqueue_noobslide() {
if ( is_home() ) { // our slider only appear in the home page, so load the script only in home page
wp_enqueue_script( 'noobslide' );
}
}
add_action( 'wp_print_scripts', 'enqueue_noobslide' );
Miniaturas
Y dado que vamos a usar miniaturas de publicaciones, puede agregar lo mismo a su tema si no es lo mismo. Simplemente siga los códigos que se enumeran a continuación y eso debería ser suficiente.
function custom_theme_setup() {
add_theme_support( 'post_thumbnails' );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );
Enlace personalizado Leer más
Es cierto que su sitio de WordPress ya tiene un enlace «leer más» decente, pero es un cliché y se abusa de él, por lo que podría considerar configurar su propio CTA personalizado para leer más.
Esto debería resultar en una mayor participación de sus sitios y más clics. Simplemente siga el código que se indica a continuación. Lo primero que debe hacer es ir a su archivo functions.php y sacar esa línea del mismo.
//add_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' );
Now, you need to add the following codes in its place to create your own custom read more ‘link’.
function custom_excerpt_with_more( $excerpt ) {
if ( has_excerpt() && ! is_attachment() ) {
global $post;
return $excerpt . '<p class="slider-more"><a>ID ) . '">Continue reading</a></p>';
}
return $excerpt;
}
add_filter( 'get_the_excerpt', 'custom_excerpt_with_more' );
function custom_excerpt_more( $more ) {
global $post;
return '<p class="slider-more"><a>ID ) . '">Continue reading</a></p>';
}
add_filter( 'excerpt_more', 'custom_excerpt_more' );
Y recuerda que la función custom_excerpt_with_more () apunta a esos fragmentos que se consideran automáticos o especificados por el usuario con la etiqueta de leer más.
CSS y JavaScript
Ahora llegamos a toda la parte importante donde estamos agregando CSS y Javascript a la página functions.php; este paso es necesario si desea que funcione el control deslizante de publicación fija. Simplemente siga los códigos mencionados a continuación y copie y pegue lo mismo en su archivo functions.php.
function custom_slider_css_js() {
if ( is_home() ) { // only in home page
#slider{border:1px solid #ccc;width:640px;position:relative;overflow:hidden;height:213px;margin-bottom:20px;}
#mask{position:absolute;height:213px;}
.items{float:left;height:213px;width:640px;position:relative;}
.items .wp-post-image {float:left;}
.info{width:320px;float:left;font-family:Arial, Helvetica, sans-serif;}
#content .info h2{font-size:20px;font-weight:bold;color:#1c3f95;margin:10px 10px 15px 10px;}
#content .info p{font-size:11px;color:#1c3f95;line-height:16px;margin:10px;}
.info a{font-size:10px;padding:5px 7px;background:#e1e1e1;text-decoration:none;text-transform:uppercase;font-weight:bold;color:#1c3f95;}
.info a:hover{color:#ffffff;background:#1c3f95;}
#slider .handle{position:absolute;bottom:0;right:5px;line-height:10px;text-align:center;font-size:25px;font-weight:bold;}
.handle a{color:#ccc;height:20px;width:20px;display:inline-block;cursor:pointer;}
.handle .active{color:#1c3f95;}
.handle a:hover{color:#1c9f65;}
/**/
}
}
add_action('wp_head', 'custom_slider_css_js' );
Modificación del tema de WordPress
Ahora podemos modificar el tema de WordPress para incluir los códigos del control deslizante. Tenemos que ir al archivo de bucle, o en este caso el archivo llamado loop.php.
Encuentre el archivo para su tema y una vez que lo haya encontrado, desplace el cursor sobre el área del bucle e ingrese los códigos para su control deslizante como se muestra a continuación.
$sticky ) );
have_posts()): $count = 0; ?>
<div id="slider">
<div id="mask">
have_posts() ): $slider->the_post(); $count++; ?>
<div class="items">
<div class="info">
<h2></h2>
</div>
</div>
</div>
<div class="handle">
0; $count--):
<a>•</a>
</div>
</div>
Ya casi hemos terminado: todo lo que necesita hacer es consultar su sitio web para ver si el control deslizante de publicaciones fijas funciona.
Si desea realizar cambios adicionales, puede hacerlo fácilmente: simplemente ingrese el código requerido y debería ser. Hay una cosa más que debemos hacer y es deshacernos de las publicaciones adhesivas habituales.
La idea general de configurar un control deslizante de publicación fija era no distraerlo de las últimas publicaciones enumeradas en su sitio.
Y es por eso que debemos eliminar la variante anterior de inmediato, solo siga los códigos a continuación y eso debería ser suficiente por ahora.
$sticky ) ); have_posts()): $count = 0; ?> <div id="slider"> <div id="mask"> have_posts() ): $slider->the_post(); $count++; ?> <div class="items"> <div class="info"> <h2></h2> </div> </div> </div> <div class="handle"> 0; $count--): ?> <a>•</a> </div> </div> query, array( 'post__not_in' => $sticky ) ); query_posts( $args );
Ahora debería poder disfrutar del control deslizante de publicación adhesiva de WordPress completamente funcional; Con este control deslizante, su página de inicio debería verse menos abarrotada y definitivamente sobresalir por las razones correctas.
Recuerde que también puede realizar cambios similares con otros temas y controles deslizantes. Como resultado de este control deslizante, debería poder obtener más tracción en línea que nunca, lo que a su vez debería generar más tráfico y un mejor SEO.
