حصرياً: كيف تركب أكثر من قالب في آنٍ واحد لمدونة بلوقر

بحمد الله وفضله عرضت في آخر تدوينه قالباً مدمج فيه ثلاثة قوالب ليكون الخيار لزوار المدونة يختر كل منهم ما يناسبه، قد يكون الجميع لاحظ هذه الميزة في مدونات الوردبريس المدفوعة، وهي اليوم إن شاء الله في مدونات بلوقر، لتثبت بلوقر مرة أخرى أن كونها  منصة مجانية للتدوين لا يعني أن لا تكون احترافيه!.هذه الإضافة ستمكن معربي ومصممي القوالب استخدام بنية HTML واحدة ومن ثم يتفرغون للتفنن في صياغتها وتنسيقها وإخراجها عبر أوراق أنماط خارجية! ، إن شاء الله في هذه التدوينة سأشرح كيفية تركيب أكثر من قالب لمدونات البلوقر. . .

فكرة تركيب أكثر من قالب للمدونة

هل يمكن نزع خصائص الأنماط CSS من قالب المدونة وجعله في ورقة أنماط خارجيه، من ثم استحضاره ؟. هذا هو السؤال الذي بدر في ذهني وكنت واثق بأن بلوقر بمشيئة الله لن يمنع هذا ، جربت الطريقة ونجحت ، إذاً هذا هو المفتاح ، الخطوة التالية هو استخدام إضافة تعتمد على مكتبة الجي كيوري وهي Switchstylesheets ، ستسمح لنا هذه الإضافة بالتنقل بين النمط الافتراضي للمدونة وأوراق الأنماط الخارجية البديله ، مع الاحتفاظ بالنمط ( القالب ) الذي يختاره الزائر ما لم يحدث الصفحة أو يحذف بيانات التصفح ( الكوكيز )، إذا  فالطريقة باختصار (1) ترك القالب الأصلي كما هو ليصبح هو القالب الافتراضي (2) حفظ القوالب البديلة في أوراق أنماط خارجية ثم رفعها وحفظها في مكان مناسب مثل Dropbox أو google sites أو google code . ثم (3) تركيب الإضافة . ثم (4) عمل أزرار بسيطة لزائر المدونة ليتنقل بين القوالب.

  تنبيه قبل الخوض في شرح تركيب القوالب المدمجة

  في البدء أنبه على أن القوالب يجب أن تكون متناسقة من ناحية بناءها أقصد هيكل كود HTML ، وكذلك لها نفس أسماء خصائص CSS ، مثلاً إذا أسميت خصائص القائمة الجانبية ( sidebar_left ) في القالب الافتراضي ، فيجب أن يكون له نفس الاسم في بقية القوالب البديلة. ولو أسميته في القوالب البديلة مثلاً ( sidebarleft ) بدون علامة الشرطة السفلية ( _ ) فسوف لن يتم أي تغيير على القائمة الجانبية وستبقى القائمة الجانبية تحت تأثير خصائص القالب الافتراضي. لماذا ؟  ، الجواب: لأن جميع القوالب ستستخدم بناء هيكلي HTML واحد ، وقد علمت أو ستعلم أن HTML تستدعي خصائص CSS بأسمائها ، إذاً HTML سيعطي اسماً واحداً لكل خصيصة ولن يتبنى أي اسم آخر لنفس الجزء .. هذا الكلام سيكون مملاً إذا قضيت ساعة واحده في تعلم HTML و CSS.

إذاً فما رأيك في حل بسيط وآمن جداً وهو استخدام قالب واحد ، ثم نجري عليه التعديلات قلّت أو كثرت ، ثم نصدره كقالب بديل ، ثم نجري تعديلاً ثانٍ ونصدره كقالب بديل ثالث ؟ وهكذا … هذا ما فعلته أنا على أي حال. تنبه! أيها المُبارك الخطوات يجب أن تكون حسب هذا السيناريو 1. تنشئ مدونة جديدة ثم ترفع عليها القالب الأصلي ، ثم لا تجري التعديلات على هذه المدونة بل 2. نزل نسخة من القالب وارفعها في مدونة جديدة ثانية غير الأولى، الآن عدل عليها واحفظ قالبها، هذه الآن مدونة تحمل القالب البديل الأول 3. أنشئ مدونة جديدة ثالثة ارفع عليها القالب الأصلي أجري عليها التعديلات احفظها هذه المدونة الثالثة التي تحمل القالب البديل الثاني. النتيجة: ثلاثة مدونات الأولى تحمل القالب الأصلي أي الافتراضي، الثانية تحمل القالب البديل الأول، الثالثة تحمل القالب البديل الثاني … افعل هذا وإذا انتهيت إنشاء هذه المدونات الثلاث فتعال نكمل لعل الله أن يفتح علينا!

نزع خصائص CSS وحفظها في ورقة أنماط خارجية

