Después de en resumen lanzar mi primer tema en Themeforest, el «Elegante tema empresarial de WordPress», decidí compartir algunos tutoriales y el código de cómo creé algunas de las increíbles características del tema.
No lo guiaré a través de de todos y cada uno de los pasos explicando cada fragmento de código debido a que es muy fácil de comprender, sino que le proporcionaré todo lo que necesita para cortar / pegar los códigos cortos en su propio tema (¡incluso mejor!)
El código corto de alternancia
Crear el shortcode de Toggle es muy simple. Todo lo que tenemos que hacer es agregar una función de código corto a nuestro archivo functions.php que tiene 2 opciones: título y color. De esta manera, cuando agrega el código corto, puede elegir el título en el que puede hacer un clic para el efecto de alternancia y el color para que pueda agregar varias opciones de color a su alternancia, como puede ver en mi enlaceConcepto de Dominio¿Qué es un Enlace?En Internet, un link, además conocido como enlace o hipervínculo, es cualquier texto o imagen que se encuentra en una página web y en la que el usuario puede pulsar o clicar para ser dirigido a otro contenido distinto. Es el principal medio de “desplazamiento” en la red, puesto que se encuentra presente en prácticamente cualquier portal que visites a día de hoy, inclusive en más de demostración anterior, donde he agregado un blanco y estilo gris para que la gente pueda crear este efecto de color alterno.
Simplemente copie y pegue el código corto en su archivo functions.php:
// Register the toggle shortcode
function toggle_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
'title' => 'Click To Open',
'color' => ''
), $atts ) );
return '<h3 class="toggle-trigger"><a href="#">' . esc_html( $title ) . '</a></h3><div class="toggle_container">' . do_shortcode( wp_kses_post( $content ) ) . '</div>';
}
add_shortcode( 'toggle', 'toggle_shortcode' );Alternar JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar más, CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a más e imágenes
A continuación se muestra todo el código que utilicé para crear los conmutadores en mi tema premium de WordPressWordPress es el software de blogs líder en el mundo, y es concretamente fácil de utilizar y adaptable. Con WordPress, es factible crear con éxito sitios web con la ayuda de funciones ya predefinidas, sin mucho esfuerzo, y para proporcionar contenido como texto, imagen y vídeo. No se requiere conocimiento de HTML. WordPress además facilita la gestión y el mantenimiento de contenidos extensos. Al mismo tiempo de su fácil manejo, más si desea alcanzar el mismo aspecto.
Javascript
Aquí está el Javascript. Puede poner esto en su archivo custom.js o en el encabezado de su tema.
Importante: asegúrese de que ya está incluyendo la biblioteca jQueryConcepto de jQuery¿Qué es el jQuery?JQuery es una librería perteneciente al lenguaje de programación JavaScript, uno de los más usados en materia de desarrollo web, de código abierto y con la capacidad de mejorar la interactividad de una página web sin tener nociones de programación o un profundo conocimiento de este lenguaje. Es algo que facilita enormemente la tarea de desarrollo y diseño de páginas web.Muchos de los plugins que más, ya que es necesaria para que el resto de js funcione 😉
jQuery( function( $ ) {
$( document ).ready(function() {
$( ".toggle_container" ).hide();
$( ".toggle-trigger" ).click( function() {
$(this).toggleClass( "active" ).next().slideToggle( "normal" );
return false;
} );
} );
} );CSS
Aquí está el CSS. Simplemente colóquelo en su archivo style.css
/*toggle*/
.toggle-trigger {
margin: 0px !important;
font-size: 18px;
padding: 10px;
padding-left: 30px;
background-color: #F5F5F5;
background-image: dirección dirección url('images/shortcodes/toggle-plus.png');
background-position: 10px center;
background-repeat: no-repeat;
}
.toggle-trigger a {
color: #333;
text-decoration: none;
display: block;
}
.toggle-trigger a:hover {
color: #0489B7;
text-decoration: underline;
}
.toggle-trigger.active{
background-image: dirección dirección url('images/shortcodes/toggle-minus.png') !important;
background-position: 10px center;
background-repeat: no-repeat;
}
.toggle_container {
overflow: hidden;
padding: 20px 10px;
}Imagenes
A continuación se muestran las dos imágenes del código corto. Simplemente haga clic derecho y pulse «guardar imagen como» para guardar las imágenes en la carpeta de imágenes de su tema.
Usando el código corto
Ahora que ha agregado todo el código requerido para el código corto, puede insertar fácilmente sus conmutadores en su sitio de esta manera:
Your Toggle Title
Toggle Content¿Demasiado perezoso? ¡Obtén el tema!
Haga clic en la imagen de abajo para ver mi tema premium y comprarlo. 🙂
