به یاد دارید زمانی که وردپرس نوشتن بدون حواس پرتی را معرفی کرد، در نسخه 3.2؟ این یک ویژگی شگفت انگیز است که به شما امکان می دهد همه چیز را فراموش کنید و روی نوشتن تمرکز کنید. اما خوانندگان چطور؟

اگر اهل خالص بودن هستید و دوست دارید محتوای خود را بدون هیچ گونه مخلفات تبلیغاتی، لیست آخرین پست ها، فرم های خبرنامه، ویجت های رسانه های اجتماعی و غیره مصرف کنید، احتمالاً از طرفداران Evernote’s Clearly هستید، Pocket، Reeder یا هر برنامه مشابه دیگری. ناگفته نماند که همه غذاهای جانبی بد هستند، فقط گاهی اوقات نادیده گرفتن آنها و تمرکز بر چیزی جز محتوا احساس خوبی دارد و یک “غذای اطلاعاتی” خوشمزه ایجاد می کند.

بنابراین افزودن خواندن بدون حواس پرتی به وب سایت وردپرس خود و بهبود تجربه خواندن بازدیدکنندگان آن چقدر دشوار است؟ مرده. ساده است.

این برنامه بازی است:

• راهی برای جداسازی عنوان و محتوای پست (با استفاده از تابع add_filter وردپرس) پیدا کنید
• پیوند جابجایی خواندن بدون حواس پرتی (jQuery) را اضافه کنید
• هنگامی که روی پیوند کلیک می‌شود، حالت خواندن بدون حواس‌پرتی (jQuery) نشان داده شود
• محتوای سبک خواندن بدون حواس پرتی (CSS)
• وقتی روی پیوند بسته کلیک می‌شود، به حالت عادی برمی‌گردد (jQuery)

جداسازی عنوان و محتوای پست

کاری که در اینجا باید انجام دهیم این است که بتوانیم عنوان و محتوای پست را در یک تابع jQuery هدف قرار دهیم. از آنجایی که تم ها از عناصر متفاوتی برای نمایش آن دو استفاده می کنند، ما باید از تابع add_filter استفاده کنیم تا عنوان و محتوا را در div هایی قرار دهیم که به راحتی می توانیم هدف قرار دهیم:

// عنوان پست را در یک div قرار دهید
add_filter('the_title', 'thsp_dfr_title', 1 );
تابع thsp_dfr_title($title) {
	
	جهانی $post;
	// ما فقط می خواهیم این کار را برای پست در حلقه اصلی در نمای تک پست انجام دهیم
	if( is_singular() && $title == $post->post_title && in_the_loop() ) {
		'
' را برگردانید. $title. '
';
	}
	بازگشت $title;
	
}

// محتوای پست را در یک div قرار دهید
add_filter('the_content', 'thsp_dfr_content', 1 );
تابع thsp_dfr_content ( $content ) {
	
	جهانی $post;
	// باز هم، این کار را فقط در نمای تک پستی انجام دهید
	if( is_singular() ) {
		/*
		 * خطوط جدید لازم است تا wpautop وردپرس این کار را انجام دهد
		 * پاراگراف اول را ایجاد کنید
		 */
		'
' را برگردانید. "n" . "n" . محتوای $. '
';
	}
	بازگشت محتوای $;
	
}

اکنون عناصر #thsp-dfr-title و #thsp-dfr-content برای کار داریم با، پس بیایید چند فایل JS و CSS را در صف قرار دهیم:

// اسکریپت ها و سبک ها را در صف قرار دهید
add_action('wp_enqueue_scripts', 'thsp_dfr_styles');
تابع thsp_dfr_styles() {

	جهانی $post;
	if( is_singular() ) {
		wp_enqueue_script(
			'thsp_dfr'،
			plugins_url('/js/distraction-free-reading.js', __FILE__)،
			آرایه ('jquery')،
			'v1.0'
		)
		
		wp_enqueue_style(
			'thsp_dfr'،
			plugins_url('/css/distraction-free-reading.css', __FILE__)،
			آرایه()، 
			'v1.0'
		)
	}

}

افزودن دکمه خواندن رایگان Distraction

از آنجایی که خواندن بدون حواس‌پرتی با غیرفعال بودن جاوا اسکریپت کار نمی‌کند، ما از jQuery برای اضافه کردن جابجایی استفاده می‌کنیم. برای کاربران غیر جاوا اسکریپت هیچ فایده ای ندارد، نیازی به پرتاب لینک های مرده به سمت آنها نیست.

// افزودن جابجایی خواندن بدون حواس‌پرتی
$('body').append('خواندن بدون حواس پرتی');

مقداری CSS اولیه را به عنصر پیوند اضافه کنید و در نهایت به این می رسیم:

ضامن کردن خواندن بدون حواس پرتی

جابه‌جایی به حالت خواندن بدون حواس پرتی

هر چیزی که برای تحقق این امر نیاز داریم از قبل وجود دارد. پیوندی برای پیوست کردن تابع کلیک – بررسی، دو عنصر با شناسه های شناخته شده که می توانیم شبیه سازی کنیم – بررسی کنید. بنابراین، بیایید آن را انجام دهیم.

