Frühjahrsputz für WordPress #2: Funktionen, CSS-Blocks, Scripts und HTML sauber anschreiben

3. April 2022 | CSS-Stylesheet, functions.php, HTML, WordPress

Geschätzte Lesezeit für diesen Beitrag: ca. 9 Minuten.

Besonders wenn Sie ab und an selber an ihren Theme-Dateien oder am CSS-Stylesheet Hand anlegen, kann es nach einiger Zeit unübersichtlich werden: Was genau tut der Code in der functions.php? Welches Styling wird von Zeile 987 in meinem CSS-Stylesheet definiert? Es lohnt sich, eigene Programmierungen und Anweisungen laufend mit Kommentaren zu versehen. Für die spätere Übersicht (allenfalls sogar für die Fehlersuche durch Dritte) kann dieser Zusatzaufwand hilfreich sein.

Man neigt bei der Erstellung einer Website dazu, namentlich in der Datei functions.php, im CSS-Stylesheet oder auch in den Templates irgendwelchen Code zu hinterlegen. Wenn man dann ein halbes Jahr später etwas daran ändern möchte, die Zeilenzahl dieser Dateien aber unterdessen stark gestiegen ist, wirds rasch unübersichtlich. Deshalb raten wir: Beginnen Sie frühzeitig damit, Ihre Custom-Styles und Scripts mit Kommentaren zu versehen, welche auch von anderen verstanden werden.

Die Kommentare werden vom Browser nicht verarbeitet. Sie dienen bloss dazu, dem menschlichen Betrachter bessere Orientierung zu geben.

 

Kommentare im CSS-Stylesheet hinterlegen

Für Ihre Anweisungen im CSS-Stylesheet empfehlen wir Ihnen, die Zeilen in zusämmenhängenden Blöcken zu hinterlegen. Vor dem jeweiligen Block können Sie eine Beschreibung hinterlegen, welche Ihnen später hilft, Anpassungen vorzunehmen.

Hier ein Beispiel aus dem CSS-Stylesheet dieser Website, wie ich es unter Design/Customizer/Zusätzliches CSS bearbeiten kann:

vorher

.content-vertical-align-center {  
  display: flex;
  flex-direction: column;  
  justify-content: center; 
}

.content-vertical-align-bottom {  
  display: flex;  
  flex-direction: column;  
  justify-content: flex-end; 
}

.dp-dfg-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
}

nachher

/* Inhalte vertikal zentriert oder unten ausrichten */
.content-vertical-align-center {  
  display: flex;
  flex-direction: column;  
  justify-content: center; 
}

.content-vertical-align-bottom {  
  display: flex;  
  flex-direction: column;  
  justify-content: flex-end; 
}

/* Loader-Icon in DP-Filter-Grids */
.dp-dfg-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
}

Im Beispiel «vorher» sind bloss die Codes abgelegt, wie Elemente gestaltet werden sollen. Für den Browser ist dies völlig ausreichend. Wenn Sie aber später die Anweisungen durchsuchen wollen hilft Ihnen ein verständlicher Kommentar wie im Beispiel «nachher» auf den Zeilen 1 und 14.

Die Beschreibungen erfassen Sie zwischen den Zeichenfolgen /* und */. So wird der Browser sie einfach übergehen. Das ist auch gut so – er wüsste nicht, was er damit anfangen soll.

 

Kommentare in der Datei functions.php hinterlegen

Ganz ähnlich gehen Sie vor, wenn Sie beschreibende Kommentare für Funktionen in der Datei functions.php hinterlegen wollen. Diese bearbeiten Sie unter Design/Theme-Editor.

Auch hierzu ein Beispiel aus der functions.php dieser Website:

vorher

function year_shortcode() {
  $year = date('Y');
  return $year;
}
add_shortcode('year', 'year_shortcode');

function add_target_blank() { ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
        $('a')
            .filter('[href^="http"], [href^="//"]')
            .not('[href*="' + window.location.host + '"]')
            .attr('rel', 'noopener noreferrer')
            .attr('target', '_blank');
        });
    </script>
<?php }
add_action('wp_footer', 'add_target_blank');

function kurzlink() {
  echo "<link rel='alternate shortlink' href='" . wp_get_shortlink() . "' />"; 
}
add_action('wp_head','kurzlink');

nachher

// Aktuelles Jahr vierstellig als Shortcode
function year_shortcode() {
  $year = date('Y');
  return $year;
}
add_shortcode('year', 'year_shortcode');

/* Externe Links immer im neuen Fenster öffnen */
function add_target_blank() { ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
        $('a')
            .filter('[href^="http"], [href^="//"]')
            .not('[href*="' + window.location.host + '"]')
            .attr('rel', 'noopener noreferrer')
            .attr('target', '_blank');
        });
    </script>
<?php }
add_action('wp_footer', 'add_target_blank');

# Kurzlink als Metatag
function kurzlink() {
  echo "<link rel='alternate shortlink' href='" . wp_get_shortlink() . "' />"; 
}
add_action('wp_head','kurzlink');
Die vorher-Version wird vom Browser fehlerfrei verstanden – die nachher-Fassung ist für Menschen übersichtlicher. Die beschreibenden Kommentare sind dort in den Zeilen 1, 8 und 22 hinterlegt. Dabei sehen Sie, dass Sie dreierlei Möglichkeiten haben:

  • Sie können eine Beschreibung (wie in Zeile 1) mit // beginnen, …
  • … mit führendem /* und abschliessendem */ (also genau gleich wie im CSS-Stylesheet) umschliessen – so wie wir es in Zeile 8 gemacht haben oder …
  • … Sie fügen (wie in Zeile 22) ein # am Zeilenbeginn eines Kommentars ein.

Der Effekt der drei Varianten ist derselbe.

 

Kommentare im HTML-Code hinterlegen

Auch in HTML-Codes können Sie Kommentare einfügen, welche Ihnen bei der späteren Arbeit das Leben erleichtern. Wie in den vorhergehenden Beispielen wird der Browser diese Kommentare übergehen – sie dienen also tatsächlich vor allem der Übersicht für das menschliche Auge.

Auch hier ein Beispiel aus der Praxis:

vorher

<table>
  <tbody>
    <tr>
      <td>
        <table>
          <tbody>
            <tr>
              <td align="left">
                <div class"date">Bern, [Date_short]</div>
              </td>
              <td align="right" valign="bottom" width="465">
                <a href="https://www.verkehrsclub.ch/" data-et-target-link="_blank"><img alt="Logo" border="0" height="43" src="/userfiles/2/image/vcs_ate_ata.png" /></a>
              </td>
            </tr>
            <tr>
              <td align="left">
                <div class"title">Medienmitteilung</div>
              </td>
            </tr>
          </tbody>
        </table>
        <table width="760">
          <tbody>
            <tr>
              <td>
                <div class"text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

nachher

<table>
  <tbody>
    <tr>
      <td>
        <!-- Kopf -->
        <table>
          <tbody>
            <tr>
              <td align="left">
                <div class"date">Bern, [Date_short]</div>
              </td>
              <td align="right" valign="bottom" width="465">
                <a href="https://www.verkehrsclub.ch/" data-et-target-link="_blank"><img alt="Logo" border="0" height="43" src="/userfiles/2/image/vcs_ate_ata.png" /></a>
              </td>
            </tr>
            <tr>
              <td align="left">
                <div class"title">Medienmitteilung</div>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- Content -->
        <table width="760">
          <tbody>
            <tr>
              <td>
                <div class"text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
Auch hier wird der Browser die vorher-Variante verstehen. Die Bearbeitung des Codes wird aber durch die Kommentare auf den Zeilen 5 und 23 vereinfacht. Sie sehen, dass Sie die Kommentarinhalte mit <!−− beginnen und mit −−> abschliessen müssen.

 

Wir empfehlen, diese Kommentarfunktionen anzuwenden. Der Aufwand ist gering – er wird sich bei der weiteren Arbeit an der Website lohnen.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This