WordPress Javascript: Ein Leitfaden für Anfänger

Wenn Sie eine Million Webentwickler fragen, was JavaScript ist, erhalten Sie eine Million verschiedene Antworten. So ziemlich alles, was im Web interaktiv ist, wird mit JavaScript erstellt.

Als modernes Content-Management-System (CMS) verlassen sich WordPress und viele seiner Plugins teilweise auf JavaScript, um die Arbeit zu erledigen. Anders als es sich vielleicht anhört, hat JavaScript keine Beziehung zur Programmiersprache Java. Es wird nur zu Marketingzwecken so genannt.

Lassen Sie uns in alles eintauchen, was Sie wissen müssen, um die kombinierte Leistung von JavaScript und WordPress zu nutzen.

Was ist JavaScript?

Vor langer Zeit stützte sich das Internet ausschließlich auf HTML und CSS. Diese Kombination ermöglicht ein sehr einfaches Styling von Inhalten. Allerdings konnte nur sehr wenig getan werden, um Inhalte zu dynamisieren, und das Erstellen von Webanwendungen kam nicht in Frage.

Da die Wartung von Servern viel teurer war, beschlossen die Entwickler, JavaScript für den Betrieb auf dem Client-Rechner zu schreiben. Ähnlich wie andere funktionale Programmiersprachen geschrieben, kann JavaScript Daten in Funktionen aufnehmen, verarbeiten und Daten ausgeben.

Webbrowser verfügen über eine JavaScript-Engine, die weiß, wie JavaScript-Code ausgeführt wird. Die JavaScript-Engine in Chrome ist beispielsweise v8, während die JavaScript-Engine von FireFox SpiderMonkey ist. Aus diesem Grund ist Javascript auf Browser angewiesen, um zu „verstehen“, wie die Anzeige von Daten interpretiert, verarbeitet und manipuliert wird.

Die technischen Aspekte von JavaScript

Möchten Sie mehr über die Technologie hinter JavaScript erfahren? Es gibt einige wichtige Unterscheidungsmerkmale für diejenigen, die Erfahrung in anderen Arten der Entwicklung haben. Erstens ist JavaScript wie PHP typunabhängig. Das bedeutet, dass seine Variablen keinen definierten Typ haben und jede gegebene Variable fast jedem Werttyp zugewiesen werden kann.

Die meisten modernen Sprachen sind „objektorientiert“, was bedeutet, dass sie sich auf wiederverwendbare „Klassen“ verlassen, die ein wörtliches Objekt darstellen. Am nächsten kommt JavaScript dem durch „Prototypen“. Diese Datenstrukturen können wiederverwendet werden und können bestimmte Werte enthalten, aber ihre Funktionalität und Benutzerfreundlichkeit sind weitaus eingeschränkter als bei Sprachen, die um das objektorientierte Konzept herum aufgebaut sind, wie Java.

Was macht JavaScript?

Aufgrund der großen Community-Unterstützung und Investitionen von großen Unternehmen wie Facebook und sogar Netflix kann JavaScript viel mehr als nur in Webbrowsern funktionieren. JavaScript kann etwas so Einfaches wie das Erfassen des aktuellen Jahres, um es neben dem Copyright-Symbol auf einer Website anzuzeigen, und komplexere Arbeiten, wie zum Beispiel den Großteil der Verarbeitung für einen Online-Bildeditor erledigen.

Kurz gesagt, JavaScript macht fast alles, was der Entwickler auf dem Computer des Clients tun möchte. JavaScript wird lokal auf dem Clientcomputer zwischengespeichert, wenn der Client eine Site besucht, die es verwendet.

Während sensible Daten auf dem Server verarbeitet werden müssen, verwenden viele webbasierte Anwendungen JavaScript stark, um die Rechenleistung des Client-Rechners zu nutzen. Jetzt, da wir uns im Zeitalter endloser „Frameworks“ befinden, die die Entwicklung verschiedener Arten von Inhalten viel schneller machen, sind die Möglichkeiten unendlich.

Ist JavaScript sicher?

Wie die meisten Protokolle und älteren Sprachen wurde JavaScript ursprünglich nicht im Hinblick auf Sicherheit entwickelt. Angesichts der Verbreitung von Cyberangriffen ist dies ein völlig vernünftiger Gedanke.

