رفتن به مطلب

ویرایش و قرار دادن کد لینک کوتاه در functions.php


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

درود

قصد دارم کد زیر رو  با 3 ویرایش کوتاه در فایل functions.php قرار بدم

1- اول اینکه طوری ویرایش بشه که در بشه در functions قرار داد.

2- وقتی توی باکس لینک کوتاه کلیک بشه، لینک در حافظه کپی بشه و یه پیام برای کاربر ظاهر بشه که لینک کپی شد.

3- همین طور لینک داخل باکس، حالت هایپرلینک داشته باشه

با تشکر

<?php if (function_exists('wp_get_shortlink')) { ?>
<div><span class="post-shortlink">Shortlink: 
<input type='text' value='<?php echo wp_get_shortlink(get_the_ID()); ?>' onclick='this.focus(); this.select();' />
</span></div>
<?php } ?>

 

لینک به ارسال

سلام @chem

این کد رو میتونید بدون مشکل بزارید در فایل functions.php

if (function_exists('wp_get_shortlink')) { ?>
<div>
<p class="post-shortlink">لینک کوتاه :  
<input type="text" value="سلام" id="textInput">
<button onclick="copyFunction()">کپی لینک</button>
</p>
</div>
<?php
} 

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

function copyFunction() {
  var copyText = document.getElementById("textInput");
  copyText.select();
  document.execCommand("copy");
  alert("مقدار مورد نظر کپی شد: " + copyText.value);
}

 

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

سلام @chem

این کد رو میتونید بدون مشکل بزارید در فایل functions.php


if (function_exists('wp_get_shortlink')) { ?>
<div>
<p class="post-shortlink">لینک کوتاه :  
<input type="text" value="سلام" id="textInput">
<button onclick="copyFunction()">کپی لینک</button>
</p>
</div>
<?php
} 

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


function copyFunction() {
  var copyText = document.getElementById("textInput");
  copyText.select();
  document.execCommand("copy");
  alert("مقدار مورد نظر کپی شد: " + copyText.value);
}

 

با سلام و سپاس فراوان

کد اولی که گذاشتم فقط یه کادر لینک کوتاه در بالای هدر سایت ظاهر میشه و هیچ کدوم از پست ها نشون داده نمیشن!!! در حالی که من می خوام در پایین پست ها باشه

فکر کنم جایی از کد مشکل داره چون در باکس لینک فقط کلمه سلام ظاهر میشه به جای لینک کوتاه مطلب

ویرایش شده توسط chem
لینک به ارسال

سلام

فکر کردم خودتون این موارد رو جایگزین میکنید !

خب پس از این کد استفاده کنید برای functions.php

add_filter( 'the_content', 'filter_add_content_post_shortlink' );
function filter_add_content_post_shortlink() { 
if ( is_single() ) {
?>
<div>
<p class="post-shortlink">لینک کوتاه :  
<input type="text" value="<?php echo wp_get_shortlink(); ?>" id="textInput">
<button onclick="copyFunction()">کپی لینک</button>
</p>
</div>
<?php
 }
} 

 

لینک به ارسال
در 57 دقیقه قبل، cherry گفته است :

سلام

فکر کردم خودتون این موارد رو جایگزین میکنید !

خب پس از این کد استفاده کنید برای functions.php


add_filter( 'the_content', 'filter_add_content_post_shortlink' );
function filter_add_content_post_shortlink() { 
if ( is_single() ) {
?>
<div>
<p class="post-shortlink">لینک کوتاه :  
<input type="text" value="<?php echo wp_get_shortlink(); ?>" id="textInput">
<button onclick="copyFunction()">کپی لینک</button>
</p>
</div>
<?php
 }
} 

 

درود و سپاس دوست عزیزم

الان درست شد. واقعا لطف کردید

اما الان دکمه کپی لینک کار نمی کنه! ممنون میشم بفرمایید که کد دومی که برای کپی لینک دادید رو چطور باید وارد کنم و اینکه عرض باکس لینک کوتاه رو چطور بلند تر کنم؟

لینک به ارسال

خواهش میکنم

برای تغییر استایل از این کد استفاده کنید و width رو به دلخواه تغییر بدین (کد رو به فایل استایل اضافه کنید)

.post-shortlink input {
display:inline-block;
width: 200px;
padding: 5px 10px;
border-radius: 5px;
border:1px solid #dcdcdc;
}
.post-shortlink button {
display:inline-block;
padding:5px 10px;
margin: 0 5px;
background-color: #ffffff;
border:1px solid #dcdcdc;
}

و این کد رو در بخش هدر وبسایت قرار بدین 

<script type="text/javascript">
function copyFunction() {
  var copyText = document.getElementById("textInput");
  copyText.select();
  document.execCommand("copy");
  alert("مقدار مورد نظر کپی شد: " + copyText.value);
}
</script>

 

