چرتک بلاگ

کدنویسی، آموزش وبلاگ، تفریح و دلنوشت با کمی چاشنی طنز

کد پیشنمایش قالب برای طراحان وب

کد پیشنمایش قالب برای طراحان وب

توسط Mohsen シ در تاریخ ۱۴ آذر ۱۳۹۹

در موضوعات: ابزار و قالب وبلاگ

تقریبا چند وقتی بود دنبال روشی بودم که بشه با استفاده از کد جاوا اسکریپت و به وسیله کلیک روی یک دکمه، یک صفحه جدید باز کنی و تو اون صفحه جدید هر چیزی رو که دلت میخواد رو قرار بدی و برای کاربر نمایش بدی. شاید بپرسین خوب این به چه دردمون میخوره مرد مومن؟ یک نمونه سادش همین پیشنمایش قالب هستش که خیلی از دوستانمون که تو طراحی قالب فعالیت دارن یا فقط عکس قالب رو به عنوان پیشنمایش میزارن و یا اینکه هزینه های اضافی خرج میکنن و یک هاست میخرن تا اونجا پیشنمایش فایل ها رو بزارن. ولی خب یک خبر خوب دارم و اون هم اینکه ایده من کاملا عملی هستش! و اگر امکان جاوااسکریپت رو از بیان خریده باشین میتونین این کارو همین الان هم انجام بدین. در پایان این آموزش انتظار میره شما یک چنین چیزی بتونین بسازین:

(البته نمایش کامل و صحیح پیشنمایش نیاز به کمی صبر هستش)

اگر بر روی دکمه بالا کلیک کنین میبینین یک پنجره جدید تو تب یا صفحه جدید میاد که یک صفحه رو برای ما نشون میده و این صفحه ربطی به وبلاگ Bismuth.blog.ir نداره یعنی تو پنجره جدید وبلاگ رو باز نکردم! باور ندارین به اون یکی وبلاگ سر بزنین و متوجه میشین قالبش متفاوت از این هست. جا داره از دوستانمون فاطمه خانم و نویسنده آشنا بابت این قالب مخوف و زیبا تشکر کنم! خب بریم سر آموزش:

در گام اول شما قالب مدنظرتون رو در یک وبلاگ دیگه فعال میکنین (سعی کنین تعداد مطالب اون وبلاگ کم باشه تا کد html قالبتون زیاد نباشه) و به صفحه اصلی وبلاگتون میرین.

در صفحه اصلی صفحه با کلیک راست روی صفحه و انتخاب view page source کد html اون صفحه رو تو تب جدید میبینین (میتونین از کلید میانبر cntrl + u استفاده کنین.)

کل کد نمایش داده شده رو تو یک ویرایشگر مثل notepad کپی کنین تا تغییراتی رو توش اعمال کنیم.

در بین دو تگ head تمامی چیز ها بغیر از کد های مشابه کد های پایین رو حذف کنین:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>چرتک بلاگ</title>
<link href="//blog.ir/media/css/sharedrtl.css?uMV-Qp" rel="stylesheet" type="text/css">
<link href="/static/Z0eOfmRbk84/2501204661/style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="//bayanbox.ir/download/2438018307215110639/favicon.ico" rel="shortcut icon">
<link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

کد های بالایی برای نمایش صحیح صفحه مهم هستن و نبودشون ممکنه مشکل ایجاد کنه. آهان راستی حتما فایل CSS قالبتون رو در جایی مثل بیان باکس یا پیکوفایل آپلود کنین و لینکش رو خودتون به صورت دستی وارد این فایل html کنین چون در غیر اینصورت احتمالش هست که پیش نمایشتون اصلا کار نکنه!

خوب در مرحله بعدی باید یک سری لینک ها که به صورت Relative هستن رو به حالت معمولی برگردونیم.

به صورت خلاصه اگر توی اول لینک // دیدین یعنی پروتکل سایت هر چی بود تو هم از اون استفاده کن.