Es gibt Browsererweiterungen wie „NoScript“, die einfach den gesamten JavaScript-Code an der Ausführung blockieren. Solange Sie die allgemeinen Regeln des Webs befolgen und keine nicht vertrauenswürdigen Websites besuchen, ist es in Ordnung, JavaScript ausführen zu lassen.

Da es sich um eine Programmiersprache handelt, können böswillige Benutzer sie natürlich missbrauchen, um Ihren Computer anzugreifen. Moderne Browser erkennen die meisten dieser Angriffe automatisch. Wenn Sie sich Sorgen um die Sicherheit von WordPress-JavaScript machen, können Sie sich mit einem WordPress-Sicherheits-Plugin beruhigen, das die meisten Aspekte der Website-Sicherheit auf Autopilot setzt.

Zwei Haupttypen von JavaScript-Angriffen

Das Sprichwort „Halte deine Freunde nah und deine Feinde näher“ ist relevant, wenn es um Entwicklung und Sicherheit geht. Es ist sehr wichtig zu verstehen, wie die Bösen JavaScript ausnutzen, damit Sie ihre Bemühungen vereiteln können!

Cross-Site-Scripting (XSS)

Cross-Site-Scripting (XSS) ist eine Art von Malware-Angriff, der durch die Ausnutzung von Cross-Site-Schwachstellen auf jeder WordPress-Site ausgeführt wird. Tatsächlich ist dies die häufigste Methode, mit der WordPress-Sites gehackt werden, da es so viele WordPress-Plugins mit XSS-Schwachstellen gibt.

Ein Cross-Site-Scripting-Angriff wird verwendet, wenn eine Seite das Senden von Daten auf ihr zulässt. Bei diesem Angriff platziert der böswillige Benutzer JavaScript-Code in den Daten, die an eine öffentlich zugängliche Seite gesendet werden sollen.

Wenn keine Abwehrmaßnahmen ergriffen wurden, führt dieser bösartige Code tatsächlich den JavaScript-Code auf jedem Computer aus, der diese Seite besucht. Aus diesem Grund ist es wichtig, Eingaben zu „bereinigen“. Das bedeutet, dass Sie vor der Veröffentlichung Dinge wie Klammern und Anführungszeichen entfernen, die den Code nutzlos machen würden.

Cross Site Request Forgery (CSRF)

Diese Art von Angriff nutzt Webseiten aus, bei denen Sie möglicherweise bereits angemeldet sind. Das häufigste Szenario besteht darin, dass Sie bei Ihrer Bank angemeldet sind.

Angenommen, Sie sind in Ihr Bankkonto eingeloggt, entscheiden sich dann aber, auf eine Torrent-Website zu gehen, auf der CSRF einsatzbereit ist. CSRF übernimmt in Ermangelung von Browserabschwächungen das Linkmuster, um Dinge wie Banküberweisungen für jede große Bank zu erledigen, und führt sie dann im Hintergrund auf Ihrem Computer aus.

Ein Szenario, das bei einer großen Website und einer großen Bank tatsächlich passierte, war, dass der Link der Bank zum Überweisen von Geld wie folgt aussah: www.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345 , um 1.000 USD auf ein Konto mit der Nummer 12345 zu überweisen.

Für die Bank sieht es so aus, als ob Sie die Anfrage angefordert haben, und da die Anfrage von Ihrer IP-Adresse stammen würde, ist es schwer zu beweisen, dass Sie sie nicht initiiert haben. Glücklicherweise erkennen die meisten modernen Browser dies automatisch und verhindern es.

Kann ich JavaScript in WordPress verwenden?

Ja, Sie können JavaScript verwenden, wenn Sie für WordPress entwickeln. Denken Sie daran, dass WordPress ein flexibles Content-Management-System ist, das über zwei Bearbeitungsmodi verfügt. Mit einem davon können Sie Code direkt bearbeiten, mit dem anderen können Sie einen Editor verwenden, der dem eines Textverarbeitungsprogramms ähnelt, auch bekannt als „WYSIWYG“-Editor. In der neuesten Version von WordPress heißt der WYSIWYG-Editor Gutenberg.

Denken Sie daran, dass Sie auch JavaScript verwenden können, wenn Sie Erweiterungen für WordPress entwickeln. Während die Server-Seite von WordPress PHP ist, ist die Client-Seite fast 100% der Zeit JavaScript.

