Orientierung WordPress
JavaScript kann die Eigenschaften des Browser-Object-Model ansprechen (siehe Orientierung BOM). Bei WordPress-Seiten ergeben sich weitere Fragestellungen, die – ganz ohne PlugIns – ebenfalls durch JavaScript-Programme beantwortet werden können.
Einfluss des Themas
Eine WordPress-Seite enthält Code, der von WordPress selbst generiert wird und unverändert vom Thema in die Seitenstruktur eingebaut wird. Darüber hinaus gibt es aber auch Code, der vom Thema generiert wird und der vor allem den Aufbau der Seite betrifft (Kopf- und Fußbereich, Seitenleiste usw.) Die Schwierigkeit besteht darin, herauszufinden, welche Merkmale des entstandenen HTML-Codes allein von WordPress vergeben werden und nicht etwa vom Thema. Benutzt man in einem JavaScript-Programm HTML-Elemente, die vom Thema generiert werden, dann würde ein Skript nur auf Seiten mit diesem speziellen Thema funktionieren.
Block-Themen
Seit der letzten WordPress-Version 6.2 erlaubt der Seiten-Editor eine fundamentale Gestaltungsmöglichkeit. Insbesondere kann man in den Kopf- und Seitenbereich zusätzlichen Code einbauen, der die Orientierung für ein JavaScript-Programm erleichtert.
Seiten und Beiträge
In WordPress gibt es zwei Arten von Publikationen: Seiten und Beiträge. Betrachtet man allein den Inhalt, gibt es keinen Unterschied, beide Publikations-Typen können prinzipiell denselben Inhalt enthalten. Der Unterschied ist, in welche Systematik der Inhalt eingeordnet ist.
Bei Seiten besteht die Systematik in ihrer hierarchischen Ordnung, ob also eine Seite eine Eltern-Seite hat, daher also einer anderen Seite untergeordnet ist oder ob sie keine Eltern-Seite hat, dann also eine Top-Level-Seite ist.
Bei Beiträgen ergibt sich eine Reihung durch den Zeitpunkt der Publikation. Darüber hinaus werden Beiträge in Kategorien eingeordnet, die es erlauben, Seiten mit derselben Kategorie gemeinsam anzusprechen.
Vergleicht man nun den HTML-Code von Seiten mit dem von Beiträgen, stellt man fest, dass Beiträge neben dem eigentlichen Inhalt auch so Links zu RSS-Feeds enthalten, die man zu Feststellung des Seiten-Urls heranziehen kann.
Hier ist das Ergebnis von JavaScript-Codes zur Seitenanalyse einer WordPress-Seite.
| WordPress-Detail | JavaScript | Wert des aktuellen Beitrags |
| Infotyp | get_Type() | |
| Id | get_pagepostId() | |
| Parent-Id | get_pageParentId() | |
| Post-Url | get_postUrl() | |
| Page-Url | get_pageUrl() |
Hier werden die einzelnen JavaScript-Funktion vorgestellt, die die Werte in diese Tabelle zur Laufzeit eintragen.
Seite oder Beitrag?
Die folgende Funktion prüft, ob in einem body-Tag, die für eine Seite oder einen Beitrag erforderlichen Klassen enthalten sind.
function get_Type() {
var bodyattr = $("body").attr("class")
if (bodyattr.includes(" page ")) return "page"
if (bodyattr.includes(" single ")) return "post"
return ""
}
Diese Funktion get_pageType() wird auf der aktuellen Seite angewendet und ergibt
Seiten-Id
Jede WordPress-Seite kann entweder über den sprechenden Pfad oder über eine id (Zahl) aufgerufen werden. Die Frage ist, wie ein JavaScript-Programm den Pfad und die Id aus dem HTML-Code herauslesen kann.
Beispiel Beitrag
2023/05/29/ ist das Datum des Beitrags, orientierung-bom ist der Titel des Beitrags. Über die Id kann dieser Beitrag so aufgerufen werden.
Betrachtet man Code des Body-Tags, ist das Kennzeichen für einen Beitrag die Klasse single-post und die Id findet man in der Klasse postid-155966.
<body data-rsssl=1 class="bp-nouveau post-template-default single single-post postid-155966 single-format-standard logged-in admin-bar no-customize-support divi-font-awesome et_pb_button_helper_class et_fixed_nav et_show_nav et_pb_show_title et_secondary_nav_enabled et_primary_nav_dropdown_animation_fade et_secondary_nav_dropdown_animation_fade et_header_style_left et_pb_footer_columns4 et_cover_background et_pb_gutter windows et_pb_gutters3 et_right_sidebar et_divi_theme et-db no-js">
Beispiel Seite
inhalte/nachrichten sind der Pfad einer Seite. Die Seite selbst heißt nachrichten, die übergeordnete Seite heißt inhalte. Über die Id kann diese Seite so aufgerufen werden.
Man sieht, dass Beiträge und Seiten von WordPress beim Aufruf gleichbehandelt werden. Hier ist als Beispiel der umfangreiche Body-Tag dieser Seite:
<body data-rsssl=1 class="bp-nouveau page-template-default page page-id-143025 page-child parent-pageid-38397 logged-in admin-bar no-customize-support divi-font-awesome et_pb_button_helper_class et_fixed_nav et_show_nav et_secondary_nav_enabled et_primary_nav_dropdown_animation_fade et_secondary_nav_dropdown_animation_fade et_header_style_left et_pb_footer_columns4 et_cover_background et_pb_gutter windows et_pb_gutters3 et_right_sidebar et_divi_theme et-db no-js">
Die Klassen page, page-id-143025 und parent-pageid-38397 kennzeichnen diese Publikation als Seite.
Bestimmung der Id
Man muss nicht alles selbst erfinden, eine Suche nach „get id from wordpress page using javascript“ liefert folgende Seite von Stack Overflow: https://stackoverflow.com/questions/18395366/how-to-get-the-current-page-id-in-wordpress-using-jquery. Dieses Script sucht nach page-id und würde daher nur Seiten finden, weil die Beiträge mit postid zu finden sind. Das Script wird daher etwas erweitert und entscheidet selbst, ob es sich um eine Seite oder einen Beitrag handelt.
Die Id einer Seite wird bestimmt als
function get_pagepostId() {
var pageType = get_Type()
var pageTemplate = ""
switch (pageType) {
case "":
return -1
case "page":
pageTemplate = "page-id"
break
default:
pageTemplate = "postid"
break
}
var id = 0;
if (pageTemplate) {
var classList = $('body').attr('class').split(/\s+/);
$.each(classList, function(index, item) {
if (item.indexOf(pageTemplate) >= 0) {
var item_arr = item.split('-');
id = item_arr[item_arr.length -1];
return false;
}
});
}
return id;
}
Wendet man diesen Code auf die aktuelle Seite an, ergibt sich eine id von
Bestimmung der ParentId
Die Parent-Id ist eine Eigenschaft von Seiten. Ist die ParentId=0, ist die betreffende Seite eine Top-Level-Seite, ist also im Menü sichtbar. Hat dagegen die ParentId einen positiven Wert, ist damit jene Seite gemeint, die dieser Seite übergeordnet ist. Solche untergeordneten Seiten werden erst sichtbar, wenn man das Menü aufklappt. Ein ParentId ist bei Beiträgen nicht definiert.
Dieser Text erscheint als Beitrag und nicht als Seite. Daher ist die ParentId = -1 (nicht definiert).
function get_pageParentId() {
var pageType = get_Type()
if (pageType != "page") return -1
var pageTemplate = "parent-pageid"
var id = 0;
var classList = $('body').attr('class').split(/\s+/);
$.each(classList, function(index, item) {
if (item.indexOf(pageTemplate) >= 0) {
var item_arr = item.split('-');
id = item_arr[item_arr.length -1];
return false;
}
});
return id;
}Url
Der Url dieses Beitrags (post) ist
In dem HTML-Code einer Seite kommt diese Angabe vielfach vor. Wie oft, das hängt von den eingesetzten Plugins ab. Die Ermittlung hängt auch vom Seitentype an.
Beitrag
Durch Code-Vergleiche wurde ermittelt, dass folgende Code-Kombinationen bei allen Beiträgen vorkommen:
<link rel="alternate" type="application/rss+xml" title="ClubComputer » Feed" href="https://clubcomputer.at/feed/" />
<link rel="alternate" type="application/rss+xml" title="ClubComputer » Kommentar-Feed" href="https://clubcomputer.at/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="ClubComputer » Orientierung-BOM Kommentar-Feed" href="https://clubcomputer.at/2023/05/29/orientierung-bom/feed/" />Diese Zeilen kommen auf jeder Beitragsseite vor, wenn in den Einstellungen die Publikation von RSS-Feeds aktiviert ist. Da das die Voreinstellung ist, kann man davon ausgehen, dass dieser Code praktisch immer vorkommt.
Weiters ist es notwendig, dass die Beträge im Format /yyyy/mm/dd/Beitragsname/ angezeigt werden. Einstellung unter Dashboard -> Einstellungen -> Permalinks -> Tag und Name
Um nun den Url der Seite zu bestimmen, benötigt man die letzte Zeile, die folgenden Code enthält:
href="https://clubcomputer.at/2023/05/29/orientierung-bom/feed/"Man sucht daher alle Link-Tags und jenen mit diesem href-Format nimmt man als den Url dieser Seite, abzüglich des letzten Wortes feed/ und erhält:
Die Funktion zur Bestimmung des Url der Seite:
function get_postUrl() {
const regExp = new RegExp("(https|http):\/\/"+location.hostname+"\/[12][90][0-9][0-9]\/[01][0-9]\/[0123][0-9]\/(.+)\/feed\/")
var result=""
const regExpId = new RegExp("(https|http):\/\/clubcomputer.at\/\\?p=[0-9]+\/feed\/")
$("link[rel='alternate']").each(function(index) {
var href=$(this).attr("href")
if (regExp.test(href)) {
result = href
return false
}
if (regExpId.test(href)) {
result = href
return false
}
})
return result.replace("feed/","")
}
var result = get_postUrl()
$(".postUrl").html(result) Seite
Bei einer Seite kann man den Eintrag als RSS-Feed nicht nutzen, weil Seiten dort nicht publiziert werden.
Bei Seiten bietet sich folgender Eintrag an:
<link rel="canonical" href="http://www.ewkil.at/ewkil-4/wir/">
Die Abfrage durch die Funktion get_pageUrl() ergibt:
Das zugehörige Programm ist:
function get_postUrl() {
const regExp = new RegExp("(https|http):\/\/"+location.hostname+"\/[12][90][0-9][0-9]\/[01][0-9]\/[0123][0-9]\/(.+)\/feed\/")
var result=""
const regExpId = new RegExp("(https|http):\/\/clubcomputer.at\/\\?p=[0-9]+\/feed\/")
$("link[rel='alternate']").each(function(index) {
var href=$(this).attr("href")
if (regExp.test(href)) {
result = href
return false
}
if (regExpId.test(href)) {
result = href
return false
}
})
return result.replace("feed/","")
}
Franz war pensionierter HTL Lehrer (TGM), Präsident von ClubComputer, Herausgeber der Clubzeitung PCNEWS und betreute unser Clubtelefon und Internet Support. Er war leidenschaftlicher Rapid Wien Fan. Er ist leider Anfang Jänner 2024 nach langer schwerer Krankheit verstorben.
Neueste Kommentare