و اگر دیدین در ابتدای لینک سایتی از / استفاده شده یعنی آدرس اصلی سایت هر چی بود تو هم از اون استفاده کن.

چون این موارد میتونن باعث بشن مثلا عکس یا حتی فایل CSS ما لود نشه باید این آدرس دهی رو تغییر بدیم.

از منوی بالای نت پد بر روی edit و سپس Replace کلیک کنین.

در قسمت find what عبارت "// و در قسمت replace with عبارت "http:/ رو مطابق عکس زیر وارد کنین و تیک گزینه Match case رو هم حتما فعال کنین.

(البته میتونین بجای http از https هم استفاده کنین. دومی رو توصیه میکنم!)

روی Replace All کلیک کنین.

قسمت بعدی برای این هست که لینک های موجود در صفحتون کار کنه و کاملا اختیاری هستش.

باز از همون صفحه در قسمت find what عبارت "/ و در قسمت replace with عبارت "http://weblogshoma.blog.ir/ رو وارد کنین و تیک گزینه Match case رو هم حتما فعال کنین. در قسمت Replace with باید آدرس وبلاگ خودتون رو بنویسین.

روی Replace All کلیک کنین.

برای امتحان اینکه آیا همه چیز رو درست انجام دادیم یا نه فایل رو با فرمت html و با انکودینگ UTF-8 طبق عکس زیر ذخیره کنین و اون رو با مرورگرتون باز کنین. اگر دسترسی اینترنت داشته باشین، باید اون فایلی که ساختین بدون مشکلی لود بشه.

خوب الان کد html پیشنمایش قالبمون رو داریم. میریم به سراغ کار اصلی! توی فایل html کاراکتر های غیرمجاز مثل " / وجود دارن که موجب مشکل میشن و ما نمیتونیم با وجود اونها کل کد html مون رو در یک متغیر ذخیره کنیم. یک روش برای حل این مشکل استفاده از escape charachter ها هستش یعنی مثلا به جای کاراکتر خط جدید از \n استفاده میکنن. میتونین تو گوگل عبارت " javascript string escape tool" رو جست و جو کنین تا به سایت هایی که خودکار این کار رو برای ما انجام میده برسین! تو این مثال من از این سایت استفاده میکنم. کد html تون رو در این صفحه وارد کنین و بر روی ESCAPE بزنین و کدی که بهتون میده رو کپی کنین. بعدا از این کد استفاده میکنیم.

خوب حالا به پستی که میخواین دکمه پیشنمایش رو بزارین برگردین و توی ویرایشگر روی دکمه منبع کلیک کنین و این کد رو در جایی که میخواین دکمه قرار بگیره کپی پیست کنین.

<noscript>مرورگر شما از امکان جاوا اسکریپت پشتیبانی نمی کند!</noscript>
<button onclick="theme1()">پیش نمایش قالب</button>
<script>
function theme1() {
var newpage = "Code Shome dar inja";
var mywindows = window.open("","_blank","");
mywindows.document.open() ;
mywindows.document.write(newpage);
mywindows.document.close() ;
};
</script>

کدی که escape شده رو در قسمتی که گفتم پیست کنین و پست رو ذخیره کنین. اگر مراحل رو خوب و دقیق انجام داده باشین نباید مشکلی داشته باشین :)

توجه کنین کد بالا فقط مربوط به یک پیش نمایش هستش و اگر میخواین پیش نمایش های بیشتری بسازین فقط کافیه کد های بالا رو مجددا کپی کنین و به جای theme1 از عبارت دیگه مثل theme2 استفاده کنین.

البته میتونین قسمت اسکریپت رو در یک فایل جدا بنویسین و به فایل html تون لینک کنین. به نظرم این کار بهتر هستش و فایل html تون رو کمتر شلوغ میکنه. برای اینکار کل عبارت های بین دو تگ script رو کپی کنین و اون ها رو در یک فایل با پسوند JS ذخیره کنین و در جایی مثل بیان باکس آپلود کنین. لینک دانلود فایلی که آپلود کردین رو به صورت زیر در فایل html استفاده کنین:

<script src="LinkFileShoma.js"></script>

و البته اگر CSS بلد باشین میتونین ظاهر دکمه رو به هر صورتی که میخواین تغییر بدین (در قسمت های قبلی وبلاگ زدایان کمی در این مورد توضیحاتی دادم)

اگر مشکلی بود حتما در قسمت نظرات اعلام کنین تا بتونم کمکتون کنم.

این هم از آموزش مخصوص برای طراحان قالب. امیدوارم به دردتون خورده باشه!

نظرات

برو به فرم ارسال نظر

تا الان ۵ نظر داریم.

نویسنده آشنا ۱۴ آذر ۱۳۹۹، ۲۳:۰۶

سلام
ایده خیلی جالبی هست:) هوشمندانه و عالی😄🌹🌹
ممنون :) 😘

Mohsen シ ۱۵ آذر ۱۳۹۹، ۰۰:۰۴

سلام دوست من :)
خواهش میکنم، نظر لطفته.
سلامت باشی!

فاطـღــمه ♡♬♪ ۱۴ آذر ۱۳۹۹، ۲۳:۴۰

آقا من الان عاشق این ابزار شدم
ولی جاوااسکریپت فعال نیست چیکار کنم 😭
خیلی وقت بود دنبال یه همچین امکانی میگشتم 😭😭😭
+خداقوت واقعا ، خیلی کاربردیه ممنون :)
++مخوف؟😅

Mohsen シ ۱۵ آذر ۱۳۹۹، ۰۰:۰۲

خواهش میکنم نظر لطفتون هستش :)
منظورتون امکان جاوا اسکریپت وبلاگتونه؟ اگر اینطوریه خب میتونین بخرین. حقیقتش منم اول زیاد نگران این بودم که ای واااای چرا بابت وبلاگ پول بدم و این حرفا ولی دیدم 10 هزار تومن مگه چقدره؟ مثل این هستش که هر ماه هزار تومن از جیبم بیوفته زمین :)) به علت علاقم به جاواسکریپت و البته ابزار هایی که قراره بسازم تصمیم گرفتم جاوا اسکریپت رو بخرم.
خواهش میکنم ^_^ لطف دارین
آره خیلی قالب جالبیه... هر قالبی رو که دیدم یا فونتش مشکل داشت یا از نظر رنگبندی و فضای خالی ایراد داشت و اینا رعایت نمیشد ولی این قالب به دلم نشسته :) کارتون واقعا عالیه. حتما ادامه بدین! توصیه میکنم حتما کار با وردپرس رو یاد بگیرین و برای اون هم قالب بسازین چون خیلی ها نیازمند فکر خلاق برای قالب هستن

فاطـღــمه ♡♬♪ ۱۵ آذر ۱۳۹۹، ۱۱:۴۱

مشکل اینجاست خیلی وقته کارتم خالیه 😅
قبلا نیاز جاوااسکریپت نداشتم ولی حالا یه همچین ابزارهایی واقعا نیازه

+به خاطر اینکه من خیلی حساسم. دوستدارم حتی اگه خیلی کم کدنویسی بلد باشم ولی همون مقدارو با سلیقه انجام بدم 👌🤭

Mohsen シ ۱۵ آذر ۱۳۹۹، ۱۳:۴۰

درک میکنم 😂 اوضاع بدی شده... منم حسابم برای مدت زیادی خالی بود. الانم که پول دارم رمز دوم رو میزنم قبول نمیکنه! باید باز برم به بانک ببینم چه مرگشه :|

هان پس شما هم کامل گرایی :)) عادت خوبیه بعضا... ولی بعضی اوقات تموم کردن کار های ساده هم برای آدم با این عادت سخت میشه.

محمد صادق عبداللهی ۱۹ تیر ۱۴۰۰، ۱۶:۴۶

عالی
به ما هم سر بزنید قالب های بیان رو ریسپانسیو می کنیم
البته تازه کارمون رو شروع کردیم

