SVG & WordPress Custom Fields

Der folgende Artikel ist ein Gastbeitrag von Ian Marquette. Ian hat herausgefunden, dass SVG ein <text>-Element haben kann, was bedeutet, dass Text aus einer dynamischen Quelle stammen kann und trotzdem SVG-spezifische Anpassungen möglich sind.

Ich habe kürzlich an einer WordPress-basierten Website gearbeitet, die eine Infografik benötigte. Als Verfechter von Responsive Design habe ich die Infografik in Illustrator gezeichnet und sie zur Skalierbarkeit als SVG exportiert. Als ich im Backend herumspielte, entdeckte ich, dass man WordPress Custom Fields zu SVG-Textelementen hinzufügen kann, um textbasierte Inhalte direkt über das WordPress CMS zu steuern. Wie fantastisch ist das?

Hier erkläre ich, wie ich es gemacht habe, und einige weitere Optionen, die Ihnen nützlich sein könnten.

Vorbereitung der SVG-Datei

Erstellen Sie die Grafik in Ihrer bevorzugten Vektoreditor-Software. Fügen Sie Platzhaltertext in den Bereich ein, in dem der benutzergesteuerte Text erscheinen soll. Hier habe ich eine einfache Grafik zur Demonstration erstellt.

Öffnen Sie nun Ihre SVG-Datei mit Ihrem bevorzugten Editor. Sie müssen einige Änderungen am Code vornehmen. In meinem Beispiel musste der Pfad in einen <textpath> geändert, eine ID erhalten und mit xlink verknüpft werden. Wenn ich das nicht tun würde, hätte jeder einzelne Buchstabe meines Textes seine eigenen Tags, Koordinaten usw.

<svg width="1000px" height="300px" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="green"  />

  <text font-family="Helvetica" font-size="42.5">
    <textPath xlink:href="#MyPath">
      SVG Text on a path for WordPress!
    </textPath>
  </text>

</svg>

Hier ist eine Live-Demo von Text auf einem Pfad

Siehe den Pen JoakC von Chris Coyier (@chriscoyier) auf CodePen.

Sie können den Markup einfach direkt in ein WordPress-Template kopieren und einfügen. Sie könnten auch eine der anderen Methoden zum Einbinden von SVG auf Ihrer Seite verwenden, z. B. die Datei als Objekt verlinken. Im Wesentlichen muss es sich um Inline-SVG handeln, nicht um SVG, das als oder background-image verwendet wird.

Sie möchten den Inhalt zwischen den <text>-Tags durch den folgenden Code ersetzen und custom_field durch den Namen ersetzen, den Sie Ihrem Feld geben möchten

<?php
  global $wp_query;
  $postid = $wp_query->post->ID;
  echo get_post_meta($postid, 'custom_field', true);
  wp_reset_query();
?>

Wenn Sie das in das SVG einfügen, sieht es so aus:

<svg width="1000px" height="300px" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="green"  />

  <text font-family="Helvetica" font-size="42.5">
    <textPath xlink:href="#MyPath">
       <?php
        global $wp_query;
        $postid = $wp_query->post->ID;
        echo get_post_meta($postid, 'custom_field', true);
        wp_reset_query();
       ?>
    </textPath>
  </text>

</svg>

Erstellen Sie nun ein Custom Field im WordPress CMS mit dieser Beschriftung und füllen Sie es aus.

Wenn Sie sich nun diese Seite ansehen, sollten Sie den benutzerdefinierten Text innerhalb Ihrer benutzerdefinierten SVG-Grafik sehen! Natürlich sind Custom Fields nur eine von vielen Möglichkeiten, dies zu tun, und sie sind recht erweiterbar. Sie könnten den Post-Titel auf diese Weise verwenden, Menüs oder alles andere, das dynamisch Text aus jedem CMS ausgibt.

Sobald der Text darin ist, kann er wie normaler Markup formatiert werden. Zum Beispiel:

...
<textpath class="text-path" ... >
  ...

.text-path {
  fill: orange;
}

Oder jede andere SVG CSS-Eigenschaft. Das bedeutet, dass benutzerdefinierte Schriftarten über @font-face problemlos funktionieren. Sie haben auch Zugriff auf nützliche Funktionen wie SVG-Filter und Animationen.