Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.  Info

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle. Info

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

Das welches hier in Aufzeichnung von "Mein Button" und auf den ersten Blick von selbstverständlich, war doch nicht so einfach, wie ich es mir gerne vorgestellt. Durch Recherche und Überlegung in Zeitphase eines Nachmittags – die Erkenntnis und das Resultat: "Am besten mit Shortcode."

Button mittig mit Link-Hinweis, das Ziel.

—♥—

Schaltfläche und Button

Zwei Beispiele eine Schaltfläche und einen Button das zu arrangieren.

Schaltfläche

Text-Editor:

<p style="text-align: center;"><a href="#ih"><b><span style="color: #ffffff; background-color: #4A80EB;"> Zum Anker springen </span></b></a></p>

Der Ankerlink ohne Unterstrich, CSS:

a[href="#ih"] {
text-decoration: none;}

  Zum Anker springen  

Die Schaltflächen oben Beispiel nun durch einen runden Button und ohne Schrift darzustellen.

Der Ansatzpunkt, den Button mit normaler Verlinkung zum Anker führen (s. evtl. Beitrag Anker setzten …) ist ohne Textinhalt, so, nicht möglich. Weiter, die Auszeichnung  <a href="#ih"><div class="myButton"></div></a> ist zwar funktionell, wäre aber im Textmodus abzuspeichern. Indes umschalten auf Visuell – durch das unter "Dashboard / Einstellungen / Schreiben" gesetzte Häkchen: "WordPress soll falsch verschachteltes XHTML automatisch korrigieren" – zum Teil gelöscht wird, also essenziell falsch ist.

CSS "myButton" mit Link über Shortcode

Dieser Hinweis führte zum Erfolg:

• how-to-add-custom-css-buttons-to-wordpress-as-a-shortcode

 Der runde Button

.myButton {
position: relative;
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
background: -webkit-gradient(linear,0 0,0 100%,from(#a4d3ee),to(#f5f5f5));
background: -moz-linear-gradient(top,#a4d3ee,#f5f5f5);
box-shadow: 0 0 3px gray;
-webkit-border-radius: 50%;
}

 …und der Shortcode

Für Anker im selben Dokument, der Anker ist im Editor 'Text' mit <a href="#ih"></a> ausgezeichnet ist, so ist dann im Shortcode mit #ih:

functions.php

function myButton($atts, $content = ''){

extract(shortcode_atts(array(
 'text' => '',
 'link' => '#ih'
 ), $atts));

$html = '<a href="' . $link . '"><div class="myButton">' . $text . '</div></a>';
 return $html; 
}

add_shortcode('mybutton', 'myButton');

Editor-Visuell:

[mybutton]

Visuell:

Button mit Start-Tag <button>

Des Zusammenhangs von Button ist der Beitrag "Zurück-Button vorig Seite!" sehr ansprechend.

Man lernt nie aus!

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 April