Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Button
smilies.4-user.de

Mein Button, – so einfach und mit Shortcode

Werbung

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


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


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.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


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


Classic Editor & Advanced Editor Tools
Erleben Sie es.


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.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


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


Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

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:

 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:
wp wegerl.at
Die Snippets zur functions.php ab in das Plug-in Code Snippets.
Mit Obhut von Codes! – so bleibt das auch nach Theme-Update.
Oder Child Theme! – zum Beispiel Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

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