Open-Source Webdesign

bootScore Shortcode für Font-Awesome Icons

/ von Karsten Reincke | Kommentar schreiben

Ein Shortcut mit Schere und Kamm

Font-Awe­so­me in und für bootS­core ist ein net­tes Fea­ture. Etwas frus­triert muss ich ergän­zen, dass ‘eige­nen’ HTML-Code in einen Word­Pres­s/­Gu­ten­berg-Block via ‘Edit as HTML’ zu inte­grie­ren, gele­gent­lich Typ und Inhalt des Blo­ckes zer­stört : Wenn der Code dem Guten­berg-Edi­tor suspekt ist, ersetzt er die schon gemach­te Arbeit durch einen lee­ren HTML-Block. Ärger­lich , wenn man nur mal schnell noch ein von Font Awe­so­me Icon via <i class="fa-regular fa-square-check"></i> hin­zu­fü­gen woll­te. Das muss anders wer­den. Mit einem bootS­core Short­code für Font-Awe­so­me:

[ de | en ]

Lösung / Update

  • Such Dir auf der Font-Awe­so­me-Sei­te das gewünsch­te Icon her­aus.
  • Füge an den Stel­len, wo ein Font Awe­so­me Icon erschei­nen soll, direkt im Guten­berg-Edi­tor einen Short­code wie [­bsfa fa-regular fa-square] ein.

Hintergrund

Short­codes wer­den in Word­Press gern genutzt, wenn es dar­um geht, in die Guten­berg-Blö­cke ande­re Ele­men­te ein­zu­fü­gen, ohne ‘Edit as HTML’ bemü­hen zu müs­sen. Zwi­schen zwei ecki­gen Klam­mern ste­hen ein Funk­ti­ons­ken­ner und die benö­tig­ten Para­me­ter. In der Datei functions.php wird eine ent­spre­chen­de Funk­ti­on defi­niert und Guten­berg bzw. Word­Press — ganz wich­tig — unter dem gewähl­ten Funk­ti­ons­ken­ner bekannt gemacht.

Für die Font Awe­so­me Icons heißt das, dass zwi­schen dem öff­nen­den alle auch sonst benö­tig­ten und mög­li­chen Font Awe­so­me Klas­sen ein­ge­fügt wer­den kön­nen und dass Word­Press selbst das Kon­strukt auf HTML-Ebe­ne ein­bin­det.

Update Schild
His­to­risch noch dies: Bis zur Ver­si­on bootScore‑5.2.3.2 muss­ten wir dafür unse­re functions.php erwei­tern. Das ist jetzt, mit Ver­öf­fent­li­chung der Ver­si­on bootScore‑5.2.3.3 nicht mehr nötig, weil unser Vor­schlag vom Pro­jekt in den gene­rel­len bootS­core-Code auf­ge­nom­men wor­den ist. Dank dafür. Nun bringt bootS­core den fol­gen­den Code schon mit: 

/*
 * (c) 2023 Karsten Reincke
 *  SPDX-License-Identifier: MIT
 */
function insert_bsfa($atts){
  $atts = (array) $atts;
  $vstr = "";
  foreach ( $atts as $value ) {
  $vstr = $vstr . " $value";
  }
  return '<i class="' . $vstr . '"></i>';
 }
add_shortcode('bsfa', 'insert_bsfa');

Bin­go.

Und in welchem Zusammenhang …

… steht das mit unse­rer Migra­ti­on zu bootS­core? Nun: Muss eine Web-Desi­gne­rin ihr bis­he­ri­ges Word­Press-The­me auf­ge­ben, braucht sie Ersatz. Ein frei­es The­me von der Stan­ge wird sie per­so­na­li­sie­ren wol­len. Zuerst etwas kos­me­tisch, dann in Sachen Grau­wert, Mehr­spra­chig­keit und inne­rer Ver­weis­tech­nik und Ver­lin­kung. Schließ­lich wird sie beson­de­re Foo­ter akti­vie­ren, ein Zweit­me­nü oder einen Copy­right-Hin­weis, bevor sie die ‘SEO-zität’ über­prüft. Die­sen Weg unter­stützt auch die­ser Post.

Im Übri­gen: Män­ner sind mit­ge­meint.

To top