Cómo crear una página de cara en Génesis con efecto Paralax

El marco de Génesis se encuentra entre los marcos más populares para el rápido desarrollo de temas de WordPress. Si es lo mejor, se excluye, no hay “mejor” cuando se trata del desarrollo de cualquier tipo. Lo que es excelente para un propósito podría ser completamente inútil para otro propósito. Pero una de las cosas buenas Génesis es que viene con muchos ganchos y filtros de acción, lo que nos permite reorganizar fácilmente los elementos en la plantilla. En este tutorial, describiré cómo crear una página principal basada en la cara basada en widgets (aunque hay otras formas de lograr esto, como ACF) y antecedentes personalizados (hechos al personalizar WordPress).
Si desea probar el código que le mostraré, necesitará un tema funcional infantil, porque aquí va todo el código con el desarrollo del tema Genesis. Al final de este tutorial, también encontrará un enlace a una demostración en vivo. Elegir el paralaje El efecto de paralaje se ha vuelto cada vez más popular en los últimos años (por una buena razón) y es una solicitud frecuente de los clientes, mientras que algunos de los mejores temas y diseños web creados en los últimos años. Incluyen diferentes tipos regulares de efectos de paralaje regularmente. Elegir es una pregunta difícil, porque si está buscando lo “mejor”, puede verse fácilmente abrumado por cientos de efectos de paralax basados ​​en jquey, javascript puro, efectos CSS puros, etc. Para mantener cosas simples, elegí un complemento de Palrallax. El complemento tiene licencia bajo la licencia MIT.
Una vez que descargamos el script, debemos ponerlo en la cola en la carpeta con el tema infantil, preferiblemente en la carpeta JS/ para mantener la jerarquía: add_action (‘wp_enqueue_scripts’, ‘gs_custom_enqueue_parallax_script’);Función gs_custom_enqueue_parallax_script () {wp_enqueue_script (‘parallax’, get_stylesheet_direction_uri (/js/parallax.min.js ‘, array (‘ jQuery ‘));} Observe que el script de Paralax depende de jquey.Registro de zonas de contenido Hay un registro predeterminado ($ args);La función de WordPress, pero Genesis ofrece Genesis_register_Debar ();función que hace lo mismo.Como se ha dicho antes, decidimos usar widgets para crear contenido en las secciones de la primera página.Depende de cuántas secciones queramos: para este propósito, grabaremos seis áreas de widgets (secciones) en la página inicial.Esto ingresaría a las funciones.php:
//* Registre las áreas widget Genesis_register> __ (‘Home Sección 1 (Paralax)’, ‘GS-Custom-theme’),); Genesis_register Home Sección 2 (sin Parallax) ‘,’ GS-Custom-theme ‘),); Genesis_register ‘3 (Parallax)’, ‘GS-Customs’),); Genesis_register Home Sección 4 (sin Parallax) ‘,’ GS-Custom-theme ‘),); Genesis_register ‘5 (Parallax)’, ‘GS-Customs’),); Genesis_register Home Sección 6 (sin Parallax) ‘,’ GS-Custom-theme ‘),);
Al registrar las opciones de personalización teniendo en cuenta que hemos decidido crear seis zonas de contenido en la página principal, también necesitaremos seis pedidos de personalización. Tres de ellos controlarán las imágenes de fondo y tres controlarán los colores de fondo. Aquí está el código: función gs_custom_theme_home_sections ($ wp_customize) {// Agregue una nueva sección al cliente $ wp_customize-> add_section (‘gs_custom_theme_front_section’, array (‘title’ => opciones para la primera página ‘,’ prioridad ‘=> 201 )); // registra tres secciones de imagen de fondo $ wp_customize-> add_setting (‘gs_custom_theme_setting_background_image_1’, array (‘default’ => “, ‘sanitize_callback’ => gs_custom_theme_sanitize_bgi ‘,); $ wp_customize-> add_control (nuevo wp_customize_image_control ($ wp_customize, ‘gs_custom_theme_background_image_1’, array (‘etiqueta’ => __ (‘imagen de fondo 1st’, ” GS-CubestomMeMe ‘) ‘=>’ gs_custom_theme_front_section ‘,’ prioridad ‘=> 15)); $ wp_customize-> add_setting (‘gs_custom_theme_setting_background_image_2’, array (‘default’ =>, ‘sanitize_callback’ => gs_custom_theme_sanitize_bgi ‘,); $ wp_customize-> add_control (nuevo wp_customize_image_control ($ wp_customize, ‘gs_custom_theme_background_image_2’, array (‘etiqueta’ => __ (‘imagen de fondo 2nd’, ” gs-cubeStom ‘____,’ sent. ‘prioridad’ =>
17))); $ wp_customize-> add_setting (‘gs_custom_theme_setting_background_image_3’, array (‘default’ => “, ‘sanitize_callback’ => gs_custom_theme_sanitize_bgi ‘,); $ wp_customize-> add_control (nuevo wp_customize_image_control ($ wp_customize, ‘gs_custom_theme_background_image_3’, array (‘etiqueta’ => __ (‘imagen de fondo 3nd’, ” gs-cubeStom ‘____,’ asentamiento ‘= settings’ = shinding ‘= stiting’ => ‘gs_custom_theme_front_section’, ‘priority’ => 19)); // registra tres secciones de color de fondo $ wp_customize-> add_setting (‘gs_custom_theme_setting_color_background_1’, array (‘default’ =>#000000 ‘,’ sanitize_callback ‘=> sanitize_hex_color’)); $ wp_customize-> add_control (nuevo wp_customize_cololor_control ($ wp_customize, ‘gs_cololor_bg_setting_1’, array (‘etiqueta’ => __ (‘color de fondo 1st’, ‘gs-cocetom’), ‘establecer’, ‘gsets’, ” section ‘ => ‘gs_custom_theme_front_section’, ‘prioridad’ => 16))); $ wp_customize-> add_setting (‘gs_custom_theme_setting_color_background_2’, array (‘default’ =>#000000 ‘,’ sanitize_callback ‘=> sanitize_hex_color’); $ wp_customize-> add_control (nuevo wp_customize_cololor_control ($ wp_customize, ‘gs_cololor_bg_setting_2’, array (‘etiqueta’ => __ (‘color de fondo 2nd’, ‘gs-cocetom’), ‘establecer’, ‘establecer’, ‘2 sección’ ‘ => ‘gs_custom_theme_front_section’, ‘prioridad’ =>
18))); $ wp_customize-> add_setting (‘gs_custom_theme_setting_color_background_3’, array (‘default’ =>#000000 ‘,’ sanitize_callback ‘=> sanitize_hex_color’)); $ wp_customize-> add_control (nuevo wp_customize_cololor_control ($ wp_customize, ‘gs_color_bg_setting_3’, array (‘etiqueta’ => __ (‘color de fondo 3rd’, ‘gs-cocetom’), ‘configuración’, ‘,’ ~.,,,,,,,,,, ‘,,’,,,,, ‘,,,’.,,,,,,,, ‘ ‘GS___ SECCIÓN’ => ‘GS_CUSTOM_THEME_FRONT_SECTION’, ‘prioridad’ => 20)); } add_action (‘personalize_register’, ‘gs_custom_theme_home_sections’); Esto es bastante simple, pero si ingresa este código en funciones.php o en otro lugar (pero en el archivo que está cargado con funciones.php), probablemente recibirá errores, porque recibirá errores, porque Debemos definir funciones personalizadas que hemos utilizado para la desinfección. . Se le habría sorprendido con qué frecuencia faltan los controles de personalización personalizados, incluso cuando hablamos de temas premium. Por el contrario, no puede encontrar un tema sin desinfectar funciones en el directorio de temas de WordPress.org, porque cuando revise los temas, será una de las primeras cosas que los revisores verificarán.

No creo que tengamos que explicar por qué la higiene es importante, pero dada la apariencia de la plantilla, necesitamos funciones de higiene para imágenes y colores. Para los colores, podemos usar la función WordPress incorporada Sanitize_Hex_Color (String $ Color), mientras que para las imágenes de fondo, podemos usar una verificación de MIME simple: function gs_custom_theme_sanitize_bgi ($ imagen, $ configuración) {$ mimes = array (‘jpg | jpeg | jpeg | jpeg | jpeg | jpeg | jpeg | jpeg | | jpe ‘=>’ Image/jpeg ‘,’ gif ‘=>’ image/gif ‘,’ png ‘=>’ image/png ‘,’ bmp ‘=>’ image/bmp ‘,’ tif | tiff ‘= > ‘Image/tiff’, ‘ICO’ => ‘Image/X-icon’); $ file = wp_check_filetype ($ imagen, $ mimes); return ($ archivo [‘ext’]? $ Imagen: $ setting-> predeterminado); } Creación de la plantilla para la primera página la plantilla para la primera página -front -page.php en nuestro caso -es la plantilla utilizada cuando la configuración> leer -> visualización de la página principal (aunque hay otras formas de lograr esto, pero No son importantes en este momento). Y aquí llegamos al paso final de este tutorial: tenemos que poner las áreas de widgets y los controles de personalización en acción. Pero antes de hacer esto, reorganicemos un poco los elementos, eliminemos el marcado predeterminado y la función de gancho en el génesis_after_header () de acción de acción.
Remove_action (‘Genesis_loop’, ‘Genesis_do_loop’); Remove_action (‘Genesis_after_heer’, ‘Genesis_do_nav’); add_action (‘Genesis_heer_right’, ‘Genesis_do_nav’); add_filter (‘genesis_markup_site-inner’, ‘__return_ull’); add_filter (‘Genesis_markup_Content-sideBar-Wrap_output’, ‘__return_false’); add_filter (‘genesis_markup_content’, ‘__return_ull’); add_action (‘Genesis_after_heer’, ‘gs_custom_theme_home_content_sections’); Eche un vistazo al ejemplo de cómo podríamos usar los colores e imágenes establecidos en la personalización: $ background_image_url = get_theme_mod (‘gs_custom_theme_setting_background_image_1’); Echo ‘
‘; if (is_active_sidebar (‘home-1’)) {dynamic_sidebar (‘home-1’); } Echou ‘
‘; $ en segundo plano_cololor_one = get_theme_mod (‘gs_custom_theme_setting_color_background_1’); echo ‘<div class = "Parallax-Window" style = "Background-Color:'. {Dynamic_sidebar ('home-2');} eco '
';
Entonces, la idea es almacenarlos primero en variables y luego usarlas como estilos en línea. Además, eche un vistazo a la propiedad de la velocidad de datos, viene con parallax.js y cambia la velocidad del efecto de paralaje. Si coloca diferentes números en diferentes secciones, puede obtener efectos más hermosos. Finalmente, este es el código completo para nuestra plantilla front-Page.php: <
; if (is_active_sidebar ('home-1')) {dynamic_sidebar ('home-1'); } Echou '
'; $ en segundo plano_cololor_one = get_theme_mod ('gs_custom_theme_setting_color_background_1'); echo '<< div class = "Parallax-Window" style = "Background-Color:'.) {Dynamic_sideBar ('Home-2');} Eco '
'; $ Background_Image_Url2 = get_theme_mod ('gs_custom_theme_setting" 0.5 " ″ Data-parallax = "Scroll" data-image-src = "'. if (is_active_sidebar ('home-3')) {dynamic_sidebar ('home-3'); } Echou '
'; $ en segundo plano_cololor_two = get_theme_mod ('gs_custom_theme_setting_color_background_2'); echo '<< div class = "Parallax-Window" style = "Background-Color:'.) {Dynamic_sidebar ('home-4');} eco '
'
; $ en segundo plano_image_url3 = get_theme_mod ('gs_custom_theme_setting_background_image_3'); Echo '<
'; If (is_active_sidebar (' home-5 '))) {Dynamic_sidebar ('Home-5');} Eco '
'; << div class = "Parallax-Window" style = "Background-Color: '. If (is_active_sidebar ('home-6')) {dynamic_sidebar ('home-6'); } Echou '
'; } Génesis (); Cualquier otra cosa se trata de estilizar y agregar/eliminar contenedores y CSS. Si desea ver todo esto en acción, aquí hay una demostración bastante simple o puede descargar el código fuente y jugar con él: Demo Live | El código fuente depende de usted: ¿Cuál es su efecto de paralaje favorito? ¿Prefieres COD o complementos personalizados?