chem

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

16 پست در این موضوع قرار دارد

درود

قصد دارم کد زیر رو  با 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 } ?>

 

0

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


لینک به پست

دوستان ممنون میشم راهنمایی بفرمایید

0

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


لینک به پست

مورد سوم هم اگه نشد مشکلی نیست دوستان

سپاسگزارم

0

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


لینک به پست

ارسال شده در (ویرایش شده)

سلام @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
1

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


لینک به پست

ارسال شده در (ویرایش شده)

در 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
0

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


لینک به پست

سلام

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

خب پس از این کد استفاده کنید برای 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
 }
} 

 

1

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


لینک به پست
در 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
 }
} 

 

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

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

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

0

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


لینک به پست

خواهش میکنم

برای تغییر استایل از این کد استفاده کنید و 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>

 

1

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


لینک به پست
در 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 و سایت دیجیاتو 

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

متشکرم

0

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


لینک به پست

ارسال شده در (ویرایش شده)

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

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

<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
1

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


لینک به پست

ارسال شده در (ویرایش شده)

در 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
0

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


لینک به پست

از این کدهای 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;
}

 

1

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


لینک به پست
در 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 استفاده کنیم. که من متاسفانه بلد نیستم چطور کد رو ویرایش کنم

0

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


لینک به پست

z-index: 999;

1

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


لینک به پست

ارسال شده در (ویرایش شده)

در 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
0

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


لینک به پست

این کدهارو حذف کنید و برای ادامه راهنمایی پیام خصوصی بدین

0

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


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری