Nuevo para usted: el marco de WordPress Evolution

Ha aparecido un nuevo marco temático de WordPress, y en este artículo, nos gustaría darle una mirada en profundidad. Para los desarrolladores de temas, Evolution WordPress Framework ofrece muchas ventajas. Los blogueros y otros propietarios de sitios disfrutarán del diseño moderno y limpio.

Introducción al marco de WordPress Evolution

Una captura de pantalla de la página de demostración de Evolution

Tenía la idea de crear un marco perfecto para la construcción de nuevos temas durante mucho tiempo. Hay algunas cosas que fueron especialmente importantes para mí durante el desarrollo:

  • Evitando errores en las actualizaciones
  • Rendimiento absoluto
  • Basado enteramente en Ganchos de acción de WordPress
  • Un diseño limpio y contemporáneo
  • Actualizaciones automáticas a la WordPress
  • Un soporte óptimo para WooCommerce
  • Diseño Mobile First
  • Compatibilidad óptima con el tema del niño
  • Código abierto y gratuito

En un año de desarrollo, logré lograr todo lo anterior y estoy orgulloso de eso. El resultado es un hermoso, rápido y seguro tema, que también se puede utilizar fácilmente como un tema orientado a blogs.

Pero los verdaderos méritos de Evolution WordPress Framework están ocultos bajo el capó.

La propensión a errores del desarrollo de temas estándar

Todos los desarrolladores conocen este problema: cuando se usa una combinación de tema padre / hijo para el desarrollo de un sitio web, la propensión a errores de las actualizaciones del tema padre aumenta drásticamente.

A menudo, los archivos de plantilla del tema principal se colocan en la carpeta del tema secundario y luego se editan. Sobrescribir plantillas es una práctica común cuando se trata de Desarrollo de WooCommerce también.

Ésta es la raíz de la susceptibilidad. Con lanzamientos más importantes, WooCommerce falla en los archivos de plantilla obsoletos en la carpeta del tema, que deberá ajustar a mano.

Un tema estándar de WordPress no tiene esa función. Si hay conflictos aquí, pueden resultar en páginas blancas, debido a errores importantes. Pero no tiene por qué ser así. ¡Así no es como se hace el desarrollo de temas modernos!

Evolución: desarrollo de temas con enlaces de acción de WordPress

Automattic es un ejemplo para todos los desarrolladores, con un amplio uso de la Ganchos de acción de WordPress en el popular complemento WooCommerce, así como el tienda temática Escaparate.

Todo mi framework de WordPress Evolution se basa en estos Action Hooks, ya que brindan ventajas increíbles. Una vez que haya comprendido su funcionalidad, estará convencido de que no hay mejor manera de desarrollar temas.

Echemos un breve vistazo a index.php de Evolución:

Índice de evolución.php. Los ganchos sin prioridades están disponibles gratuitamente para usted.

Por cierto, la evolución está muy bien documentada., ya que cada archivo de plantilla se refiere a los ganchos utilizados y los archivos que debe buscar para la revisión.

Aquí el index.php es un sustituto de todos los archivos de plantilla. Todos usan los Action Hooks – do_action( 'evolution_do_main' );, en este caso. Todas las funciones relevantes se guardan y se muestran en este Action Hook.

¿No sabes cuál es la ventaja? Hay dos.

  • Seguridad de actualización completa
  • Infinitas posibilidades para el desarrollo de temas.

Miremos más de cerca:

Trabajar con el marco de WordPress Evolution

Si desea reelaborar un tema en cada página de su sitio web, debe lanzar un montón de plantillas de su carpeta de tema principal a la carpeta de tema secundario.

Todo lo que necesito son dos archivos. El functions.php y el style.css del tema hijo. Estos dos archivos me permiten reelaborar un tema completo. Y ni siquiera es difícil; Usted puede hacerlo también. Sin embargo, lo más importante es la seguridad de la actualización de un tema.

La seguridad de actualización absoluta de Evolution

Al desarrollar un tema hijo a partir de un tema padre, se utilizan dos versiones de una función. Una es la función en el tema principal y la otra es la versión sobrescrita del tema secundario. En muchos casos, esto no termina bien.

Ya lo he experimentado antes. La evolución es algo completamente diferente. No necesita cambiar los archivos de plantilla, ya que solo necesita guardar una nueva función en el Action Hook.

Un ejemplo: cambiar el formulario de comentarios

El archivo de plantilla comments.php le lleva a la carpeta correcta y al archivo con las funciones utilizadas en el comments.php.

La ruta del archivo sería la siguiente: /inc/structure/markup/evolution-comments.php

Allí encontrarás la siguiente función:

<?php

if ( ! function_exists( 'evolution_comment_form' ) ) :
/**
 * Outputs the custom comment form
 * 
 * @hooked into evolution_comments() action
 * 
 * @since 1.0.0
 */
function evolution_comment_form() {
    
    global €post;

    €commenter = wp_get_current_commenter();
    €req = get_option( 'require_name_email' );
    €aria_req = ( €req ? " aria-required='true'" : '' );

    comment_form(
        array(
            'comment_field' => '<textarea id="comment" class="plain buffer" name="comment" rows="7" placeholder="' . esc_attr( __( 'Please be kind. Thank You!', 'evolution' ) ) . '" aria-required="true"></textarea>',
            'fields' => array(
                'author' => '<div class="form-areas"><input id="author" class="author" name="author" type="text" placeholder="' . esc_attr( __( 'Your Name', 'evolution' ) ) . '" value="' . esc_attr( €commenter[ 'comment_author' ] ) . '" ' . €aria_req . '>',
                'email' => '<input id="email" class="email" name="email" type="text" placeholder="' . esc_attr( __( '[email protected]', 'evolution' ) ) . '" value="' . esc_attr( €commenter[ 'comment_author_email' ] ) . '" ' . €aria_req . '>',
                'url' => '<input id="url" class="url" name="url" type="text" placeholder="' . esc_attr( __( 'Your Website', 'evolution' ) ) . '" value="' . esc_url( €commenter[ 'comment_author_url' ] ) . '"></div>'
            )
        ),
        €post->ID
    );
}
endif;

El gancho crítico también se puede encontrar en el archivo.

<?php

add_action( 'evolution_do_comments', 'evolution_comment_form', 40 );

Por cierto, el 40 se refiere a la denominada prioridad. Controla la visualización de la función. Cuanto menor sea el número, antes se mostrará la función en la plantilla.

Funciones de eliminación y reemplazo

Ahora, si desea reconstruir el formulario de comentarios, lo primero que debe hacer es eliminar la función original. Cargue, desbloquee y elimine la función. Siempre.

<?php

remove_action( 'evolution_do_comments', 'evolution_comment_form', 40 );

Como la función ya no existe, no puede haber problemas con una actualización. Si no está ahí, no puede causar problemas.

Ahora, escribe tu nueva función con el Estándares de codificación de WordPress en mente. No utilice etiquetas de WordPress obsoletas y asegúrese de que la función sea «conectable».

Las funciones conectables utilizan una pequeña consulta antes de ejecutar la función.

<?php

if ( ! function_exists( 'evolution_comment_form' ) ) :

// Your Function

endif;

Traducción: si la función aún no existe, ejecútela. Esta es una cantidad necesaria de protección contra nombres de funciones duplicados.

Por lo tanto, su función para el formulario de comentarios se vería así:

<?php

if ( ! function_exists( 'your_comment_form' ) ) :
/**
 * Outputs the custom comment form
 * 
 * @hooked into evolution_comments() action
 * 
 * @since 1.0.0
 */
function your_comment_form() {
    
// Your new function
}
endif;

Ahora, configure su función en lugar de la versión anterior antes de que muriera 🙂

<?php

add_action( 'evolution_do_comments', 'your_comment_form', 40 );

Ahora, se muestra su nuevo formulario de comentarios y las actualizaciones del tema principal no causarán ningún problema, ya que su función es la única que queda.

De esta manera, puede cambiar rápidamente cualquier función y cualquier marcado de contenido, sin tener que temer tener problemas. Y sobre todo: sin tocar un solo archivo de plantilla. Todo lo que necesita hacer es tener en cuenta las prioridades correctas para asegurarse de que la pantalla sea correcta.

Adición de funciones adicionales a los ganchos de acción

Captura de pantalla del single.php de Evolution Framework

Si desea agregar funciones adicionales a las plantillas individuales, como el single.php por ejemplo, eso también es bastante fácil de hacer. Obtenga una breve descripción general de las prioridades y luego cree su función. Se toman las prioridades 5, 10 y 30.

En este ejemplo, puede agregarlo antes del ciclo con la prioridad 8. De esta manera, se muestra después del marcado de apertura y antes del ciclo real. Si desea mostrarlo después del bucle, asigne una prioridad entre 11 y 29.

<?php

    if (!function_exists( 'your_function' ) ) :
/**
 * An additional function in the display of the single.php
 * 
 * @hooked evolution_do_single()
 */
function your_function() {

    // Your function - displayed after the actual loop with the priority 15 
    // With priority 8 it is displayed before the loop 
}
add_action( 'evolution_do_single', 'your_function', 15 );
endif;

Crear nuevas plantillas también es muy fácil

Por supuesto, de esta manera, también puede desarrollar plantillas completamente nuevas. Para una página de destino estática, por ejemplo. Crea un archivo de plantilla llamado template-frontpage.php. Introduzca la siguiente:

<?php /* Template Name: landingpage */


/**
 * Here, you can add all functions 
 */ 
do_action( 'evolution_do_frontpage' );

Ahora, agregue contenido usando el tema de su hijo. functions.php. Las prioridades le permiten controlar la pantalla. Comience con el marcado de apertura. Si desea utilizar el marcado de Evolution, su gancho se ve así:

<?php

add_action( 'evolution_do_frontpage', 'evolution_top_markup', 5 );

Después de eso, puede agregar una función o un bucle con la prioridad 10, y así sucesivamente … Al final, debe agregar el marcado de cierre.

Los ganchos tomados se pueden encontrar aquí: /inc/structure/evolution-hooks.php.