لینک به ارسال
در 28 دقیقه قبل، cherry گفته است :

خواهش میکنم

برای تغییر استایل از این کد استفاده کنید و width رو به دلخواه تغییر بدین (کد رو به فایل استایل اضافه کنید)


.post-shortlink input {
display:inline-block;
width: 200px;
padding: 5px 10px;
border-radius: 5px;
border:1px solid #dcdcdc;
}
.post-shortlink button {
display:inline-block;
padding:5px 10px;
margin: 0 5px;
background-color: #ffffff;
border:1px solid #dcdcdc;
}

و این کد رو در بخش هدر وبسایت قرار بدین 


<script type="text/javascript">
function copyFunction() {
  var copyText = document.getElementById("textInput");
  copyText.select();
  document.execCommand("copy");
  alert("مقدار مورد نظر کپی شد: " + copyText.value);
}
</script>

 

استاد گرامی از محبت شما کمال تشکر رو دارم

نتیجه کار به این صورت شده

link1.JPG

link2.JPG

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

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

درست مثل سافت 98 و سایت دیجیاتو 

ممنون میشم این مورد رو اضافه نمایید.

متشکرم

لینک به ارسال

خواهش میکنم دوست عزیز

کد جاوا اسکریپت رو با این کد جایگزین کنید 

<script type="text/javascript">
function copyFunction() {
  var copyText = document.getElementById("textInput");
  copyText.select();
  document.execCommand("copy");
  $("#text-copied").fadeIn();
   setTimeout(function () {
    $("#text-copied").fadeOut();
  }, 2000);
}
</script>

و کد html رو با این کد

<div>
<p class="post-shortlink">لینک کوتاه :  
<input type="text" value="<?php echo wp_get_shortlink(); ?>" readonly="readonly" onclick="copyFunction()" id="textInput">
<div id="text-copied" style="display:none">کپی شد</div>
</p>
</div>

 

ویرایش شده توسط cherry
لینک به ارسال
در 31 دقیقه قبل، cherry گفته است :

خواهش میکنم دوست عزیز

کد جاوا اسکریپت رو با این کد جایگزین کنید 


<script type="text/javascript">
function copyFunction() {
  var copyText = document.getElementById("textInput");
  copyText.select();
  document.execCommand("copy");
  $("#text-copied").fadeIn();
   setTimeout(function () {
    $("#text-copied").fadeOut();
  }, 2000);
}
</script>

و کد html رو با این کد


<div>
<p class="post-shortlink">لینک کوتاه :  
<input type="text" value="<?php echo wp_get_shortlink(); ?>" readonly="readonly" onclick="copyFunction()" id="textInput">
<div id="text-copied" style="display:none">کپی شد</div>
</p>
</div>

 

درود و بینهایت سپاس استاد گرانقدر

نتیجه کار به صورت زیر شده

link3.JPG

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

مجدد از زحمات شما کمال تشکر دارم

ویرایش شده توسط chem
لینک به ارسال

از این کدهای css برای استایل استفاده کنید

.post-shortlink {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0;
}
.post-shortlink #text-copied {
    position: absolute;
    display: inline-block;
    left: 0;
    background-color: #000000;
    padding: 1px 10px;
    color: #ffffff;
    border-radius: 50px;
}

 

لینک به ارسال
در 6 دقیقه قبل، cherry گفته است :

از این کدهای css برای استایل استفاده کنید


.post-shortlink {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0;
}
.post-shortlink #text-copied {
    position: absolute;
    display: inline-block;
    left: 0;
    background-color: #000000;
    padding: 1px 10px;
    color: #ffffff;
    border-radius: 50px;
}

 

صمیمانه سپاسگزارم

کدهای آخری استفاده کردم منتهی دیگه اون پیام کپی شد رو نشون نمیده

فکر کنم باید از خاصیت z-index استفاده کنیم. که من متاسفانه بلد نیستم چطور کد رو ویرایش کنم

لینک به ارسال
در 6 دقیقه قبل، cherry گفته است :

z-index: 999;

کدهای استایل الان این جور هست درسته استاد؟

با این حالت هم باز پیام کپی شد نشون داده نمیشه

.post-shortlink input {
display:inline-block;
width: 310px;
	text-align: left;
padding: 5px 10px;
border-radius: 5px;
border:1px solid #dcdcdc;
}
.post-shortlink {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0;
}
.post-shortlink #text-copied {
    position: absolute;
    display: inline-block;
    left: 0;
    background-color: #000000;
    padding: 1px 10px;
    color: #ffffff;
    border-radius: 50px;
    z-index: 999;
}

 

ویرایش شده توسط chem
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...