رفتن به مطلب

ساخت باتن


marjan68

پست های پیشنهاد شده

سلام روزتون بخیر 
من یه باتن شبیه باتن های صفحه داخلیه theme.ir لازم دارم 

این سایت با jquery زده شده . چجوری همچین باتنی واسه سایت وردپرسی بسازم؟

ممنون میشم کمکم کنید

در واقع شبیه دکمه ادامه مطلب 

لینک ها تنها برای اعضای سایت قابل نمایش است.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

درود.

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

من وارد بخش توابع و قسمت ادامه مطلبش نمیشم، فقط کد رو قرار میدم، امیدوارم مورد استفاده قرار بگیره:

 

اول از همه پیش نمایش و نتیجه کار رو توی لینک زیر ببینید. برای مشاهده روی کلید سبز رنگ RUN کلیک کنید:

  • لینک ها تنها برای اعضای سایت قابل نمایش است.

 


اما چطوری چنین چیزی بسازید :

 

1. کدهای HTML

کدهای مربوط به کلید و بخش DIV مربوط به ادامه مطلب رو در مکان مورد نظری از فایل های PHP قالب قرار بدید :

<button onclick="edameHM()" id="edameKelid">ادامه مطلب</button>

<div id="edameM">
تابع مربوط به ادامه مطلب ...
</div>

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

 

2 . کدهای جاوا اسکریپت

بخش ادامه مطلب که در ابتدا مخفی هست و با کلیک نمایش داده میشه طبق گفته اول پاسخ، با جاوا اسکریپت درست شده. پس شما باید این کد رو در یکی از فایل های JS قالب قرار بدید. البته اگه وارد لینک پیش نمایشی که دادم بشید، می تونید نحوه ی استفاده از این کد جاوا اسکریپت در فایل footer.php قالب رو هم مشاهده کنید :

function edameHM() {
    var x = document.getElementById("edameM");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "block";
    }
    var x = document.getElementById("edameKelid");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

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

 

3. کدهای استایل

و در آخر برای بهتر شدن حالت کلید "ادامه مطلب" این کد رو در یکی از فایل های CSS قالب قرار بدید :

#edameM {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
    display: none;
}
#edameKelid {
	background-image: -webkit-linear-gradient(top,#337ab7 0,#265a88 100%);
	background-image: -o-linear-gradient(top,#337ab7 0,#265a88 100%);
	background-image: -webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#265a88));
	background-image: linear-gradient(to bottom,#337ab7 0,#265a88 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	background-repeat: repeat-x;
	border-color: #245580;
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0,0,0,.2);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    padding: 1px 5px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
    border: 0px;
}
#edameKelid:hover {
	background-color: #265a88;
	background-position: 0 -15px;
}

 

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

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

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...