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:

<a href="#ih"><strong><span style="color: #ffffff; background-color: #99ccff;">↑ Tabmenü </span></strong></a></span></p>

Ohne Unterstrich, CSS:

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

 Inhaltsverz.  oder  TabMenü 

… durch einen Button ohne Schrift darzustellen.

Der Ansatzpunkt, den Button mit Normalverlinkung zum Anker führen (s. evtl. Beitrag Anker setzten …) ist ohne Textinhalt, so, nicht möglich: Auszeichnung wie  <a href="#ih"><div class="myButton"></div></a> ist zwar funktionell, müsste aber im Textmodus abgespeichert werden, weil umschalten in Visuellmodus, dies – 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) und daher in Auszeichnung wie margin-left: 47.5%; zu handhaben.

 Shortcode 

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

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:

Die functions.php betreffende Codeschnipsel vornehmlich im Plug-in Code Snippets abspeichern: Sowohl Protektion und Verwaltung als auch Erhaltung der Codes bei Theme-Update.

Zentriert, ohne spezifische CSS Auszeichnung margin-left: 222px; bzw. margin-left: 47.5%; (2. Vorlage) etwas umständlich, aber Gebrauchs unterschiedlichen Contentweite und / oder bei Antipp‘ visuell nur der Button den Hover zeigt, im Texteditor:

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.