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;}

 TabMenü 

… durch einen Button 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 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 ]

^{Ohne Leerzeichen an den Innenklammern.}

Visuell:

[mybutton]

[codesnippets]

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>