Mohsen シ ۱۹ تیر ۱۴۰۰، ۱۸:۰۵

خیلی هم عالی :) حتما کارتون رو ادامه بدین. منتظرتون هستم

ممنون از نظرتون

بازم منم یه دوست دلسوز ۲۱ آبان ۱۴۰۰، ۱۱:۳۰

بازم سلام و وقت بخیر دوست طراح عزیز و بازم اومدم غر بزنم بابت اشتباه فوق استراتژیک کاری شما

بازم میگم با تاکید هزار باره به نظرم روند شما خیلی اشتباهه که همه کاراتون رو رایگان در اختیار دیگران میذارید

این کار امثال شما در جامعه طراحان باعث میشه عموم افراد تصور کنن طراحی کاری نداره و بی ارزش هست و نباید بابت اون هزینه کرد

دوست گرامی شما الان برای عنبرنساء (پشگل الاغ ماده؟) هم باید هزینه پرداخت کنید تازه زجمت این پشگل رو خانم الاغ کشیدن و پولش برای فروشنده است

اون وقت امثال شما باعث میشید تو این کشور نشه بابت زحمت و دانش صرف شده برای کار طراحی دستمزدی مطالبه کرد

با چه منطقی شما حاصل چندین ساعت زحمت به اضافه دانش و تجریه خودتون که برای کسب اونا هم زمان و هزینه صرف شده به رایگان در اختیار افراد میذارید؟

لطفا نگید که علاقه به وبلاگ نویسی دلیل این کاره که خودش عذر بدتر از گناهه

شما میرید بیرون و بابت محصولات و خدمات افراد پول پرداخت می کنید (بقالی - نانوا -دکتر - راننده - داروساز و ...) و مطمئن باشید هیچ کدام حاضر نخواهند بود کاری به رایگان برای شما انجام دهند ولی شما دارید برای امثال این افراد و یا فرزندانشان به رایگان وقت و هزینه میذارید

گول به به و چهچه مخاطبانتون رو نخورید که تا زمانی به به گوی شما هستند که برای شان بیگاری می کنید

Mohsen シ ۲۱ آبان ۱۴۰۰، ۱۲:۵۵

کاملا درست می‌فرمایید جناب. ولی اگر این کارهای داوطلبانه نبودن هیچوقت سیستم عاملی مثل لینوکس و هزاران توسعه مفید ازش که توی سرورها و دسکتاپ‌ها و حتی موبایل‌ها (سیستم عامل اندروید) استفاده می‌شه تولید نمی‌شد. این قالبم قرار نبود حتی ساخته بشه صرفا برای دستگرمی ساختمش و تو آینده نمونه‌کاری باشه برام وگرنه اگر قصدم پول باشه مطمئنا همچین کاری رو انجام نمیدم. دنیا هم صرفا محدود به پول نیست اعتبار آدم بیشتر از پول ارزش داره. مگر پزشک‌های بدون مرز رو نمیشناسین که همچین حرفی میزنین؟  رایگان کار کردن برای این افراد چه منفعتی داره؟ یا اصلا خیریه‌ها چه سودی از کارهاشون میبرن؟ این پول نیست که ارزش داره بلکه آدما هستن که بهش ارزش میدن. اگر شما رهبر یک کشور باشین و به مردمتون خدمت کنین همه حاضرن رایگان برای شما کار کنن چون به شما ارزش قائلن. کار که هیچ بعضیا حاضرن از جون خودشون هم مایه بزارن.
در هر حال منظورتون رو گرفتم چی میگین و منم قرار نیست کارم ساخت قالب رایگان باشه (دنیای کامپیوتر خیلی بزرگتر از ساخت قالب و این چیزا هستش) ولی خوب به نظر من کسی که این کار رو انجام میده هم گناه نمیکنه. همه کسایی که این کارو میکنن هم میدونن که میتونن پول در بیارن از این کار :)
خیلی ممنونم ازتون

کاربران بیان میتوانند بدون نیاز به تأیید، نظرات خود را ارسال کنند.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.
تجدید کد امنیتی