Pregunta sobre Developing with WordPress de Wordpress:

codepen html js css en wordpress – Fácil

Un usuario preguntó 👇

Hola

Estoy intentando replicar un sitio para mi negocio usando wp y tengo algunos problemas. Vi algunos menús de pantalla completa interesantes mientras cambiaba el cursor de la pantalla de flecha a punto. Intenté integrar los códigos de codepen, pero tengo problemas.

He leído el tutorial de poner en cola aquí en wordpress https://developer.wordpress.org/themes/basics/including-css-javascript/

pero sigo teniendo problemas porque no funciona. No soy de la industria de la informática o la programación, por lo que mis conocimientos son muy básicos. Lo busqué en Google, pero nada funciona. Estoy seguro de que debido a mi falta de conocimientos básicos de programación, estoy haciendo algo mal.

Mi proceso fue: a) Creé un tema hijo en Wp, todavía en mi casa local, usando wamp b) Encontré código en codepen con código html, CSS y js. Descargué esos archivos. c) Copié el código html y lo inserté en el archivo de tema header.php de mi tema d) En mi computadora, en C / wamp64 / www / wordpress / wp-content / theme / my-theme-child / Create tengo dos archivos , uno es duro js y el otro css; e) Desde el archivo codepen descargado, donde tenía dos mapas dist y src, copié dos archivos del mapa dist, uno llamado script y el otro estilo llamado CSS; f) Pegué el archivo js para mi child-theme / js y el archivo CSS en mi child-theme / css g) No fui a mi tema Child-functions.php y agregué este código:

function add_theme_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
 
  wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css', array(), '1.1', 'all');
 
  wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
 
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
      wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Ahora, cuando obtengo una vista previa de mi página en mi navegador en la parte superior de la página, el menú no es como debería ser (solo Inicio, aprox, texto de contacto a la izquierda con fondo blanco, sin botón de hamburguesa …).

Sé que hice algo mal, pero no puedo averiguar qué es.

Estaría muy feliz de recibir ayuda para resolver este problema.

Gracias y todo lo mejor, BR

Este tema fue modificado hace 10 meses, 2 semanas por.

(@ alegremente)

Hace 10 meses, 2 semanas

Puede ser útil vincularlo al Codepen. Probablemente HTML no debería formar parte del encabezado. Deberá adaptar el script y CSS para trabajar con el menú en la forma en que se genera de acuerdo con su tema. Hacer add_theme_scripts la función tiene algunos problemas. Xa wp_enqueue_style, el primer parámetro es el identificador. Agregue algo único al estilo de su hijo y luego use el tirador adecuado para el estilo temático de sus padres. No puede ser el mismo identificador para ambos y debe ser compatible con el padre o con doble carga. (Igual por wp_enqueue_script.)

(@managerslo)

Hace 10 meses, 2 semanas

Gracias por tu respuesta Joy (@joyously)

Mmmm …

Vi este código en codepen:

https://codepen.io/feizc002/pen/bQqqPm

y quería usarlo en mi tema hijo en Sydney en mi nuevo sitio web de wp (todavía en mi casa local), y no tengo idea de cómo integrar este código en mi wp.

También vi este código:

https://codepen.io/karlovidek/pen/KQzJoP

, y tampoco tienen idea de cómo integrarlo.

Sé que debería leer algunos libros y cosas sobre programación, pero pensé que uno tiene un tutorial fácil para integrar este código en wp (luego coloque el código html, los archivos CSS y js allí, etc.), pero como lo veo, estoy probablemente optimista.

Gracias por tu ayuda BR

(@ alegremente)

Hace 10 meses, 2 semanas

Entonces, su tema (al menos en dispositivos pequeños) probablemente ya tenga un botón de menú en su tema. Entonces tendrías que modificar eso para estar siempre ahí. Aquí está la parte HTML que mencionaste. El resto del HTML es el menú de visualización, que no debe insertar en su encabezado. Es solo para exhibición, aunque se requiere la parte del botón compacto. Necesitará trabajar con las diferentes partes del menú HTML para su tema.

Luego, CSS usa la fuente de Google, que no necesitará, ya que usaría cualquier fuente que use su tema. También se refiere a las clases en HTML, que debe cambiar para que coincidan con las clases de su tema (la mayoría de los temas analógicos estándar usan clases con WordPress para menús, pero algunos temas lo cambian todo). Hay estilos para el cuerpo y. hero y h1 probablemente no quieras. Así que simplemente reduzca los objetos del menú, luego cambie el nombre de las cosas para que coincidan con su tema.

El JS es solo para active y el botón, así que asegúrese de que los nombres coincidan con lo que termine su CSS.

El segundo Codepen usa una biblioteca, que también debe incluir para que funcione. En la página Codepen, haga clic en Configuración y seleccione JS a la izquierda para averiguar qué biblioteca está cargada.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *