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');- 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>
Wir empfehlen, diese Kommentarfunktionen anzuwenden. Der Aufwand ist gering – er wird sich bei der weiteren Arbeit an der Website lohnen.
Werbung
Werbung
