FullPage.js e integración avanzada de campos personalizados

FullPage.js es una biblioteca gratuita de JavaScript, basada en JQuey, que ofrece (como su nombre lo sugiere) la capacidad de crear sitios web muy atractivos, dinámicos y receptivos en toda la pantalla. La biblioteca fue creada por el desarrollador español Álvaro Trigo y es utilizada por algunas de las marcas más importantes del mundo. La biblioteca en sí es muy fácil de usar, incluso si para algunas personalizaciones y cambios tiene que pasar por el código. Pero todo está “donde debería estar” y bien comentado. Dada la popularidad del complemento avanzado de campos personalizados y la forma en que la biblioteca funciona, especialmente el menú y las secciones, estaba pensando en encontrar una manera fácil de crear todas las secciones en una sola página utilizando el campo Repetidor, al tiempo que permite a las personas agregar nuevos elementos de menú Fácilmente, sin la necesidad de conocimientos de programación. El código que creé es realmente fácil y muy diferente de otros temas, aunque no me importaba mucho buscar si alguien tenía la misma idea sobre la integración de ACF/FullPage.js. Tenga en cuenta que el campo Repetidor es parte de ACF Pro, lo que significa que tendrá que pagar algo de dinero por ello.
¿Necesita ayuda con su tema de WordPress?¡Contrata a Bruno Kos y deja que haga su magia para ti!Cree una página vacía. Creé este tema solo para ser utilizado como una apariencia de página completa, utilizando la biblioteca.Por lo tanto, se han omitido algunas cosas de WordPress bastante estándar, como el índice estándar.No se preocupe: WP_head () y WP_Footer () están incluidos.El código es realmente mínimo, mientras que CSS ha sido tomado del tema de veintisiete dieciséis.También agregué una cantidad menor de mi propio CSS, pero el diseño en general no es importante en este tutorial, porque es probable que cualquiera use este tema para diseñar sus propias cosas.
Por lo tanto, aquí está la oferta -Cree una página vacía y asegúrese de configurarla como una página estática en el menú Configuración -> Leer. Este es nuestro punto de partida y sin él, no funcionará. Agregar los scripts de segundo paso es agregar scripts para que funcionen con nuestro tema de WordPress: puede descargar el último fullpage.js del sitio web oficial. La inclusión es bastante estándar: add_action (‘wp_enqueue_scripts’, ‘bbird_scroller_scripts’); Function bird_scroller_scripts () {wp_enqueue_style (‘básico-css’, get_stylesheet ()); wp_enqueue_style (‘font-awseome’, get_stylesheet_directory_uri (). ‘/css/font-wesome.min.css’); wp_enqueue_style (‘fullPage-CSS’, get_stylesheet_direction_uri (). wp_enqueue_script (‘fullPage-JS’, get_stylesheet_direction_uri (). wp_enqueue_script (‘fullPage -itialize’, get_stylesheet_directory_uri (). }
Además de Font Awesome, incluí mi diversión, estoy seguro de que verá el Script FullPage.initialize.js, lo llegaremos más tarde.Creación de menús y cursos de Walker personalizados Si verifica el menú generado por la biblioteca FullPage.js en su sitio demostrativo, busque algunos atributos de datos personalizados, a saber, Data Menuchor, que está conectado a las secciones (páginas en la pantalla completa) a través del amplificador de datos. atributo.Esta es la forma en que funciona la navegación FullPage.js.Dado que los atributos de datos personalizados al momento de escribir este artículo aún no se implementan en los menús de WordPress, tendremos que crear uno de mis favoritos en todo el ecosistema de WordPress: Walker Custom Class.Eliminé la clase de todos los comentarios y así es como se ve:
[código lang = ‘php’] función increment () {static $ i = 1;devuelve $ i ++;} Clase BBird_Scroller_Walker extiende Walker_Nav_Men {function Start_el (& $ output, $ item, $ profundidad = 0, $ args = array (), $ id = 0) {$ indent = ($ profundidad)?str_repeat (“t”, $ profundidad): “;$ classes = vacía ($ artículo-> clases)?Array (): (matriz) $ item-> classes;$ class [] = ‘Artículo-Menu-‘.$ Artículo-> ID;$ args = apply_filters (‘nav_men_item_args’, $ args, $ item, $ profundidad);$ class_names = Join (”, Apply_filters (‘Nav_men_css_class’, array_filter ($ classes), $ item, $ args, $ profundidad));$ class_names = $ class_names?’class = “‘. Esc_attr ($ class_names). ‘”‘: “; $ id = APLICE_FILTERS (‘NAV_MEN_ITEM_ID’, ‘Menu -item-‘. $ item-> id, $ itm, $ args, $ profundidad); $ id = $ id? ‘id?’. esc_attr ($ id). ‘”‘:”; $ slider_value = ‘slide’. aumento (); $ exit. = $ sandent.
‘; $ Atts = array (); $ atts [‘title’] =! vacía ($ item-> attr_title)? $ Item-> attr_title: “; $ ATTS [‘Target’] =! Vacío ($ Artículo-> Target)? $ item-> Target: “; $ Atts [‘rel’] =! vacía ($ item-> xfn)? $ Artem-> xfn: “; $ atts [‘href’] =! vacío ($ artículo-> url)? $ Artículo-> url: “; $ ATTS = APLICE_FILTERS (‘NAV_MENU_LINK_ATTRIBUTES’, $ ATTS, $ ITM, $ args, $ profundidad); $ attribute = “; foreach ($ atts como $ attr => $ valor) {if (! vacía ($ value)) {$ value = (‘href’ === $ attr)? Esc_url ($ valor): esc_attr ($ valor); $ atributo. = ”. $ ATR. ‘= “‘. $ valor. ‘”‘;} $ title = Aplicle_filters (‘the_itle’, $ itm-> title, $ itm-> id);; title. $ args-> link_after; $ item_output. = “; $ Elemento / código] No encontrará muchos cambios aquí, pero con una excepción – la función de incremento (). ¿Qué hace? Esta es una función extremadamente simple que agrega incrementos para cada nueva “diapositiva” – – – Esto fue preferencia a mi persona personal simplemente para mantener todo el código limpio. Puede usar cualquier otro nombre en lugar de “diapositiva”, incluso si no veo el propósito de cambiarlo.
Entonces, examinemos solo la parte donde agregamos un incremento: $ slider_value = ‘slide’.crecimiento ();$ salida. = $ sangr.Como puede ver, hemos creado solo una nueva variable ** $ slider_value ** que se utiliza para nuestro atributo personalizado.Finalmente, también debemos registrar un menú: // registrar la función de menús de navegación bbird_scroller_register;registro_nav_menus ($ ubicaciones);} add_action (‘init’, ‘bbird_scroller_register_menus’);
La página completa se inicializa. Esto también es bastante simple, y el propósito de esta inicialización es en realidad (al menos lo que creo que es) es que puede anular fácilmente todas las configuraciones entregadas con la biblioteca, sin tener que anular el archivo básico., Que se actualiza bastante regularmente. Este es solo uno de los muchos ejemplos sobre cómo puede verse nuestra función de inicialización: jQuery (documento) .Ready (function ($) {$ (‘#fullPage’). FullPage ({// menú de navegación: ‘#meniu’ // Agregue más anclajes si es necesario, pero creo que 10 serán adecuados para la mayoría de los proyectos de anclaje: [‘Slide1’, ‘Slide2’, ‘Slide3’, ‘Slide4’, ‘Slide5’, ‘Slide6,’ Slide7 ‘,’ Slide8 ‘, ‘Slide9’, ‘slide10’], navegación: ‘correcto’ ‘, navigaretooltips: [‘ home ‘,’ sobre ‘,’ cartera ‘,’ slide4 ‘,’ slide5 ‘,’ slide6 ‘,’ slide7 ‘,’ slide8 ‘ , ‘Slide9’, ‘slide10’], showActivetOltip: false, // scrolling css3: true, scrollingspeed: 700, autoscroling: true, fitSection: true, fitSectionDelay: 1000, barra de coches: falso, // keyboardscolling de accesibilidad: true, // Control de diseño: Verdadero, Paddingto: ‘3em’, Paddingbottom: ’10px’, fijaciones: ‘#Header, .footewidth: 0, ResponseVechet: 0,};});

Si verifica el archivo básico, encontrará todas estas opciones, pero hay una que está particularmente interesada en el ancla (un poco más) y navegartototips (poco menos). Sin estos anclajes, nuestro menú no funcionaría, para que el visitante pudiera ejecutar las páginas solo con el mouse o la rueda de teclado. Por lo tanto, debemos agregar más anclajes: para este propósito, hemos agregado 10 de ellos, que creo que son suficientes para la mayoría de los proyectos, aunque puede agregar más si es necesario. Pero dudo seriamente que tendrá 15, 20 o más elementos de menú: páginas. Cuando se trata de navegación de comodidades, son simplemente los títulos que aparecen sobre los botones de navegación (usted también puede desactivarlos) y, como tal, no son importantes para esto. tutorial. JavaScript anterior está en el archivo fullPage.initialize.js al que llamé a través de la función bbird_scroller_scripts (). Creando el campo repetitivo ACF y el submarino aquí, nos encontramos con la idea principal: campos repetitivos para generar páginas de páginas completas. También grabamos varios otros campos dentro de nuestra repetición, uno para la imagen de fondo, uno para el título y otro para el texto. Para mantener el breve tutorial, le proporcionaré el archivo de exportación ACF al final de este artículo, pero así es como se ve la estructura, incluso los valores predeterminados funcionan, por lo que no hay nada espectacular aquí. Es libre de cambiar la apariencia de estos campos como lo desee, pero no cambie los nombres de los campos, a menos que los cambie en el código.
Plantilla index.php Como mencioné anteriormente, este tema no debe usarse para nada más fuera de la configuración de ACF, por lo tanto, todo el código es index.php, incluso si pudo haber estado en la plantilla de página personalizada. Examinemos el código (a los efectos del artículo, hemos eliminado algunos elementos estándar, que puede encontrar en la zip completa bajo el artículo): ‘; el fin de los tiempos; Else: // no se encontraron líneas endif; ? Además, tenga en cuenta que cada sección utilizará la imagen de fondo agregada al repetidor. En el front-end, se ve, puede agregar cuántos campos de repetidor desea, creando cuántas secciones de página completa desea:
Los menús finales y la demostración, incluso si puede crear una apariencia de página completa sin un menú (y este es a menudo el caso), creo que el menú fue una parte muy importante. La adición de elementos del menú es fácil y se basa en anclajes (que establecemos a medida que inicializamos nuestro propio conjunto de funciones) y atributos de datos personalizados. En nuestro ejemplo particular, esto debería mostrar la estructura del menú, permitiendo el desfile suave entre páginas:
Por supuesto, todo esto no tendría sentido si no puede verlos en acción o sin la posibilidad de descargar todos los archivos, así que asegúrese de verificar los siguientes enlaces:

Manifestación
Descarga el tema

Exportar archivo ACF