الآن وبعد إنشاء المدونات الثلاث ، سنقوم بنزع الجزء المحتوي على خصائص CSS من كل قالب بديل ، وسنترك القالب الافتراضي بدون أن ننزع منه أي شيء!. ستقول لماذا لا ننزع من القالب الافتراضي ؟ ، الجواب: يمكن نزعه وستنجح الطريقة بدون مشاكل إن شاء الله ، بل انه جيد لمن يحبون إظهار القالب في سطور أقل، وكنت حتى قبيل نشر القالب الثلاثي أعتمد هذه الطريقة ، لكن واجهت سلبية طفيفه ولكنها مزعجه وهي أن الزائر الذي سيفتح المدونة لأول مرة سيرى المدونة لثانيةٍ أو جزء منها بدون تنسيق نظراً لأن القالب محفوظ على ورقة أنماط خارجية ويتطلب هنية حتى يتم تطبيق القالب الافتراضي على المدونة ، ولكن بترك القالب الافتراضي كما هو بدون نزع الخصائص سيظهر القالب الافتراضي مباشرة ، بالإضافة الى ميزة أخرى وهي في حال تعطل الإضافة لأي سبب كالحذف أو توقف الخدمة التي اشتفت عليها ملفات الأنماط ، فلن يؤثر على المدونة ولن تخسر زواراً .. مرة أخرى يبدو أني أطلت، اليك طريقة نزع الخصائص:

الخطوة الأولى:  من المدونة الثانية – أي القالب البديل الأول - قُم بنسخ جميع الأكواد الواقعة  ما بين :

هذا السطر:

>

<![CDATA[

وهذا السطر:

]]></b:skin>

الخطوة الثانية:  قم بفتح ملف نصي والصق فيه جميع الأكواد التي نسختها من الخطوة الاولى.

الخطوة الثالثة: احفظ الملف النصي بصيغة CSS ، مثلاً سمه:   style1.css .

الخطوة الرابعة: كرر الخطوات السابقة مع القالب البديل الثاني الموجود في المدونة الثالثة ، لينتج عندك ملفان style1.css و style2.css. هذه هي أوراق الأنماط الخارجية البديلة!

حفظ أوراق الأنماط وملف الإضافة

  الملفات التي نحتاجها لإنشاء قالب ثلاثي عددها أربعة ، الأول: مكتبة الجي كيوري التي تعتمد عليها الإضافة، لستَ مضطراً لرفعها لأن قوقيل توفرها لك وكذلك ميكروسوفت سنرى لاحقاً ، الثاني: ملف الإضافة يمكن تنزيله من موقع المطور من هنا ، عبارة عن ملف مضغوط يحتوي على ملف الإضافة ( styleswitch.js ) وملفات أخرى عبارة عن مثال حي من المطور ليوضح كيف تعمل الإضافة. الملفان الثالث والرابع: هما أوراق الأنماط style1.css و style2.css  ..

عليك رفع ملف الإضافة وورقتي الأنماط في استضافة مناسبة، استخدم الموقع الذي يعجبك المهم أن يوفر روابط مباشرة مثل  Dropbox أو google sites أو google code أو ؟؟؟ .

شرح استيراد ملفات الإضافة وتركيبها في بلوقر

ابحث عن نهاية وسم رأس القالب أي هذا السطر :

</head>

الآن قبله مباشرة انسخ هذا الكود:

<link rel="alternate stylesheet" type="text/css" href="style2.css" title="styles2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="styles3" media="screen" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
<script type="text/javascript" src="http://alblogger-gen.googlecode.com/svn/trunk/styleswitch.js"></script>

  السطر الأول والثاني: خاصان باستيراد أوراق الأنماط للقوالب البديله ، أكتب رابط كل ورقة في الموضع المضلل باللون الأصفر، عنوان الرابط title المضلل بالأخضر مهم لأننا سنستخدمه لاحقاً، ولاحظ أننا كتبنا alternate stylesheet في القيمة rel وتعني ورقة الأنماط البديله.  السطر الثالث: خاص باستيراد مكتبة الجي كيوري اتركه كما هو فهذا مستضاف في قوقيل ، السطر الرابع: خاص باستيراد ملف الإضافة نفسه وهو مستضاف في حساب خاص بمدونة البلوقر في قوقيل كود، تفضل باستخدامه ان شئت وإن شاء الله لن أحذفه أبداً كما ذكرت في تدوينات سابقة.

بهذا ستكون مدونتك مدونة ذات ثلاثة قوالب في آنٍ واحد ، بقي أن نوفر لزوار مدونتك أزراراً تمكنه من التنقل بين القوالب ، لنتابع:

تركيب أزرار اختيار القالب المفضل لزوار المدونة

  أزرار الاختيار إما تدمجها مع هيكل المدونة HTML وبالتالي أي مستخدم لقالبك ستظهر عنده مباشرة، أو تجعلها على هيئة أداة يضيفها المستخدم عن طريقة إضافة أداة HTML/Javascript من واجهة عناصر الصفحة، مثلاً لنجعلها بسيطة ونصية وبالتالي نكتبها هكذا:

<p>اختر قالبا</p>
<ul>
<li><a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch">القالب الافتراضي </a></li>
<li><a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch">القالب البديل الأول</a></li>
<li><a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch">القالب البديل الثاني</a></li>
</ul>

ولاحظ أن قيمة rel هنا يجب أن تكون مماثلة لـ title في الكود المتعلق باستيراد أوراق الأنماط وضللناه باللون الأخضر سابقاً ، أيضاً من الضروري كتابة قيمة class كما هو موضح .. بقي عليك أن تبدع في تصميم أزرار اختيار لمدونتك، أو يمكنك استخدام أزرار القالب الثلاثي الذي نشرته سابقاً والتعديل عليه كما تشاء ..

هذه هي الطريقة آمل أن يكون هذا الشرح واضح ليس فيه غموض ، أتمنى أن يستخدم الإخوة المعربين والمصممين هذه الإضافة ، ويستخدمونها بطرق متنوعة !

تحياتي العاطرة