Sollte ich JavaScript für WordPress lernen?

Die Antwort auf diese Fragen hängt davon ab, was Sie mit WordPress vorhaben. Wenn Sie nur ein paar statische Seiten erstellen möchten, die Sie mit der Plattform generieren, können Sie wahrscheinlich JavaScript nicht lernen.

Auf der anderen Seite ist es ziemlich einfach, mit JavaScript zu beginnen, und Sie werden auch viel darüber lernen, wie HTML und CSS funktionieren. Neben der WordPress-Schulung sollten Sie jedoch daran arbeiten, JavaScript zu lernen, wenn Sie eine dynamische und einprägsame Website erstellen möchten.

Eine kurze Warnung: Wenn Sie ein beginnender Webentwickler sind, erwarten Sie nicht, dass Sie JavaScript in wenigen Tagen beherrschen. JavaScript ist berüchtigt für sehr vage Fehlermeldungen und wird oft als „Spaghetti-Code“ kritisiert. Dies bedeutet, dass Entwickler im Laufe der Jahre viel Code angehäuft haben, ohne ihn richtig zu organisieren. Darüber hinaus lernen die meisten Entwickler, in Frameworks zu programmieren, die JavaScript verwenden, aber syntaktisch etwas anders sind.

Sie sollten vor allem Zeit in das Erlernen von JavaScript investieren, wenn Sie ein Freiberufler oder eine Agentur sind, die die Websites von Kunden verwaltet. Es gibt zwar erstklassige Tools, mit denen Sie mehrere WordPress-Sites verwalten können, aber kein Plugin kann die Sites für Sie erstellen!

Wenn Sie außerdem Webentwickler werden möchten, ist das Erlernen von JavaScript für diese Berufe von Vorteil:

• Entwickler für Benutzeroberflächen
• Backend-Entwickler
• Full-Stack-Entwickler

Darüber hinaus dient das Erlernen von JavaScript zusammen mit fortgeschrittenerem HTML, CSS und PHP als solide WP-Grundlage, die wahrscheinlich die Gemeinkosten für Sie senken wird. Sie müssen keine externen Auftragnehmer mehr bezahlen, was Ihr Endergebnis beeinträchtigt, um Aufgaben auszuführen, deren Ausführung in Wirklichkeit Minuten dauern kann. Sobald Sie JavaScript beherrschen, können Sie zu beliebten Frameworks wie React und Angular übergehen, um wirklich einzigartige, reaktionsschnelle Anwendungen in WordPress zu erstellen.

Wie schreibe ich JavaScript beim Codieren in WordPress?

Auch wenn das Hinzufügen von JavaScript zu einer WordPress-Site nicht so einfach ist wie das Hinzufügen von CSS und HTML, dauert es nicht lange, um loszulegen. Es gibt zwei verschiedene Möglichkeiten, sich dem zu nähern, und jeder hat einen anderen Zweck.

Methode 1: Auf jeder Seite

Wenn Sie auf jeder Seite Ihrer WordPress-Site dasselbe Skript ausführen möchten, wäre das manuelle Hinzufügen des Codes zu jeder Seite ziemlich mühsam, um es gelinde auszudrücken. Die richtige Stelle zum Einfügen von JavaScript in HTML befindet sich in der Kopf- und Fußzeile der Seite.

Es gibt ein paar kostenlose Plugins, die Ihr angepasstes JavaScript nehmen und in die Kopf- und/oder Fußzeile jeder Seite Ihrer WordPress-Site einfügen. WordPress-Administratoren lieben diese Plugins, weil sie perfekt mit Google Analytics zusammenarbeiten und sicherstellen, dass jeder Seitenaufruf gezählt wird, was dazu beiträgt, das SEO-Ranking schneller zu steigern.

Methode 2: Unterschiedliches JavaScript auf jeder Seite

Nehmen wir an, Sie betreiben eine WordPress-Site, die auf jeder Seite ein anderes Tool hat, das auf mindestens eine „Bibliothek“ angewiesen ist, um zu funktionieren. Wenn Sie erzwingen, dass Ihr gesamtes JavaScript auf jeder einzelnen Seite geladen wird, insbesondere wenn es nicht benötigt wird, wird der Zugriff auf Ihre Website lediglich verlangsamt. Der gesunde Menschenverstand sagt uns, dass das Verlangsamen der Erfahrung Ihrer Besucher nicht der beste Weg ist, um Geschäfte zu gewinnen!

