Springe zum Hauptinhalt

Wie ein Dropdown-Menü mit CSS in Ihrem Visual Editor hinzufügen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 701.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

In diesem Tutorial erfahren Sie, wie Transformation leicht Textlinks in attraktiv Tasten in WordPress. Wenn Sie diese Verfahrensanleitung befolgen, wissen Sie, wie Sie hinzufügen Ein Dropdown-Menü zum visuellen Editor von WordPress Hiermit können Sie benutzerdefinierte CSS-Stile auf den Inhalt Ihres Artikels anwenden.

Diese benutzerdefinierten CSS-Stile können auf Text in Ihren Posts angewendet werden, um sie zu dekorieren und zu formatieren. Sie werden hauptsächlich verwendet, um attraktive und auffällige Schaltflächen für Ihre Artikel zu erstellen. In diesem Tutorial wird auch das Erstellen einer Schaltfläche für CSS-Stile behandelt.

Wenn Sie auf einfache Weise attraktive Schaltflächen in Posts und Seiten hinzufügen möchten, ist dieses Tutorial genau das Richtige für Sie.

Das Endergebnis.

Das Endergebnis dieses Tutorials besteht darin, dass Sie Text in Ihrem Artikel auswählen und dann über das Dropdown-Menü des Artikeleditors einen Stil darauf anwenden können.

Sobald wir fertig sind, sieht der visuelle Editor folgendermaßen aus und enthält ein "Stile" -Element in Form eines Dropdown-Menüs:

How-To-Styles-01

Über das neue Menü können Sie einen CSS-Stil auf den Textlink in Ihrem Artikel anwenden, um einen Schaltflächeneffekt ohne Verwendung von Bildern zu erstellen. Die Links könnten so aussehen, obwohl das Erscheinungsbild bei Ihnen liegt:

How-To-Styles-02

Dieser Ansatz spart nicht nur Zeit beim Erstellen eines Artikels, sondern ermöglicht es auch allen Mitwirkenden an Ihrem Blog, immer dieselben Stile zum Dekorieren von Schaltflächen oder anderen Elementen der Artikel zu verwenden.

Sicherheitshinweise.

In diesem Tutorial bearbeiten wir die folgenden Dateien:

  • fonctions.php
  • style.css

Diese beiden Dateien sind Teil Ihres Themas, daher arbeiten wir mit den Versionen, die dem aktuell aktiven Thema in Ihrem Blog zugeordnet sind. Zuallererst ist es wichtig eine Sicherung dieser Dateien zu machen falls etwas schief geht.

Zweitens ist es ratsam um ein untergeordnetes Thema zu erstellen von Ihrem aktuellen Thema. Wenn Sie nicht wissen, wie Sie ein untergeordnetes Thema erstellen sollen. Wenn Sie ein untergeordnetes Thema verwenden, wird sichergestellt, dass Ihr aktuelles Thema aktualisiert wird. Es ist auch erwähnenswert, dass, wenn Sie das Thema ändern, ces Änderungen gehen verloren.

Wenn Sie jedoch an einem in der Entwicklung befindlichen Blog oder einer lokalen WordPress-Installation arbeiten, müssen Sie kein untergeordnetes Thema erstellen.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Hinzufügen eines Elements "Stile" zum Menü.

Das Dropdown-Menü "Stile" ist bereits Teil des WordPress Visual Editor, wurde jedoch standardmäßig deaktiviert. Um es zu aktivieren, müssen Sie der Datei nur einige Codes hinzufügen fonctions.php von Ihrem aktuellen Thema.

Um die Datei zu öffnen und zu ändern, gehen Sie zum Menü » Apparence  »Dann klicken Sie auf« Herausgeber Im Untermenü. Wenn Sie eine englische Version haben, gehen Sie zu Aussehen> Editor

How-To-Styles-03

Überprüfen Sie zunächst, ob das aktuell von Ihrem Blog verwendete Thema im Dropdown-Menü oben rechts auf der Seite ausgewählt ist. Ich ändere gerade die Datei fonctions.php Zwanzig zwölf Thema aber für dich könnte es ein anderes Thema sein.

Klicken Sie dann auf die Datei fonctions.php Klicken Sie in der Liste der Dateien auf der rechten Seite auf, um die Bearbeitung zu starten. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein. Der Einfachheit halber empfehle ich Ihnen, es am Ende der Datei einzufügen, damit Sie leicht nachverfolgen können, was Sie der Datei hinzugefügt haben.

1
2
3
4
5
6
7
8
9
// Enable the Styles dropdown menu item
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');
// end of part I

Klicken Sie nach dem Hinzufügen des Codes zur Datei auf die Schaltfläche Aktualisieren, um die Änderungen zu speichern. Wenn alles gut geht, sollten Sie sehen, dass das Dropdown-Menü zur Stilauswahl zum visuellen Post-Editor von WordPress hinzugefügt wurde.

Wir sind jedoch noch nicht fertig. Wenn Sie die Menüelemente in diesem neuen Dropdown-Menü untersuchen, werden Sie feststellen, dass es sich um Stile handelt, die sich auf den visuellen Editor der anderen Schaltflächen beziehen.

wir wollen Fügen Sie der Liste unsere eigenen Stile hinzu.

Erstellen Sie die CSS-Stile Ihrer Schaltflächen.

