Creación de un código corto de alternancia para la página de preguntas frecuentes de WordPress

Después de finalmente 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 todos y cada uno de los pasos explicando cada fragmento de código porque es muy fácil de entender, en su lugar, 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 código abreviado de Toggle es muy simple. Todo lo que tenemos que hacer es agregar una función de código abreviado a nuestro archivo functions.php que tiene 2 opciones: título y color. De esta manera, cuando agrega el código abreviado, puede elegir el título en el que puede hacer 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 enlace de demostración arriba 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 '

' . esc_html( $title ) . '

' . do_shortcode( wp_kses_post( $content ) ) . '
'; } add_shortcode( 'toggle', 'toggle_shortcode' );

Alternar JavaScript, CSS e imágenes

A continuación se muestra todo el código que utilicé para crear los conmutadores en mi tema premium de WordPress si desea lograr 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 jQuery, 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: 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: 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 presione “guardar imagen como” para guardar las imágenes en la carpeta de imágenes de su tema.

WordPress Alternar menos

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 la siguiente manera:

[toggle title="Your Toggle Title" color="white"]Toggle Content[/toggle]

¿Demasiado perezoso? ¡Obtén el tema!

Haga clic en la imagen de abajo para ver mi tema premium y comprarlo. 🙂

Tema elegante de WordPress

Publicaciones relacionadas

Botón volver arriba