Es gibt viele Tutorials im Internet, die wahnsinnig komplizierte Methoden zur Durchführung dieses Prozesses haben. Es stimmt zwar, dass dies durch komplexe Änderungen in Ihrer Datei functions.php möglich ist, aber es besteht keine Notwendigkeit, diesen Ansatz zu wählen, es sei denn, Sie haben Kopfschmerzen.

Installieren Sie stattdessen das Code Embed-Plugin auf Ihrer Website. Auf diese Weise können Sie JavaScript hinzufügen und an einer beliebigen Stelle auf der Seite einbetten.

Verwenden des CodeEmbed-Plugins

Gehen Sie nach der Installation des Code Embed-Plugins zu den Bildschirmoptionen und aktivieren Sie das Kontrollkästchen „Benutzerdefinierte Felder“. Dadurch können Sie Ihr JavaScript zur Seite hinzufügen.

Auf der Bearbeitungsseite sehen Sie ein Feld mit der Aufschrift "Benutzerdefinierte Felder" mit der Option "Neue benutzerdefinierte Felder eingeben". Klicken Sie darauf und Sie haben leere Textfelder, um den Namen Ihres JavaScript-Codes sowie für den Code selbst einzugeben.

Um Konflikte mit bestehenden WordPress-Codes zu vermeiden, müssen Sie den Namen Ihres JavaScript-Codes mit den Großbuchstaben „CODE“ beginnen. Etwas wie "CODEtimer" wäre in Ordnung. Dann fügen Sie das eigentliche JavaScript in das andere Feld ein. Stellen Sie sicher, dass Sie die Tags zum Öffnen und Schließen des Skripts einschließen!

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche "Benutzerdefiniertes Feld hinzufügen". Identifizieren Sie schließlich, wo auf der Seite der JavaScript-Code ausgeführt werden soll. Wenn der Code beispielsweise einen Timer lädt, suchen Sie die Stelle auf Ihrer Seite, an der Sie diesen Timer einfügen möchten. Sie verwenden dann die genaue Syntax [[CODEtimer]] , damit WordPress Ihr JavaScript dort einfügt , und fertig!

Wie binde ich meine JavaScript- und CSS-Dateien in WordPress ein?

Obwohl WordPress über integrierte Themes verfügt, bevorzugen viele Webentwickler ein einzigartigeres Design und verwenden ihr eigenes CSS. Sie benötigen außerdem eine Möglichkeit, diese JavaScript-Dateien zu speichern.

In diesem Abschnitt müssen Sie zu Ihrem Dateimanager gehen und die Datei namens „functions.php“ suchen. Beachten Sie, dass sich dies in dem Ordner befindet, in dem sich das Basisdesign für Ihre Site befindet.

CSS zu functions.php hinzufügen

Sobald Sie sich in der Datei functions.php befinden , führen Sie diese Schritte aus:

