Mein Button

Button mittig mit Link-Hinweis, das Ziel.

—♥—

Das welches hier in kleiner Aufzeichnung und auf den ersten Blick für jedermann von selbstverfreilich, war 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."

Der Gedanke war, die  Schaltflächen …

Text-Editor:

<p style="text-align: center;"><a href="#ih"><strong><span style="color: #ffffff; background-color: #99ccff;"> Inhaltsverz. </span></strong></a> oder <a href="#ih"><strong><span style="color: #ffffff; background-color: #99ccff;"> TabMenü </span></strong></a></p>

Ohne Unterstrich, CSS:

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

Bspw TabMenü  … durch einen Button 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 in Visuellmodus – durch das unter "Dashboard / Einstellungen / Schreiben" gesetzte Häckchen: "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

 Button 

CSS (mein Beispiel)
 1. Vorlage: Button zentriert, Anklick' mit Link durch Button und über die gesamte Zeile:
.myButton {
position: relative;
margin-bottom: 22px;
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%;
}
2. Vorlage: Button zentriert, Anklick mit Link allein durch Button:
.myButton {
display: inline-flex;
margin-bottom: 22px;
margin-left: 222px;
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%;
}
  • Beipiels (Theme Twenty Fourteen) Inhaltsseitenbreite 474px, Button mittig: Die Hälfte ist 237px minus Radius 15px = margin-left: 222px; . Mit erhöhte Contentweite selbigen Themes, hier 524px, sind aber 247px nicht responsive, also Mobils der Button nicht mittig ist. Daher ist das in Auszeichnung margin-left: 47.5%; zu handhaben.

 Shortcode 

Für Anker im selben Dokument, der Anker im Texteditor mit <a href="#ih"></a> ausgezeichnet ist, ist im Shortcode mit #ih zu editieren:

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');
Visuelleditor:

[mybutton]

Visuell:

Die Snippets zur functions.php ab ins Plug-in Code Snippets.
Mit Obhut der Codes! – so bleibt das auch nach Theme-Update.
Oder Childs Theme? – zum Beitrag mit Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

Zentriert, ohne spezifische CSS Auszeichnung margin-left: 222px; bzw. margin-left: 47.5%; (2. Vorlage) etwas umständlich, im Texteditor:

<div align="center">[ mybutton ]</div>

Was sagst Du zum Beitrag?