رفتن به مطلب

کپی خودکار


AmiRoo

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

درود,دوستان دستور کپی خودکار در سورس وردپرس می خواستم

 

دوستان داخل سایتم یه باکس دارم که توش نوشته شده لینک کوتاه(به صورت دستی لینکی که کوتاه می کنم اونجا وارم میکنم)

الان کاربر باید روش کلیک کنه,کپی کنه (باکس متنی هست-فرم)

می خوام یه طوری باشه کاربر روش کلیک کنه ,کپی بشه و بنویسد کپی شد

دیگه مثل الان دستی انتخاب+کپی نکنه

 

میشه راهنایی کنید

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

درود.

می تونید برای زیباسازی و قابل فهم تر بودن این بخش از سایت، اون لینک کوتاه رو به صورت یک متن با تگ p قرار بدید و توسط یک کلید با تگ button به کاربر بفهمونید که برای کپی کردن اون لینک، روی اون کلید کلیک کنند. مثل این :

5ae37085bcb12_Screenshot-2018-4-27Screenshot.png.7a429b94835dc020c260b33f1d5c522a.png

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

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

 

نسخه ی دیگر این نمونه به همراه نمایش پیام "کپی انجام شد" بعد از کلیک روی کلید مخصوص :

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

 

آموزش استفاده از این روش :

1. اول کد جاوا اسکریپت زیر رو در فایل footer یا header قالب قرار بدید:

<script>
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
</script>

 

2. کتابخانه جاوا اسکریپت هم باید حتما داخل سایتتون فراخوانی شده باشه. من از نسخه 1.11.1 استفاده کردم داخل فایل پیوست شده هم میتونید ببینید به چه صورت استفاده شده:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 

3. تگ P و Button رو در محل مورد نظر از قالبتون قرار بدید. داخل تگ P که در کد زیر آدرس بیست اسکریپت رو نوشتم، اون تابعی که لینک کوتاه رو دریافت میکنه و نمایش میده رو قرار بدید.

<p id="matn">http://20script.ir</p>
<button onclick="copyToClipboard('#matn')">کپی لینک</button>

 

تمام! برای زیباسازی هم می تونید از CSS استفاده کنید که داخل فایل پیوست بالا DIV و استایل ها رو می تونید مشاهده کنید یا از طرح اختصاصی خودتون استفاده کنید. با اجرای فایل HTML پیوست بالا هم می تونید نتیجه کار رو ببینید. کافیه روی کلید "کپی لینک" کلیک کنید و داخل فیلد آزمایش کپی شدن، Paste کنید و ببینید که نتیجه چی شده.

 


 

ولی اگه به هر دلیلی قصد دارید از همون فیلد متنی استفاده کنید و کاربر با کلیک روی فیلد متنی input محتویات فیلد رو کپی کنه، می تونید لینک ها تنها برای اعضای سایت قابل نمایش است. استفاده کنید.

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

در کد بالا هم با کلیک روی فیلد، یک پیام ظاهر میشه که "کپی انجام شد" و به این صورت کاربر متوجه بشه که محتویات اون فیلد کپی شده.

 


 

دو روش رو براتون توضیح دادم. دیگه اینکه از کدوم استفاده کنید با خودتون. ;)

موفق باشید

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

مرسی از وقت و توضیحات کاملت

 

-

<ul>
            <li>نسخه<span><?php the_field('update'); ?></span></li><hr>
            <li>انتشار<span><?php the_time('d F y'); ?></span></li><hr>
            <li>سیستم عامل<span><?php the_field('os'); ?></span></li><hr>
            <li>دسته بندی<br><?php the_category(' , ') ?></li><hr>
            <li>لینک کوتاه</li>
            <input onClick="this.select();" class="short-url" value="<?php the_field('short-url'); ?>" />
          </ul>

 

 

این کد اصلی خودمه

						<li>لینک کوتاه</li>
<p id="matn">short-url</p>
<button onclick="copyToClipboard('#matn')">کپی لینک</button>					
					</ul>

-------
						<li>لینک کوتاه</li>
<p id="matn"><input onClick="this.select();" class="short-url" value="<?php the_field('short-url'); ?>" /></p>
<button onclick="copyToClipboard('#matn')">کپی لینک</button>					
					</ul>

این 2تا مورد بالارا گذاشتم اما هر2تا نشد

مورد اول که هیچی,مورد اول فیلد (همون شکل ماله خودم) باقی میماند و دکمه کپی لینک پایینش میامد ولی هیچی نمیشد...

سایت: saya-app.ir

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

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

<p id="matn"><?php the_field('short-url'); ?></p>
<button onclick="copyToClipboard('#matn')">کپی لینک</button>

 

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

بایگانی شده

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

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