Share
¿Alguna vez has querido acelerar el proceso de desarrollo de temas? Supongo que la respuesta es "sí" y ya sabes sobre Bootstrap y lo usas en maquetas para el desarrollo. Esto plantea la pregunta: "¿Cómo se pueden integrar los componentes de Bootstrap en un tema de WordPress?"
Esta serie de tutoriales cubrirá la integración de los componentes más populares de Bootstrap en un tema de WordPress. Comencemos con el componente Navbar que permite crear fácilmente una barra de navegación sensible. Para mantener este tutorial fácil de seguir, tomaré una barra de navegación que consta de solo un logotipo y un menú..
Si necesita hacer esto de manera rápida y confiable, puede encontrar un montón de expertos en Bootstrap y WordPress en Envato Studio que pueden ayudarlo..
Bootstrap expertos en Envato Studio Aquí está el código fuente de la página de documentación de Bootstrap:
Echemos un vistazo más de cerca al código y aclaremos las cosas para una mejor comprensión de la siguiente parte del tutorial.
Envoltura - una etiqueta con la clase "barra de navegación" y función "navegación" envuelve todo el contenido de la barra de navegación.
...
Encabezamiento - una Botón de activación - una Marca - un enlace con el logo; Es opcional, puedes omitirlo aquí e incluirlo en otro lugar.. Contenido plegable - una Menú - una Este paso asume que ya tiene WordPress instalado y que el tema que está desarrollando se ha activado.. Abre tu funciones.php Archiva y registra tu navegación si aún no lo has hecho.. Registre los archivos bootstrap y jQuery: Descargar Edward McIntyre's Navegue a su sitio de Wordpress back-end Apariencia-> Menú. Crea un nuevo menú llamado "Primario" y agrégale elementos. Ir a la pestaña Administrar ubicaciones y para la ubicación del tema llamada "Primaria", asigne el menú "Primaria". Guardar cambios. Abre tu header.php y copie y pegue la maqueta de la barra de navegación en el lugar donde desea que aparezca. Ahora reemplazamos partes de la maqueta con las funciones de plantilla de WordPress. En primer lugar colocar el enlace correcto para el logotipo. Cambia esta línea: a: El siguiente paso es dar salida al menú desde el back-end del menú de maquetas. Para estas líneas: Con: Ahora tienes un componente de barra de arranque integrado en tu tema. En este tutorial hemos estudiado cómo integrar una barra de navegación creada con el marco CSS de Bootstrap en un tema de WordPress. Para acelerar el desarrollo del tema, simplemente puede descargar los archivos de origen y pegarlos en su tema. También puede encontrar algunos de los mejores temas y plantillas de Bootstrap en Envato Market, como la plantilla de administrador Neon Bootstrap o la plantilla de correo electrónico de Selphy Electronics.. que representa contenido colapsado en pantallas pequeñas; Este botón es imprescindible, pero puedes cambiar el contenido dentro de él..Marca
...
2. Integrar la maqueta en una plantilla.
2.1. Prepare su tema para el menú
función wpt_register_js () wp_register_script ('jquery.bootstrap.min', get_template_directory_uri (). '/js/bootstrap.min.js', 'jquery'); wp_enqueue_script ('jquery.bootstrap.min'); add_action ('init', 'wpt_register_js'); función wpt_register_css () wp_register_style ('bootstrap.min', get_template_directory_uri (). '/css/bootstrap.min.css'); wp_enqueue_style ('bootstrap.min'); add_action ('wp_enqueue_scripts', 'wpt_register_css'); wp-bootstrap-navwalker clase de GitHub. Coloque el archivo en la carpeta raíz del tema. Vuelve a tu funciones.php y pega el siguiente código:2.2. Crear un menú en el back-end
Página de gestión de menú de WordPress 2.3. Integrar la maqueta de la barra de navegación en una plantilla
Marca
">
'top_menu', 'depth' => 2, 'container' => false, 'menu_class' => 'nav', // Procesar el menú de navegación usando nuestro navegador personalizado 'walker' => nuevo wp_bootstrap_navwalker ())); ?>
Conclusión
Plantilla de administrador de Neon Bootstrap
Accentsconagua