// کلیک کردن روی تغییر دادن پیوند
$('#thsp-dfr-toggle').click(function(){	
	// مدال بدون حواس پرتی اضافه کنید		
	$('body').append('
');
	
	// عنوان پست را به مدال بدون حواس پرتی اضافه کنید
	$('#thsp-dfr-title').clone().attr('id', 'thsp-dfr-title-cloned').appendTo('#thsp-dfr-wrapper');
	
	// محتوای پست را به مدال بدون حواس پرتی اضافه کنید
	$('#thsp-dfr-content').clone().attr('id', 'thsp-dfr-content-cloned').appendTo('#thsp-dfr-wrapper');

	// پیوند نزدیک را به مدال بدون حواس پرتی اضافه کنید
	$('body').append('بستن');
	
	// پنهان کردن نشان دادن پیوند معین
	$(this).hide();

	بازگشت نادرست؛
})؛

// روی پیوند بستن کلیک کنید
$('#thsp-dfr-close').live('click', function(){	
	// حذف مودال
	$('#thsp-dfr-overlay').remove();
	
	// نمایش ضامن آزاد حواس پرتی دوباره
	$('#thsp-dfr-toggle').show();

	// پنهان کردن پیوند مودال بسته
	$(this).hide();
	
	بازگشت نادرست؛
});

بنابراین، در اینجا خلاصه‌ای از کاری است که ما در اینجا انجام می‌دهیم:

1. اضافه کردن دو div درست قبل از بستن تگ body
2. کلون کردن عنوان و محتوای پست و افزودن آنها به قسمت داخلی
3. در حال حذف پیوند تعویض
4. افزودن پیوند دیگری که از آن برای خروج از مطالعه بدون حواس‌پرتی استفاده می‌کنیم

با کلیک بر روی پیوند بسته، خود پیوند مودال و بسته حذف می‌شود و پیوندی که حالت خواندن بدون حواس‌پرتی را فعال می‌کند، برمی‌گرداند.

محتوای خواندنی رایگان با یک ظاهر طراحی شده

ما به مقداری CSS نیاز داریم تا پیوند مودال و جابجایی خود را در موقعیت مکانی قرار دهیم و به آنها یک استایل اولیه بدهیم، بنابراین اینجاست:

/* عنصر عرض و ارتفاع 100% برای پنهان کردن ظاهر منظم سایت */
#thsp-dfr-overlay {
	پس زمینه: #222;
	پس زمینه: rgba(0,0,0,0.9);
	موقعیت: ثابت؛
	سمت چپ: 0;
	بالا: 0;
	عرض: 100%؛
	ارتفاع: 100%;
	padding: 50px 0;
	
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.admin-bar #thsp-dfr-overlay {
	/* با نوار مدیریت آن را خوب جلوه دهید */
	padding: 78px 0 50px;
}
/* بسته بندی محتوای خواندن بدون حواس پرتی */
#thsp-dfr-wrapper {
	پس زمینه: #f9f9f9;
	عرض: 45em;
	حداکثر عرض: 90%؛
	حاشیه: 0 خودکار;
	بالشتک: 2em 3em;
	ارتفاع: 100%;
	سرریز: اسکرول;
	
	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;
}
/* دکمه های تغییر و بستن بدون حواس پرتی */
#thsp-dfr-toggle،
#thsp-dfr-close {
	موقعیت: ثابت؛
	پایین: 3px;
	سمت راست: 3px;
	z-index: 999;
	صفحه نمایش: inline-block;
	پس زمینه: #333;
	رنگ: #fff;
	بالشتک: 0.5em;
	حاشیه: 1px جامد #fff;
	text-decoration: هیچ;
}

به‌خاطر داشته باشید که این فقط به قسمت‌های همپوشانی و بسته‌بندی استایل می‌دهد، نه محتوای داخل آنها. در موضوع Twenty Twelve، در نهایت چیزی شبیه به این خواهد شد:

خواندن بدون حواس پرتی – محتوای بدون سبک

نوعی «زنده باد بازنشانی CSS اریک مایر» روی آن نوشته شده است، بنابراین طبیعتاً، می‌خواهید چند CSS تایپوگرافی ساده اضافه کنید تا زیبا به نظر برسد. خوشبختانه، ایجاد انتخابگرهای خاص CSS به اندازه کافی که CSS پیش‌فرض تم را لغو می‌کند، آسان است، زیرا محتوای خواندن بدون حواس‌پرتی ما در داخل #thsp-dfr-overlay و < پیچیده شده است.#thsp-dfr-wrapper divs. پس از اصلاح صورت (برای فایل کامل CSS، صفحه Github پروژه را بررسی کنید)، این چیزی است که ما داریم:< /p>

مطالب بدون حواس پرتی – محتوای سبک

خیلی بهتر است، اما می دانید که آنها چه می گویند…

به یک توسعه‌دهنده فرانت‌اند مقداری CSS بدهید و او ساعت‌ها صرف آن می‌کند، اجازه دهید یک توسعه‌دهنده فرانت‌اند CSS خودش را بنویسد و او همچنان ساعت‌ها روی آن کار می‌کند.< /p>

بنابراین با خیال آسوده کاری کنید که مطالب مودال خواندن بدون حواس‌پرتی، هر چقدر که می‌خواهید خوب یا بد به نظر برسند 🙂

برنامه توسعه این مفهوم به یک افزونه وردپرس کاملاً برجسته است، بنابراین اگر می‌خواهید به آن بپیوندید و مشارکت کنید، در اینجا پروژه است. صفحه Github.