Nachdem ich endlich mein erstes Theme auf Themeforest veröffentlicht habe, das „Classy WordPress Business Theme“, habe ich beschlossen, einige Tutorials und den Code zu teilen, wie ich einige der großartigen Funktionen des Themes erstellt habe.
Ich werde Sie nicht durch jeden einzelnen Schritt führen und jedes Bit des Codes erklären, weil es sehr einfach herauszufinden ist, sondern ich werde Ihnen alles zur Verfügung stellen, was Sie brauchen, um die Shortcodes in Ihr eigenes Thema auszuschneiden / einzufügen (noch besser!)
Der Toggle-Shortcode
Das Erstellen des Toggle-Shortcodes ist sehr einfach. Alles, was wir tun müssen, ist, unserer Datei functions.php eine Shortcode-Funktion hinzuzufügen, die 2 Optionen hat: Titel und Farbe. Auf diese Weise können Sie beim Hinzufügen des Shortcodes den Titel auswählen, auf den Sie für den Umschalteffekt klicken können, und die Farbe, damit Sie Ihrem Umschalter verschiedene Farboptionen hinzufügen können, wie Sie in meinem Demo-Link oben sehen können, wo ich ein Weiß hinzugefügt habe und grauer Stil, damit die Leute diesen wechselnden Farbeffekt erzielen können.
Kopieren Sie einfach den Shortcode und fügen Sie ihn in Ihre Datei functions.php ein:
// 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' );
Das Umschalten von Javascript, CSS & Bildern
Unten ist der gesamte Code, den ich verwendet habe, um die Umschalter in meinem Premium-WordPress-Theme zu erstellen, wenn Sie das gleiche Aussehen erzielen möchten.
Javascript
Hier ist das Javascript. Sie können dies in Ihre custom.js-Datei oder in den Kopf Ihres Designs einfügen.
Wichtig: Stellen Sie sicher, dass Sie bereits die jQuery-Bibliothek einschließen, da sie für den Rest des js benötigt wird 😉
jQuery( function( $ ) {
$( document ).ready(function() {
$( ".toggle_container" ).hide();
$( ".toggle-trigger" ).click( function() {
$(this).toggleClass( "active" ).next().slideToggle( "normal" );
return false;
} );
} );
} );
CSS
Hier ist das CSS. Einfach in Ihre style.css-Datei einfügen
/*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;
}
Bilder
Unten sind die beiden Bilder für den Shortcode. Klicken Sie einfach mit der rechten Maustaste und klicken Sie auf „Bild speichern unter“, um die Bilder im Bilderordner Ihres Themas zu speichern.
Verwenden des Shortcodes
Nachdem Sie nun den gesamten für den Shortcode erforderlichen Code hinzugefügt haben, können Sie Ihre Schalter ganz einfach wie folgt in Ihre Site einfügen:
[toggle title="Your Toggle Title" color="white"]Toggle Content[/toggle]
Zu faul? Holen Sie sich das Thema!
Klicken Sie auf das Bild unten, um mein Premium-Theme zu überprüfen und zu kaufen. 🙂