In diesem Tutorial erstellen wir eine Schaltfläche für unsere Textlinks. Sie können jedoch auch die Dekoration und Formatierung für jeden anderen Elementtyp erstellen.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Jetzt erstellen wir CSS-Stile für die Schaltflächen. Sie können entweder Ihr eigenes CSS erstellen oder eine der vielen Online-Schaltflächengenerator-Apps verwenden. CSS Button Generator ist eine gute Wahl, besuchen Sie die Website und erstellen Sie schnell eine Schaltfläche und kopieren Sie dann das CSS. Gehen Sie dann zu "Darstellung", dann zu "Editor" und klicken Sie auf die Datei style.css in der Dateiliste auf der rechten Seite. Auf Englisch haben Sie Aussehen> Editorseite> style.css

Scrollen Sie erneut zum Ende der Datei und fügen Sie das CSS über die Schaltfläche unten ein oder verwenden Sie Ihr eigenes CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.linkButton {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}

.linkButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}

.linkButton:active {
position:relative;
top:1px;
}

/* This button was generated using CSSButtonGenerator.com */

Aktualisieren Sie die Datei, um die Änderungen zu speichern.

Fügen Sie dem Dropdown-Menü Stile hinzu.

Klicken Sie nun erneut auf die Datei fonctions.php  und fügen Sie den folgenden Code am Ende der Datei ein.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Add the Button CSS to the Dropdown Menu
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {

// Define the style_formats array
$style_formats = array(

// Each array child is a format with it's own settings
array(
'title' => 'Link Button',
'selector' => 'a',
'classes' => 'linkButton',
),
);

// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}

// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
// end of part II

Beachten Sie diese Zeilen in der Tabelle:

  • Titel - Dies ist der Titel, der im Dropdown-Menü angezeigt wird
  • Selektor - Das "a" bezieht sich auf den Anker und zeigt an, dass dieser Stil für Links gilt.
  • Klassen - Dies ist der Klassenname unserer CSS-Schaltfläche

Wenn Sie Ihr eigenes CSS verwenden, entspricht der Klassenname dem, was Sie als Namen Ihrer eigenen CSS-Klasse angegeben haben. Im obigen Beispiel heißt die Schaltfläche im CSS-Stil linkButton.

Nachdem Sie den Code eingefügt haben, klicken Sie auf die Schaltfläche Aktualisieren, um die Änderungen zu speichern. Sobald die Datei gespeichert ist, rufen Sie den WordPress-Post-Editor auf und aktualisieren Sie das Fenster, damit die Änderungen wirksam werden. Klicken Sie dann auf das Dropdown-Menü "Stile" und Sie sollten einen Eintrag mit dem Titel " Linkbutton".

 

How-To-Styles-05

Um den CSS-Stil anzuwenden und die Schaltfläche zu erstellen, genügt es Erstellen Sie einen Textlink in Ihr ArtikelWählen Sie den Text aus und wählen Sie dann im Menü den Stil aus, den Sie Ihrer Schaltfläche zuweisen möchten. Die Stile werden im Post-Editor-Fenster nicht angezeigt. Sie sollten eine Vorschau des Artikels anzeigen, der folgendermaßen aussehen sollte:

How-To-Styles-06

Wenn Sie jetzt eine eingängige und attraktive Schaltfläche in Ihre Beiträge oder Seiten einfügen müssen, erstellen Sie einfach einen Textlink und wählen Sie den entsprechenden Stil aus dem Dropdown-Menü aus.

Erweiterte Optionen.

Ich hoffe, Sie können sich andere Verwendungsmöglichkeiten für diese Funktion vorstellen. Beispielsweise können Sie dem Menü zusätzliche Stile hinzufügen. Dies kann die Formatierung des Erscheinungsbilds des Textes oder alles andere sein, was Sie mit CSS tun können.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Wenn Sie einen zusätzlichen Schaltflächenstil erstellen möchten, der der Dropdown-Liste hinzugefügt wird, reicht es gerade aus, einen weiteren Eintrag in der Tabelle zu erstellen (der hinzugefügt wurde fonctions.php) Und die Linien ändern und den Titel der Klasse:

1
2
3
4
5
array(
'title' => Bigger Button',
'selector' => 'a',
'classes' => 'biggerButton',
),

Fügen Sie dann der Datei einen neuen CSS-Stil hinzu style.css. Wenn Sie Stile für Elemente erstellen möchten, die keine Links sind, können Sie dies auch tun. Dies erfordert eine Änderung der zweiten Zeile in Abhängigkeit von dem Bereich, in dem Sie den Stil anwenden möchten.  

Shortcuts.

Wenn all das für Sie eine großartige Theorie ist und Sie dennoch eine schnellere Möglichkeit suchen, diese Theorie anzuwenden, ohne den Code bearbeiten zu müssen, könnten Sie diese beiden Plugins interessieren:

Fazit.

Jetzt können Sie ganz einfach großartige Suchschaltflächen in WordPress erstellen, indem Sie eine Option aus einem Dropdown-Menü im WordPress-Post-Editor auswählen.

Wir hoffen, dass dieses Tutorial Ihnen beim Entwerfen einer Stilauswahl in Ihrem Post-Editor geholfen hat. Wenn wir bestimmte Teile ausgelassen haben oder wenn Sie weitere Informationen wünschen, zögern Sie nicht, uns Ihre Kommentare in dem für diese letzten reservierten Bereich zu hinterlassen.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
11 Aktien
Aktie10
tweet1
Registrieren