Info echo

Ist der Classic-Editor schon zu kennen? –

"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Classic-Editor mit Advanced Editor Tools

"Advanced Editor Tools – Ausgezeichnet!"
Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Klassischen Editor anwenden! – und …

"Advanced Editor Tools – ist sehr gut!"
Advanced Editor Tools immer NEU – Classic Widgets

---

Info echo

… die Welt gehört dem, der sie genießt.

– mit Advanced Editor Tools!
Advanced Editor Tools immer NEU! – Classic Widgets

---

Info echo

Aktive Installationen: 2+ Millionen

"Advanced Editor Tools – ist so fabelhaft!"
Advanced Editor Tools immer NEU! Classic Widgets

---

Info echo

Antörnend! – so gehts hier zur Lancierung

"Advanced Editor Tools – ist de luxe!"
Advanced Editor Tools immer NEU! – Classic Widgets

---

Info echo

… Classic Widgets sind so praktisch!

"Classic Widgets – sind so grandiose!"
Advanced Editor Tools immer NEU! – Classic Widgets

---

Info echo

Werkraum ist Werkraum – Frontend ist Frontend

Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker

"Advanced Editor Tools – ist so fein!"
Advanced Editor Tools immer NEU! – Classic Widgets

---

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:

Zum Anker scrollen

Statt zum Anker springen das im scrolle siehe im Beitrag 'Das Feedback-Plug-in Helpful' und im Beispiel Scroll zum Anker.

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