Erinnern Sie sich, als WordPress in 3.2 das ablenkungsfreie Schreiben eingeführt hat? Es ist eine erstaunliche Funktion, mit der Sie alles andere vergessen und sich auf das Schreiben konzentrieren können. Aber wie sieht es mit den Lesern aus?
Wenn Sie ein Purist sind und Ihre Inhalte gerne ohne Beilagen von Anzeigen, Listen mit neuesten Posts, Newsletter-Formularen, Social-Media-Widgets usw. konsumieren, sind Sie wahrscheinlich ein Fan von Evernotes Clearly, Tasche, Reeder oder eine andere ähnliche App. Ich sage nicht, dass alle Beilagen schlecht sind, aber manchmal fühlt es sich gut an, sie zu ignorieren und sich auf nichts als den Inhalt zu konzentrieren, und sorgt für eine köstliche „Infomahlzeit“.
Wie schwierig ist es also, Ihrer WordPress-Website ein ablenkungsfreies Lesen hinzuzufügen und das Leseerlebnis der Besucher zu verbessern? Tot. Einfach.
Hier der Spielplan:
- Finden Sie eine Möglichkeit, Posttitel und Inhalt zu isolieren (mit der WordPress-Funktion add_filter)
- Ablenkungsfreies Lesen Toggle-Link hinzufügen (jQuery)
- Wenn auf den Umschaltlink geklickt wird, ablenkungsfreies Lesemodal anzeigen (jQuery)
- Ablenkungsfreies Lesen von modalen Inhalten (CSS)
- Wenn der Link schließen geklickt wird, ist er wieder normal (jQuery)
Titel und Inhalt des Beitrags isolieren
Was wir hier tun müssen, ist es möglich zu machen, Post-Titel und -Inhalte in einer jQuery-Funktion gezielt zu verwenden. Da Themen unterschiedliche Elemente verwenden, um diese beiden anzuzeigen, wir müssen die add_filter-Funktion verwenden, um sowohl den Titel als auch den Inhalt in Divs einzuschließen, die wir dann leicht anvisieren können:
// Wrap post title in a div
add_filter( 'the_title', 'thsp_dfr_title', 1 );
function thsp_dfr_title( $title ) {
global $post;
// We only want to do this for the post in main loop in single post view
if( is_singular() && $title == $post->post_title && in_the_loop() ) {
return '<h1 id="thsp-dfr-title">' . $title . '</h1>';
}
return $title;
}
// Wrap post content in a div
add_filter( 'the_content', 'thsp_dfr_content', 1 );
function thsp_dfr_content( $content ) {
global $post;
// Again, only do this in single post view
if( is_singular() ) {
/*
* New lines are necessary so WordPress wpautop would
* create the first paragraph
*/
return '<div id="thsp-dfr-content">' . "n" . "n" . $content . '</div>';
}
return $content;
}
Jetzt haben wir #thsp-dfr-title
und #thsp-dfr-content
Elemente, mit denen Sie arbeiten möchten, also reihen wir einige JS- und CSS-Dateien in die Warteschlange ein:
// Enqueue scripts and styles
add_action('wp_enqueue_scripts', 'thsp_dfr_styles');
function thsp_dfr_styles() {
global $post;
if( is_singular() ) {
wp_enqueue_script(
'thsp_dfr',
plugins_url( '/js/distraction-free-reading.js', __FILE__ ),
array( 'jquery' ),
'v1.0'
);
wp_enqueue_style(
'thsp_dfr',
plugins_url( '/css/distraction-free-reading.css', __FILE__ ),
array(),
'v1.0'
);
}
}
Ablenkungsfreies Lesen hinzufügen Toggle
Da ablenkungsfreies Lesen bei deaktiviertem Javascript nicht funktioniert, verwenden wir jQuery, um Toggler hinzuzufügen. Es ist nutzlos für Nicht-Javascript-Benutzer, es ist nicht nötig, tote Links auf sie zu werfen.
// Add distraction free reading toggler
$('body').append('<a id="thsp-dfr-toggle" href="#">Distraction free reading</a>');
Fügen Sie dem Link-Element einige grundlegende CSS hinzu und wir erhalten Folgendes:
Wechsel in den ablenkungsfreien Lesemodus
Alles, was wir dafür brauchen, ist bereits vorhanden. Ein Link zum Anhängen einer Klickfunktion an – check, zwei Elemente mit bekannten IDs können wir klonen – check. Also machen wir’s.
// Clicking toggle link
$('#thsp-dfr-toggle').click(function(){
// Add distraction free modal
$('body').append('<div id="thsp-dfr-overlay"><div id="thsp-dfr-wrapper"></div></div>');
// Add post title to distraction free modal
$('#thsp-dfr-title').clone().attr('id', 'thsp-dfr-title-cloned').appendTo('#thsp-dfr-wrapper');
// Add post content to distraction free modal
$('#thsp-dfr-content').clone().attr('id', 'thsp-dfr-content-cloned').appendTo('#thsp-dfr-wrapper');
// Add close link to distraction free modal
$('body').append('<a id="thsp-dfr-close" href="#">Close</a>');
// Hide show modal link
$(this).hide();
return false;
});
// Clicking close link
$('#thsp-dfr-close').live('click', function(){
// Remove modal
$('#thsp-dfr-overlay').remove();
// Show distraction free toggle again
$('#thsp-dfr-toggle').show();
// Hide close modal link
$(this).hide();
return false;
});
Also, hier ist eine Aufschlüsselung dessen, was wir hier tun:
1. Hinzufügen von zwei Divs direkt vor dem Schließen des Body-Tags
2. Titel und Inhalt des Beitrags klonen und zum inneren Div . hinzufügen
3. Toggle-Link entfernen
4. Hinzufügen eines weiteren Links, den wir verwenden werden, um das ablenkungsfreie Lesen zu beenden
Wenn Sie auf diesen Schließen-Link klicken, wird der modale und der Schließen-Link selbst entfernt und der Link zurückgebracht, der den ablenkungsfreien Lesemodus aktiviert.
Ablenkungsfreie Leseinhalte gestalten
Wir brauchen etwas CSS, um unseren Modal- und Toggle-Link zu positionieren und ihnen ein grundlegendes Styling zu geben, also hier ist es:
/* 100% width and height element to hide site's regular look */
#thsp-dfr-overlay {
background: #222;
background: rgba(0,0,0,0.9);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 50px 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.admin-bar #thsp-dfr-overlay {
/* Make it look good with admin bar */
padding: 78px 0 50px;
}
/* Distraction free reading content wrapper */
#thsp-dfr-wrapper {
background: #f9f9f9;
width: 45em;
max-width: 90%;
margin: 0 auto;
padding: 2em 3em;
height: 100%;
overflow: scroll;
box-shadow: 0 0 2em rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 2em rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 2em rgba(0,0,0,0.8);
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* Distraction free toggle and close buttons */
#thsp-dfr-toggle,
#thsp-dfr-close {
position: fixed;
bottom: 3px;
right: 3px;
z-index: 999;
display: inline-block;
background: #333;
color: #fff;
padding: 0.5em;
border: 1px solid #fff;
text-decoration: none;
}
Denken Sie daran, dass dadurch nur die Overlay- und Wrapper-Divs formatiert werden, nicht der Inhalt darin. Im Twenty Twelve-Thema sieht das am Ende etwa so aus:
Irgendwie ist dort „Lang lebe Eric Meyers CSS-Reset“ geschrieben, also möchten Sie natürlich etwas fettes Typografie-CSS hinzufügen, damit es gut aussieht. Glücklicherweise ist es einfach, genügend spezifische CSS-Selektoren zu erstellen, die das Standard-CSS des Themas überschreiben, da unser ablenkungsfreier Leseinhalt darin eingeschlossen ist #thsp-dfr-overlay
und #thsp-dfr-wrapper
div. Nach einem Facelifting (Check Github-Seite des Projekts für die vollständige CSS-Datei), dies haben wir:
Viel besser, aber Sie wissen, was sie sagen…
Geben Sie einem Front-End-Entwickler etwas CSS und er wird Stunden damit verbringen, es zu optimieren. Lassen Sie einen Front-End-Entwickler sein eigenes CSS schreiben und er wird immer noch Stunden damit verbringen, daran zu arbeiten.
Also lass das ablenkungsfreie Lesen von modalen Inhalten so gut oder schlecht aussehen, wie du willst 🙂
Der Plan ist, dieses Konzept zu einem voll funktionsfähigen WordPress-Plugin zu entwickeln. Wenn Sie also mitmachen und einen Beitrag leisten möchten, hier Github-Seite des Projekts.