1. Erstellen Sie in einer neuen Zeile eine leere Funktion, indem Sie die Codefunktion hinzufügen
   addMyCSS() { #Später ausfüllen }
2. „Registrieren“ Sie Ihre CSS-Datei bei WordPress, indem Sie im nächsten Schritt die integrierte Funktion namens wp_register_style verwenden
3. Entfernen Sie den Füller, den wir in den Code eingefügt haben, und setzen Sie stattdessen wp_register_style('name_of_css_style',plugins_url('file-location.css',__FILE__));
4. Wir haben WordPress jetzt gesagt, wie wir unseren CSS-Stil nennen sollen und wo er sich befindet. Jetzt ist es an der Zeit, den Stil in die Warteschlange einzureihen oder WordPress mitzuteilen, dass wir bereit sind, ihn zu verwenden.
5. Bleiben Sie im Funktionsblock addMyCSS und fügen Sie den Code wp_enqueue_style('name_of_css_style'); direkt unter dem Code, den wir im letzten Schritt eingegeben haben.
6. Es gibt noch einen letzten Schritt, aber stellen Sie zunächst sicher, dass Sie sich AUSSERHALB der gesamten von uns erstellten Funktion und im allgemeinen Teil der PHP-Datei befinden.
7. Außerhalb von addMyCSS fügen Sie einfach die folgende Zeile hinzu: add_action('wp_enqueue_scripts','name_of_css_style'); . Dies weist WordPress an, das Laden dieser Datei beim Laden der Seite auszulösen.

Sie fragen sich vielleicht, warum wir wp_enqueue_scripts in der add_action- Funktion für ein Stylesheet haben. Dies ist einfach die Art und Weise, wie WordPress die Funktion immer implementiert hat.

JavaScript-Dateien zu WordPress hinzufügen

Nachdem wir nun das Generieren einer Funktion, das Registrieren einer Datei und das Hinzufügen einer Aktion durchgegangen sind, sollte dieser Teil ein Kinderspiel sein!

1. Erstellen Sie eine Funktion in der functions.php namens addMyJS, genau wie wir es mit addMyCSS getan haben .
2. Wir werden die Funktion wp_register_script verwenden , aber sie ist etwas komplexer. Es hat fünf „Parameter“ (die in Klammern gesetzten Elemente). Schauen Sie unten, um zu sehen, was jeder Parameter ist.
3. wp_register_script(1. Ihr Skriptname, 2. plugins_url(location_of_script.js, __FILE__), 3. Array von JS-Abhängigkeiten, normalerweise array(jquery), 4. (Optional) Version Ihrer JS-Datei in einfachen Anführungszeichen, 5. sollte . sein true, wenn Sie das JS in Ihrer Fußzeile haben möchten, false, wenn Sie es in der Kopfzeile haben möchten);
4. Hier ist ein praktisches Beispiel für JavaScript, das in der Fußzeile eines Themes ausgeführt wird: wp_register_script('timer_js', plugins_url('timer_file.js', __FILE__), array('jquery'),'1.0', true);
5. Auch außerhalb unserer addMyJS funktionieren „enqueue“ Ihr Skript durch diese in Ihrem allgemeinen Bereich der PHP setzen: add_action ( ‚wp_enqueue_scripts‘, ‚addMyJS‘);

Es mag komplex aussehen, aber wenn Sie den Dreh raus haben, dauert es weniger als eine Minute, also keine Angst!

Welche Plugins kann ich verwenden, um JavaScript zu WordPress hinzuzufügen?

Es gibt viele völlig kostenlose Plugins nur für diesen Zweck. Jeder funktioniert etwas anders, also experimentieren Sie mit ein paar, bevor Sie einen Commit durchführen. Hier sind fünf große zum Ausprobieren.

• ASync – Einzigartig lädt dieses Plugin sowohl Ihre JS- als auch Ihre CSS-Dateien getrennt vom Rest Ihrer Seite. Dies kann besonders hilfreich sein, wenn ein Codierungsfehler vorliegt, der andernfalls das Laden Ihrer Seite auf unbestimmte Zeit verhindern würde.

• JS in Widgets – Sie müssen nur ein paar Codezeilen für etwas wie Google Analytics hinzufügen? Dieses Plugin nimmt Ihnen den Ärger und ermöglicht das Hinzufügen kleiner Snippets zu Ihren WordPress-Sites.

• Zia CSS/JS Helper – Dieser ist bei weitem der beste für diejenigen, die Erfahrung mit der klassischen HTML/CSS/JS-Webentwicklung haben. Es macht Ihre WordPress-Bearbeitungsfunktionalität wie das Bearbeiten einer Site über den Dateimanager von cPanel. Sie können Inline-CSS und JavaScript verwenden, um schnell Code-Bits hinzuzufügen, externe Dateien zu erstellen und zu verwalten und vieles mehr.

Sichern Sie Ihre Site immer zuerst!

Während die überwiegende Mehrheit der WordPress-Plugins Ihrer Website keinen Schaden zufügt, besteht immer die Möglichkeit, dass Sie auf Probleme stoßen. Bevor Sie zusätzliche Plugins installieren oder Ihre Site ändern, erstellen Sie ein Backup Ihrer Site mit einem WordPress-Backup-Plugin, das vollständige Backups Ihrer WordPress-Installation wie BackupBuddy verarbeiten kann. Sparen Sie sich stundenlange Nacharbeit und stellen Sie sicher, dass all Ihre harte Arbeit nicht verloren geht.

Kann ich WordPress-APIs mit JavaScript verwenden?

Wie Sie vielleicht wissen, verfügt WordPress über eine umfangreiche Reihe von APIs oder Application Programming Interfaces. APIs sind im Wesentlichen serverseitige Funktionen, die Sie in Sprachen wie JavaScript verwenden können. Die neuere, modernere Methode für Entwickler zum Erlernen der WordPress-API-Funktionalität ist über die WordPress WordPress APIs Code Reference-Seite.

Hier haben wir die „eingebauten Funktionen“ erhalten, die wir zuvor verwendet haben. Wir könnten noch tagelang über jede Funktion in den APIs reden und wie sie zusammen mit JavaScript arbeiten. Dies ist jedoch ein fortgeschrittenes Thema, das einfach individuelle Zeit und Hingabe erfordert, um es zu lernen.

Gibt es JavaScript-Bibliotheken, die auf WordPress zugeschnitten sind?

Jawohl! In der Erkenntnis, dass viele Entwickler nicht den gesamten WordPress-API-Inhalt beherrschen, haben viele Programmierer JavaScript-Bibliotheken erstellt, die leicht eingebettet werden können, indem sie eines der zuvor besprochenen Plugins verwenden.

Die meisten JavaScript-Bibliotheken befinden sich auf GitHub und sind völlig kostenlos. Es gibt Hunderttausende verfügbare JavaScript-Bibliotheken, die mit WordPress kompatibel sind, von einer, die WordPress lustige Effekte hinzufügt, bis hin zu einer, mit der Sie eine Website mit einem sehr ähnlichen Layout wie Pinterest erstellen können!

Die bekannteste Bibliothek, die mit WordPress (und den meisten Websites) verwendet wird, heißt jQuery. jQuery nimmt JavaScript die Komplexität und sobald Sie den Dreh raus haben, schreiben Sie schnell und einfach Funktionen.

Hilfe! Mein WordPress-JavaScript funktioniert nicht!

Einer der weniger glücklichen Teile von JavaScript ist, dass Fehler nicht offensichtlich sind. Und das Hinzufügen von WordPress darüber hinaus kann es ziemlich verwirrend machen.

Einige Fehler können so leicht wie ein vergessenes Anführungszeichen verursacht werden. Andere können durch schwerwiegende Codierungsfehler verursacht werden, die nicht so leicht zu identifizieren sind. Wie also erkennen professionelle Entwickler den Unterschied?

Es gibt zwei Hauptschlüssel zur Fehlerbehebung: die JavaScript-Funktion console.log und die Browser-Debugging-Konsole. Besonders die Konsole von Chrome eignet sich dafür hervorragend.

Konsole.log

Dies kann verwendet werden, um den Wert einer Variablen an einem bestimmten Punkt in einer Funktion zu sehen und sicherzustellen, dass Teile von Funktionen tatsächlich erreicht werden. In eine JavaScript-Datei würden Sie einfach so etwas wie console.log("test"); .

Die Debugging-Konsole

Je nach verwendetem Browser ist das Setup der Konsole unterschiedlich. Im Allgemeinen müssen Sie nur F12 drücken, um es zu öffnen, und dann auf die Registerkarte „Konsole“ klicken.

Die Konsole zeigt an, in welcher Zeile welcher JavaScript-Datei ein Fehler aufgetreten ist. Es zeigt normalerweise den vollständigen „Stacktrace“ oder die Reihe von Dateien an, die durchlaufen werden müssen, bis Sie den Täter treffen. Hier werden auch Ihre console.log- Nachrichten gedruckt.

Zusammenfassung: JavaScript + WordPress

Es gibt professionelle Tools, die Ihnen viel mehr Einblick geben, aber diese kosten normalerweise einen hübschen Cent. Die gute Nachricht ist, dass die Tools mit dir skalieren, wenn du zum weltweit größten WordPress-JavaScript-Entwickler aufsteigst!

Kristen Wright

Kristen schreibt seit 2011 Tutorials, um WordPress-Benutzern zu helfen. Normalerweise arbeitet sie an neuen Artikeln für den iThemes-Blog oder entwickelt Ressourcen für #WPprosper. Außerhalb der Arbeit schreibt Kristen gerne Tagebuch (sie hat zwei Bücher geschrieben!), wandert und zeltet, kocht und erlebt tägliche Abenteuer mit ihrer Familie, in der Hoffnung, ein präsenteres Leben zu führen.