Assalomu – aleykum blogimning foydalanuvchilari. Men Oxunjon G’aybullayev.

Bu maqolamda vebsayt yoki wordpress blog uchun qanday chiroyli spoylerni plaginsiz yaratish haqida yozishga qaror qildim.

Spoyler so’zini oldin eshitmagan bo’lsangiz, quyida spoylerning namunasi:

Namunada ko’rganingizdek, spoyler maqolalaringizni ixchamlashtirishda yordam beradi.

Plaginsiz spoylerni yaratishda qilinadigan ishlar sxemasi:

1. footer.php faylida blogga jQuery kutubxonasini bog’lash.
2. footer.php faylida spoyler scriptni bog’lash.
3. style.css fayliga spoyler uchun css stilini qo’shish.
4. Maqola yoki blog sahifasiga spoyler kodini qo’shish.

Demak, birinchi bo’lib jQuery kutubxonasini bog’laymiz. Quyidagi kodni body tegi yopilishidan oldin footer.php fayliga qo’shib qo’ying. Bu uchun admin Dashboard ( boshqaruv paneli) Appearance–>Editor–>footer.php orqali boring.

Siz buni header.php fayliga qo’shsangiz ham farqi yo’q. Shunchaki men barcha script va kodlarni blogning pastki tub qismida qo’yaman, shu tarzda ular oxirda yuklanishi mumkin, sizlarga ham shuni tavsiya qilaman. Aytgancha kodni qo’shishdan oldin, barchasini ko’rib chiqing, ehtimol siz bu kodni allaqachon o’rnatib bo’lgandirsiz. Misol uchun men allaqachon kodni o’rnatib qo’yganman:

Blogingizning header.php, footer.php, function.php, index.php, fayllarini tekshiring, agar jquery.min.js hech qayerda o’rnatilmagan bo’lsa, bu kodni o’rnating va keyin bu ishni qayta qilmang. Bu faqat bir marta qilinadi.

Endi, spoylerning ishlashi uchun blogning footer.php fayliga quyidgi kodni qo’shing ( </body> tegidan keyin).

Yaxshi! Endi blogning style.css faylining oxiriga quyidagi kodni qo’shing va Update File tugmasini bosing:

.spoiler {
overflow: hidden;
margin-bottom: 20px;
margin-top: 20px;
border: 1px solid #dfdfdf;
border-left: 2px solid #3965a8;
box-shadow: 0 0 9px #dddddd inset;
}

.title_h3 {
cursor:pointer;
font-size: 14px;
background: #dddddd;
margin: 0 -10px 0 -10px;
padding: 10px;
padding-left: 30px;
-moz-box-shadow: 0 0 9px #dddddd inset;
box-shadow: 0 0 9px #dddddd inset;
}

.closed .contents { display:none; }
.closed h3 { background: #bbbbbb; }
.contents { padding: 10px; }

Bu stillardir. Ya’ni, spoyleringizning ko’rinishi. Siz bu kodni qo’shganda, spoyler meniki kabi ko’rinadi (yuqoridagi namuna, lekin agar siz ko’rinishni o’zgartirmoqchi bo’lsangiz, shu yuqoridagi kodga o’zgartirish kiritishingiz kerak. Lekin ehtiyot bo’ling to’g’ri kodlarni buzib qo’ymang! Stilni ya’ni ko’rinishni o’zgartirishda yordamga muhtoj bo’ladigan bo’lsangiz, bu ssilkadan topasiz.

Yuqoridagi ishlar faqat bir marta qilinadi.

Shunday qilib, oxirgi narsa, biz, aslida, spoylerni blogimizning maqola yoki sahifasiga qo’shamiz. Buni amalga oshirish uchun ushbu kodni sahifadagi kerakli joyga kiritishingiz kerak, kiritishda Text panelida kiriting, Visualda emas:

Bu yerda tekstning sarlavhasi (har qanday tekstning)

Bu yerda esa spoyler ostidagi kontent

 

Agar siz bitta sahifada spoylerdan 2,3,5 va 10 marta foydalanmoqchi bo’lsangiz ham, spoyler ichida spoyler yaratmoqchi bo’lsangiz ham, xuddi shu koddan foydalanasiz.

Sayt yoki blogning texnik tomonlarini ko’rsatib beradigan maqolalarimni o’tkazib yubormang blogimga OBUNA bo’ling!

Men esa sizlar bilan xayrlashaman, xayr!

Muallif: Oxunjon G’aybullayev.