De esta forma, podría intercambiar el tema principal contenido completo sin ningún problema de actualización. Los sitios web existentes simplemente se mostrarían de manera diferente. ¿Guay, verdad?

El rendimiento del marco de WordPress Evolution

Evolution fue desarrollado para la máxima velocidad, ya que ni a Google ni a sus visitantes les gustan los sitios web lentos. Una optimización para tiempos de carga realmente rápidos comienza con el código del tema.

Este es también el cuello de botella de muchos temas polivalentes. Debido a la gran cantidad de funciones, la mayoría de las cuales ni siquiera se utilizan, el código fuente está inflado y se deben cargar docenas de archivos de estilo y script.

Todo eso ralentiza un sitio web. La evolución se reduce a lo esencial. Si desea más, instale los complementos correspondientes. En el caso de un cambio de tema, esto también es una ventaja, ya que todas las funcionalidades que le gustan permanecen.

Prueba de velocidad de evolución

La posición inicial:

  • Una instalación nueva sin complementos de desaceleración (solo Yoast SEO, no complemento de almacenamiento en caché!)
  • Usando un archivo .htaccess óptimo
  • Utilizando el Complemento de código limpio AH (desactiva los enlaces de encabezado, incrustaciones, cadenas de consulta y emojis)

El resultado es claro:

Se midió la segunda corrida.

Evolution WordPress Framework: soporte para WooCommerce

¿Qué es un marco temático sin el soporte del popular complemento de comercio electrónico WooCommerce? Por cierto, WooCommerce también funciona con Action Hooks. Por lo tanto, no hay razón para copiar las plantillas del complemento en el tema hijo para reescribirlas. Y esta es la raíz de muchos problemas con WooCommerce.

Puede eliminar rápidamente las funciones de complementos existentes y reemplazarlas por las suyas.

Ejemplo de barra lateral de WooCommerce:

En los dos archivos de plantilla de WooCommerce más copiados: archive-product.php y single-product.php -, encontrará el siguiente gancho de acción:

Al mismo tiempo, verá la función que está enganchada en el gancho. Esta es la base para los próximos trabajos. Ahora, registre una barra lateral para widgets y asígnele el nombre «Barra lateral de WooCommerce». Asigne el ID »woocommerce«.

<?php

if (!function_exists( 'evolution_woo_sidebar_init' ) ) :
/**
 * Registering a new sidebar exclusively for the shop pages 
 */
function evolution_woo_sidebar_init() {

    register_sidebar( array(
        'name'          => esc_html__( 'WooCommerce Sidebar', 'evolution' ),
        'id'            => 'woocommerce',
        'description'   => esc_html__( 'This is the sidebar for your WooCommerce shop.', 'evolution' ),
        'before_widget' => '<aside id="%1€s" class="widget %2€s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h4 class="widget-title">',
        'after_title'   => '</h4>',
    ) );
}
add_action( 'widgets_init', 'evolution_woo_sidebar_init' );
endif;

Crea un nuevo archivo llamado sidebar-woocommerce.php. El contenido de ese archivo podría verse de la siguiente manera:

<?php
/**
 * The sidebar containing the woocommerce widget area.
 *
 * @package Evolution Framework
 */
if (   ! is_active_sidebar( 'woocommerce' ) ) {
    return;
}
?>
<?php // Important: copy the HTML containers from your sidebar.php ?>
<div id="secondary" class="sidebar-area" role="complementary">

    <div class="normal-sidebar widget-area">

        <?php if ( is_active_sidebar( 'woocommerce' ) ) : ?>

        <?php dynamic_sidebar( 'woocommerce' ); ?>

        <?php endif; ?>

    </div><!-- .normal-sidebar -->

</div><!-- #secondary -->

Ahora se pone serio: elimine la función WooCommerce

<?php

remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );

Ahora, conecte su nueva barra lateral a la woocommere_sidebar gancho.

<?php

/**
 * Get the special sidebar for the WooCommerce Templates
 * 
 * @overrides the woocommerce function
 * 
 */
function evolution_woocommerce_sidebar() {
    
    get_sidebar( 'woocommerce' );
    
}
add_action( 'woocommerce_sidebar', 'evolution_woocommerce_sidebar', 10 );

Ahora tiene una nueva barra lateral en todas las páginas de WooCommerce, sin tener que tocar un solo archivo de plantilla. Esto funciona para todas las funciones de WooCommerce. Eche un vistazo a las plantillas (woocommerce/templates/), busque el Action Hook y simplemente intercambie las funciones.

Por cierto: Las paginas carro y verificar no son páginas de WooCommerce, sino páginas de WP normales. Esto significa que el normal la barra lateral del blog se muestra en ellos. Puede cambiar eso usando el nosidebar.php plantilla, o el complemento Widgets de visualización AH. El complemento le permite influir en la visualización de ciertos widgets en páginas específicas.

|

Conclusión

Desarrollar temas modernos de WordPress nunca ha sido tan fácil. La seguridad, la claridad y las infinitas opciones de actualización están unidas en el marco de WordPress Evolution. Además de eso, está la alta velocidad. ¿Qué más se puede pedir?

#Nuevo #para #usted #marco #WordPress #Evolution

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.