Creaci贸n de un curso corto alternativo para las preguntas frecuentes de WordPress

馃搼 Aqu铆 podr谩s encontrar 馃憞

Curso corto alternativo

Complete la 煤ltima p谩gina del tema Home en Themeforest, en "Elegant Theme for WordPress Empresarial", opte por la divisi贸n Algun Lessons y por c贸digo de c贸mo cree algunas de las incre铆bles propiedades del.

No 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 (Inclusive the compartimento principal!)

El c贸digo de las alternativas.

Cree el c贸digo Abreviado por gag es muy simple. Todo lo que tenemos que hacer es ags anegar una funci贸n de ca aregar una funci贸n de ca arreghp que tiene 2 de esta manera, cuando agraga el ca. el thotulo en el que puede hacer clic para el efecto de alplancia y el cveten para que pueda Agragar varias opciones de color a su rellancia, como puede ver el mi enlace de demostraci贸n ariba donde he agrestado un blanco y estilo gris para que la gente pueda t crear este efecto de color alternativo.

Simplifique la copia en pegue el c贸digo corto en el 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' );

JavaScript, CSS e im谩genes alternativos

Siga trabajando para que pueda usar el cuadro para crear un tema premium de WordPress, as铆 como el aspecto m铆nimo.

JavaScript

Esto es javascript. Tambi茅n puede escribir su archive.js personalizado o descargar el tema.

Importante: aseg煤rese de que ya est谩 incluyendo la biblioteca jQuery, ya que es necesario 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谩 CSS. Elementos simples en el 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;
}

fotos

La continuaci贸n del patr贸n de los dos genes del plato codificado. Simplemente haga clic derecho y presione "guardar imagen como" para proteger la imagen genei en la carpeta de im谩 genes de su tema.

Men煤s alternativos de WordPress

Con el c贸digo corto

Ahora que el agregado tiene todo el c贸digo necesario para el c贸digo de funci贸n, puede pegarlo como un enlace a los interruptores en el sitio web de la siguiente manera:

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

驴Es demasiado malo? 隆 Consigue un tema!

Haga clic en la imagen del tema premium para mi versi贸n y comparaci贸n. 冒鸥 鈩 '

Elegante tema de WordPress

Deja una respuesta

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

Subir