رفتن به مطلب

آموزش قراردادن لینک کوتاه برای نوشته ها در وردپرس


sajad

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

سلام 

تو این تاپیک قصد دارم نحوه قرار دادن لینک کوتاه برای نوشته های وردپرس رو با شما کاربران به اشتراک بذارم. 

قصد داریم در صفحه نوشته ها که مربوط به فایل single.php می شود بخشی مشابه عکس زیر ایجاد کنیم:

 

5b71df47b6b50_ScreenShot2018-08-13at23_43_28.png.abce934499b0f96bc0cdd9a2bc52197a.png

 

کدهای ما برای ایجاد کردن چنین بخشی شامل سه بخش میشه.

  1. کد php: برای گرفتن آیدی نوشته جاری که کاربر در حال مطالعه هست استفاده شده است.
  2. کدهای html و css که برای ایجاد و استایل دهی ساختاری که در عکس مشاهده می کنید استفاده شده است.
  3. کدهای جاوااسکریپت که برای کپی کردن آدرس نوشته زمانی که کاربر روی دکمه کپی کن! کلیک می کند فراخوانی و استفاده می شود.

 

مرحله اول:
ابتدا کدهای استایل زیر رو به قالب سایت خود اضافه کنید. 

.wbc-shortlink {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}
button.wbc-copydone {
    padding: 11px;
    border: 1px solid #03A9F4;
    background-color: #03A9F4;
    font-family: inherit !IMPORTANT;
}
input#wbc-post-shortlink {
    text-align: left;
    border-color: #03A9F4;
    border-width: 2px;
}
.wbc-shortlink table tr td:first-child {
    text-align: left;
}
.wbc-shortlink table {
    position: relative;
}
p#wbc-success-copy-done {
    position: absolute;
    top: -45px;
    left: 32%;
    background-color: #03A9F4;
    padding: 8px 18px;
    color: #ffffff;
    border-radius: 4px;
    display: none;
}
h4.wbc-title-shortlink {
    text-align: right;
}

 

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

		<div class="wbc-shortlink">
			<h4 class="wbc-title-shortlink">دریافت لینک کوتاه این نوشته:</h4>
			<table>
				<tr>
					<td>
						<button class="wbc-copydone"  onclick="wbc_function_copy()">کپی کن!</button>
					</td>
					<td>
						<input id="wbc-post-shortlink" value="<?php echo home_url()."/?p=".$post->ID;?>" type="text" readonly>
						<p id="wbc-success-copy-done">کپی شد!</p>
					</td>
				</tr>
			</table>
		</div>
<script type="text/javascript">
			function wbc_function_copy() {
				var copyText = document.getElementById("wbc-post-shortlink");
				copyText.select();
				document.execCommand("copy");
				document.getElementById("wbc-success-copy-done").style.display = "block";
				setTimeout(function(){
					 document.getElementById("wbc-success-copy-done").style.display = "none";
				 }, 5000);
			}
</script>

 

چند نکته:

  1. قبل از پیست کردن کد بالا در فایل single.php دقت کنید که اگه قبلا تگ php باز شده بود شما باید تگ php رو ببندید به این صورت که قبل از کدهای بالا بنویسید: 
    ?>
    و همچنین در آخر کدهایی که اضافه کردید مجدد تگ php رو باز کنید به این شکل:
    <?php
  2. میتونید کدهای جاوااسکریپت رو در فایل footer.php قبل از بسته شدن تگ body قرار بدید. ولی ممکنه سایت شما تو صفحه پست ها فوتر رو فراخونی نکرده باشه. برای همین منظور بهتره کد جاوااسکریپت رو با کد php و html  باهم قرار بدید.

 

و در نهایت هم زمانی که روی دکمه کپی کن! کلیک میشه پیام کپی شد به کاربر نمایش داده خواهد شد. همانند تصویر زیر:

5b71e71d1202b_ScreenShot2018-08-13at23_43_53.png.2b30e323542d2be18e6a1bddd2d71cb2.png

 

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

لینک به ارسال
در 14 ساعت قبل، m4xs051 گفته است :

سلام 

تو این تاپیک قصد دارم نحوه قرار دادن لینک کوتاه برای نوشته های وردپرس رو با شما کاربران به اشتراک بذارم. 

قصد داریم در صفحه نوشته ها که مربوط به فایل single.php می شود بخشی مشابه عکس زیر ایجاد کنیم:

 

5b71df47b6b50_ScreenShot2018-08-13at23_43_28.png.abce934499b0f96bc0cdd9a2bc52197a.png

 

کدهای ما برای ایجاد کردن چنین بخشی شامل سه بخش میشه.

  1. کد php: برای گرفتن آیدی نوشته جاری که کاربر در حال مطالعه هست استفاده شده است.
  2. کدهای html و css که برای ایجاد و استایل دهی ساختاری که در عکس مشاهده می کنید استفاده شده است.
  3. کدهای جاوااسکریپت که برای کپی کردن آدرس نوشته زمانی که کاربر روی دکمه کپی کن! کلیک می کند فراخوانی و استفاده می شود.

 

مرحله اول:
ابتدا کدهای استایل زیر رو به قالب سایت خود اضافه کنید. 


.wbc-shortlink {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}
button.wbc-copydone {
    padding: 11px;
    border: 1px solid #03A9F4;
    background-color: #03A9F4;
    font-family: inherit !IMPORTANT;
}
input#wbc-post-shortlink {
    text-align: left;
    border-color: #03A9F4;
    border-width: 2px;
}
.wbc-shortlink table tr td:first-child {
    text-align: left;
}
.wbc-shortlink table {
    position: relative;
}
p#wbc-success-copy-done {
    position: absolute;
    top: -45px;
    left: 32%;
    background-color: #03A9F4;
    padding: 8px 18px;
    color: #ffffff;
    border-radius: 4px;
    display: none;
}
h4.wbc-title-shortlink {
    text-align: right;
}

 

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


		<div class="wbc-shortlink">
			<h4 class="wbc-title-shortlink">دریافت لینک کوتاه این نوشته:</h4>
			<table>
				<tr>
					<td>
						<button class="wbc-copydone"  onclick="wbc_function_copy()">کپی کن!</button>
					</td>
					<td>
						<input id="wbc-post-shortlink" value="<?php echo home_url()."/?p=".$post->ID;?>" type="text" readonly>
						<p id="wbc-success-copy-done">کپی شد!</p>
					</td>
				</tr>
			</table>
		</div>

<script type="text/javascript">
			function wbc_function_copy() {
				var copyText = document.getElementById("wbc-post-shortlink");
				copyText.select();
				document.execCommand("copy");
				document.getElementById("wbc-success-copy-done").style.display = "block";
				setTimeout(function(){
					 document.getElementById("wbc-success-copy-done").style.display = "none";
				 }, 5000);
			}
</script>

 

چند نکته:

  1. قبل از پیست کردن کد بالا در فایل single.php دقت کنید که اگه قبلا تگ php باز شده بود شما باید تگ php رو ببندید به این صورت که قبل از کدهای بالا بنویسید: 
    
    ?>
    و همچنین در آخر کدهایی که اضافه کردید مجدد تگ php رو باز کنید به این شکل:
    
    <?php
  2. میتونید کدهای جاوااسکریپت رو در فایل footer.php قبل از بسته شدن تگ body قرار بدید. ولی ممکنه سایت شما تو صفحه پست ها فوتر رو فراخونی نکرده باشه. برای همین منظور بهتره کد جاوااسکریپت رو با کد php و html  باهم قرار بدید.

 

و در نهایت هم زمانی که روی دکمه کپی کن! کلیک میشه پیام کپی شد به کاربر نمایش داده خواهد شد. همانند تصویر زیر:

5b71e71d1202b_ScreenShot2018-08-13at23_43_53.png.2b30e323542d2be18e6a1bddd2d71cb2.png

 

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

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

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

add_action('after_post_content', {
	
	<div class="wbc-shortlink">
			<h4 class="wbc-title-shortlink">دریافت لینک کوتاه این نوشته:</h4>
			<table>
				<tr>
					<td>
						<button class="wbc-copydone"  onclick="wbc_function_copy()">کپی کن!</button>
					</td>
					<td>
						<input id="wbc-post-shortlink" value="<?php echo home_url()."/?p=".$post->ID;?>" type="text" readonly>
						<p id="wbc-success-copy-done">کپی شد!</p>
					</td>
				</tr>
			</table>
		</div>
		
		<script type="text/javascript">
			function wbc_function_copy() {
				var copyText = document.getElementById("wbc-post-shortlink");
				copyText.select();
				document.execCommand("copy");
				document.getElementById("wbc-success-copy-done").style.display = "block";
				setTimeout(function(){
					 document.getElementById("wbc-success-copy-done").style.display = "none";
				 }, 5000);
			}
</script>
	
};

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

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

 

خب یه مقدار کدها مرتب تر شد و مخاطب راحتر میتونه از کد استفاده کنه!

دیگه نیاز نیست کدهای استایل و کدهای html و کدهای php رو جدا جدا تو بخش های مختلف بزارید. کافی کل کد زیر رو در فانکشن قالب قرار بدید تا خروجی مورد نظر رو دریافت کنید.

 

add_filter("the_content", "wbc_function_copy");
function wbc_function_copy($content){
	$shortlink = '
	<div class="wbc-shortlink">
		<h4 class="wbc-title-shortlink">دریافت لینک کوتاه این نوشته:</h4>
		<table>
			<tr>
				<td>
					<button class="wbc-copydone"  onclick="wbc_function_copy()">کپی کن!</button>
				</td>
				<td>
					<input id="wbc-post-shortlink" value="'.home_url().'/?p='.get_the_ID().'" type="text" readonly>
					<p id="wbc-success-copy-done">کپی شد!</p>
				</td>
			</tr>
		</table>
	</div>
	';
	if(is_single() && !is_home()){
		$content.=$shortlink;
	}
	return $content;
}
add_action("wp_head", function(){
	?>
			<style>
				.wbc-shortlink {
					width: 100%;
					margin-top: 20px;
					margin-bottom: 20px;
				}
				button.wbc-copydone {
					padding: 11px;
					border: 1px solid #03A9F4;
					background-color: #03A9F4;
					font-family: inherit !IMPORTANT;
				}
				input#wbc-post-shortlink {
					text-align: left;
					border-color: #03A9F4;
					border-width: 2px;
				}
				.wbc-shortlink table tr td:first-child {
					text-align: left;
				}
				.wbc-shortlink table {
					position: relative;
				}
				p#wbc-success-copy-done {
					position: absolute;
					top: -45px;
					left: 32%;
					background-color: #03A9F4;
					padding: 8px 18px;
					color: #ffffff;
					border-radius: 4px;
					display: none;
				}
				h4.wbc-title-shortlink {
					text-align: right;
				}
			</style>
	<?php
});
add_action("wp_footer", function(){
	?>
	<script type="text/javascript">
		function wbc_function_copy() {
			var copyText = document.getElementById("wbc-post-shortlink");
			copyText.select();
			document.execCommand("copy");
			document.getElementById("wbc-success-copy-done").style.display = "block";
			setTimeout(function(){
				 document.getElementById("wbc-success-copy-done").style.display = "none";
			 }, 5000);
		}
	</script>
	<?php
});

 

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

 

خب یه مقدار تو کدها مرتب تر شد و مخاطب راحتر میتونه از کد استفاده کنه!

دیگه نیاز نیست کدهای استایل و کدهای html و کدهای php رو جدا جدا تو بخش های مختلف بزارید. کافی کل کد زیر رو در فانکشن قالب قرار بدید تا خروجی مورد نظر رو دریافت کنید.

 


add_filter("the_content", "wbc_function_copy");
function wbc_function_copy($content){
	$shortlink = '
	<div class="wbc-shortlink">
		<h4 class="wbc-title-shortlink">دریافت لینک کوتاه این نوشته:</h4>
		<table>
			<tr>
				<td>
					<button class="wbc-copydone"  onclick="wbc_function_copy()">کپی کن!</button>
				</td>
				<td>
					<input id="wbc-post-shortlink" value="'.home_url().'/?p='.get_the_ID().'" type="text" readonly>
					<p id="wbc-success-copy-done">کپی شد!</p>
				</td>
			</tr>
		</table>
	</div>
	';
	if(is_single() && !is_home()){
		$content.=$shortlink;
	}
	return $content;
}
add_action("wp_head", function(){
	?>
			<style>
				.wbc-shortlink {
					width: 100%;
					margin-top: 20px;
					margin-bottom: 20px;
				}
				button.wbc-copydone {
					padding: 11px;
					border: 1px solid #03A9F4;
					background-color: #03A9F4;
					font-family: inherit !IMPORTANT;
				}
				input#wbc-post-shortlink {
					text-align: left;
					border-color: #03A9F4;
					border-width: 2px;
				}
				.wbc-shortlink table tr td:first-child {
					text-align: left;
				}
				.wbc-shortlink table {
					position: relative;
				}
				p#wbc-success-copy-done {
					position: absolute;
					top: -45px;
					left: 32%;
					background-color: #03A9F4;
					padding: 8px 18px;
					color: #ffffff;
					border-radius: 4px;
					display: none;
				}
				h4.wbc-title-shortlink {
					text-align: right;
				}
			</style>
	<?php
});
add_action("wp_footer", function(){
	?>
	<script type="text/javascript">
		function wbc_function_copy() {
			var copyText = document.getElementById("wbc-post-shortlink");
			copyText.select();
			document.execCommand("copy");
			document.getElementById("wbc-success-copy-done").style.display = "block";
			setTimeout(function(){
				 document.getElementById("wbc-success-copy-done").style.display = "none";
			 }, 5000);
		}
	</script>
	<?php
});

 

سلام استاد الان عالی شده واقعا ممنونم

اما چند پیشنهاد واسه بهتر شدن این کد کاربردی

1 -اگه سری به سافت 98 بزنید در پایین پست ها پسورد درج شده وقتی موس در اون باکس قرار می گیره یک پیام ظاهر میشه که برای کپی کلیک کنید. اگه محبت کنید این رو پیاده سازی کنید عالی میشه

2- دوم اینکه باکس و border لینک کوتاه دقیقا شکل و شمایل کادر لینک کوتاه دیجیاتو داشته باشه که هم فضای کمتری می گیره و هم قشنگ تره

3- سوم هم اینکه تایتل دریافت لینک کوتاه این نوشته هم باید کنار باکس و بشه لینک کوتاه مطلب که وقتی موس روی کادر قرار بگیره پیام برای کپی لینک کلیک کنید

digi.JPG

saaa.JPG

4- کادر قرمز نباشه و فقط کادر آبی با همون استایل و سبک دیجیاتو در یک بیضی باشه و کنار اون هم یک علامت لینک باشه عالی میشه

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

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

استاد گرامی ام سلام

به نتیجه ای در مورد مواردی که عرض کردم نرسیدید؟

بیصبرانه منتظرم که این کار یک کار عالی و حرفه ای بشه

صمیمانه سپاسگزارم از زحمات شما

لینک به ارسال
در در 8/14/2018 at 18:08، m4xs051 گفته است :

 

خب یه مقدار کدها مرتب تر شد و مخاطب راحتر میتونه از کد استفاده کنه!

دیگه نیاز نیست کدهای استایل و کدهای html و کدهای php رو جدا جدا تو بخش های مختلف بزارید. کافی کل کد زیر رو در فانکشن قالب قرار بدید تا خروجی مورد نظر رو دریافت کنید.

 


add_filter("the_content", "wbc_function_copy");
function wbc_function_copy($content){
	$shortlink = '
	<div class="wbc-shortlink">
		<h4 class="wbc-title-shortlink">دریافت لینک کوتاه این نوشته:</h4>
		<table>
			<tr>
				<td>
					<button class="wbc-copydone"  onclick="wbc_function_copy()">کپی کن!</button>
				</td>
				<td>
					<input id="wbc-post-shortlink" value="'.home_url().'/?p='.get_the_ID().'" type="text" readonly>
					<p id="wbc-success-copy-done">کپی شد!</p>
				</td>
			</tr>
		</table>
	</div>
	';
	if(is_single() && !is_home()){
		$content.=$shortlink;
	}
	return $content;
}
add_action("wp_head", function(){
	?>
			<style>
				.wbc-shortlink {
					width: 100%;
					margin-top: 20px;
					margin-bottom: 20px;
				}
				button.wbc-copydone {
					padding: 11px;
					border: 1px solid #03A9F4;
					background-color: #03A9F4;
					font-family: inherit !IMPORTANT;
				}
				input#wbc-post-shortlink {
					text-align: left;
					border-color: #03A9F4;
					border-width: 2px;
				}
				.wbc-shortlink table tr td:first-child {
					text-align: left;
				}
				.wbc-shortlink table {
					position: relative;
				}
				p#wbc-success-copy-done {
					position: absolute;
					top: -45px;
					left: 32%;
					background-color: #03A9F4;
					padding: 8px 18px;
					color: #ffffff;
					border-radius: 4px;
					display: none;
				}
				h4.wbc-title-shortlink {
					text-align: right;
				}
			</style>
	<?php
});
add_action("wp_footer", function(){
	?>
	<script type="text/javascript">
		function wbc_function_copy() {
			var copyText = document.getElementById("wbc-post-shortlink");
			copyText.select();
			document.execCommand("copy");
			document.getElementById("wbc-success-copy-done").style.display = "block";
			setTimeout(function(){
				 document.getElementById("wbc-success-copy-done").style.display = "none";
			 }, 5000);
		}
	</script>
	<?php
});

 

درود استاد

علاوه بر مواردی که در پست های قبلی جهت بهبود کد خدمت شما عرض کردم

نکته بعدی اینکه الان این کد برای ووکامرس و محصولات هم نشون داده میشه و یه مقدار مطلوب نیست اگه میشه طوری ویرایش بفرمایید که فقط برای پست های سایت کار این کد نشون داده بشه و برای محصولات نشون داده نشه

با تشکر فراوان

لینک به ارسال
در 14 ساعت قبل، chem گفته است :

استاد گرامی ام سلام

به نتیجه ای در مورد مواردی که عرض کردم نرسیدید؟

بیصبرانه منتظرم که این کار یک کار عالی و حرفه ای بشه

صمیمانه سپاسگزارم از زحمات شما

سلام دوست عزیز

نه متاسفانه به دلیل ذیقه وقت مواردی که فرمودید رو نتونستم بررسی کنم.

مواردی که ذکر شده بیشتر استایل نویسی هست که اگر کمی تو این زمینه آشنا باشید میتونید استایل رو اونطوری که مدنظرتون هست تو سایت پیاده کنید.

لینک به ارسال
در 1 ساعت قبل، chem گفته است :

نکته بعدی اینکه الان این کد برای ووکامرس و محصولات هم نشون داده میشه و یه مقدار مطلوب نیست اگه میشه طوری ویرایش بفرمایید که فقط برای پست های سایت کار این کد نشون داده بشه و برای محصولات نشون داده نشه

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

لینک به ارسال
در 4 ساعت قبل، m4xs051 گفته است :

سلام دوست عزیز

نه متاسفانه به دلیل ذیقه وقت مواردی که فرمودید رو نتونستم بررسی کنم.

مواردی که ذکر شده بیشتر استایل نویسی هست که اگر کمی تو این زمینه آشنا باشید میتونید استایل رو اونطوری که مدنظرتون هست تو سایت پیاده کنید.

به هر حال خیلی خیلی ممنون میشم در هر زمان که وقت کردید محبت بفرمایید

در 2 ساعت قبل، m4xs051 گفته است :

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

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

لینک به ارسال

@chem

قراردادن لینک کوتاه فقط در نوشته ها:

add_filter("the_content", "wbc_function_copy");
function wbc_function_copy($content){
	global $post;
	$post_current_type = get_post_type($post->ID);
	if($post_current_type == "post"){
		$shortlink = '
		<div class="wbc-shortlink">
			<h4 class="wbc-title-shortlink">دریافت لینک کوتاه این نوشته:</h4>
			<table>
				<tr>
					<td>
						<button class="wbc-copydone"  onclick="wbc_function_copy()">کپی کن!</button>
					</td>
					<td>
						<input id="wbc-post-shortlink" value="'.home_url().'/?p='.get_the_ID().'" type="text" readonly>
						<p id="wbc-success-copy-done">کپی شد!</p>
					</td>
				</tr>
			</table>
		</div>
		';
			if(is_single() && !is_home()){
				$content.=$shortlink;
			}
			return $content;
	}
	else{
		return $content;
	}
}
add_action("wp_head", function(){
	?>
			<style>
				.wbc-shortlink {
					width: 100%;
					margin-top: 20px;
					margin-bottom: 20px;
				}
				button.wbc-copydone {
					padding: 11px;
					border: 1px solid #03A9F4;
					background-color: #03A9F4;
					font-family: inherit !IMPORTANT;
				}
				input#wbc-post-shortlink {
					text-align: left;
					border-color: #03A9F4;
					border-width: 2px;
				}
				.wbc-shortlink table tr td:first-child {
					text-align: left;
				}
				.wbc-shortlink table {
					position: relative;
				}
				p#wbc-success-copy-done {
					position: absolute;
					top: -45px;
					left: 32%;
					background-color: #03A9F4;
					padding: 8px 18px;
					color: #ffffff;
					border-radius: 4px;
					display: none;
				}
				h4.wbc-title-shortlink {
					text-align: right;
				}
			</style>
	<?php
});
add_action("wp_footer", function(){
	?>
	<script type="text/javascript">
		function wbc_function_copy() {
			var copyText = document.getElementById("wbc-post-shortlink");
			copyText.select();
			document.execCommand("copy");
			document.getElementById("wbc-success-copy-done").style.display = "block";
			setTimeout(function(){
				 document.getElementById("wbc-success-copy-done").style.display = "none";
			 }, 5000);
		}
	</script>
	<?php
});

 

لینک به ارسال
در 1 ساعت قبل، m4xs051 گفته است :

@chem

قراردادن لینک کوتاه فقط در نوشته ها:


add_filter("the_content", "wbc_function_copy");
function wbc_function_copy($content){
	global $post;
	$post_current_type = get_post_type($post->ID);
	if($post_current_type == "post"){
		$shortlink = '
		<div class="wbc-shortlink">
			<h4 class="wbc-title-shortlink">دریافت لینک کوتاه این نوشته:</h4>
			<table>
				<tr>
					<td>
						<button class="wbc-copydone"  onclick="wbc_function_copy()">کپی کن!</button>
					</td>
					<td>
						<input id="wbc-post-shortlink" value="'.home_url().'/?p='.get_the_ID().'" type="text" readonly>
						<p id="wbc-success-copy-done">کپی شد!</p>
					</td>
				</tr>
			</table>
		</div>
		';
			if(is_single() && !is_home()){
				$content.=$shortlink;
			}
			return $content;
	}
	else{
		return $content;
	}
}
add_action("wp_head", function(){
	?>
			<style>
				.wbc-shortlink {
					width: 100%;
					margin-top: 20px;
					margin-bottom: 20px;
				}
				button.wbc-copydone {
					padding: 11px;
					border: 1px solid #03A9F4;
					background-color: #03A9F4;
					font-family: inherit !IMPORTANT;
				}
				input#wbc-post-shortlink {
					text-align: left;
					border-color: #03A9F4;
					border-width: 2px;
				}
				.wbc-shortlink table tr td:first-child {
					text-align: left;
				}
				.wbc-shortlink table {
					position: relative;
				}
				p#wbc-success-copy-done {
					position: absolute;
					top: -45px;
					left: 32%;
					background-color: #03A9F4;
					padding: 8px 18px;
					color: #ffffff;
					border-radius: 4px;
					display: none;
				}
				h4.wbc-title-shortlink {
					text-align: right;
				}
			</style>
	<?php
});
add_action("wp_footer", function(){
	?>
	<script type="text/javascript">
		function wbc_function_copy() {
			var copyText = document.getElementById("wbc-post-shortlink");
			copyText.select();
			document.execCommand("copy");
			document.getElementById("wbc-success-copy-done").style.display = "block";
			setTimeout(function(){
				 document.getElementById("wbc-success-copy-done").style.display = "none";
			 }, 5000);
		}
	</script>
	<?php
});

 

سلام و عرض ادب

الان اکی شد

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

چون راستش من هیچی از کد نویسی و css سر در نمیارم

بینهایت ممنون و سپاسگذارم

در در 8/14/2018 at 18:42، chem گفته است :

سلام استاد الان عالی شده واقعا ممنونم

اما چند پیشنهاد واسه بهتر شدن این کد کاربردی

1 -اگه سری به سافت 98 بزنید در پایین پست ها پسورد درج شده وقتی موس در اون باکس قرار می گیره یک پیام ظاهر میشه که برای کپی کلیک کنید. اگه محبت کنید این رو پیاده سازی کنید عالی میشه

2- دوم اینکه باکس و border لینک کوتاه دقیقا شکل و شمایل کادر لینک کوتاه دیجیاتو داشته باشه که هم فضای کمتری می گیره و هم قشنگ تره

3- سوم هم اینکه تایتل دریافت لینک کوتاه این نوشته هم باید کنار باکس و بشه لینک کوتاه مطلب که وقتی موس روی کادر قرار بگیره پیام برای کپی لینک کلیک کنید

digi.JPG

saaa.JPG

4- کادر قرمز نباشه و فقط کادر آبی با همون استایل و سبک دیجیاتو در یک بیضی باشه و کنار اون هم یک علامت لینک باشه عالی میشه

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

 

لینک به ارسال
  • 4 هفته بعد...

استاد @m4xs051

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

با تشکر فراوان

ویرایش شده توسط chem
لینک به ارسال
  • 4 هفته بعد...
در در 8/19/2018 at 14:03، chem گفته است :

سلام و عرض ادب

الان اکی شد

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

چون راستش من هیچی از کد نویسی و css سر در نمیارم

بینهایت ممنون و سپاسگذارم

 

چطور میشه کادر آبی رنگ حاوی لینک کوتاه پست رو طوری تنظیم کرد که کاملا در سمت چپ قرار بگیره ( الان برای من دقیق در وسط و پایین پست قرار داره) و همین طور کل لینک رو نشون بده؟

همین طور اون پیام کپی شد! برای من ظاهر نمیشه. آیا دلیل خاصی داره؟

 

ویرایش شده توسط chem
لینک به ارسال
add_filter("the_content", "wbc_function_copy");
function wbc_function_copy($content){
	global $post;
	$post_current_type = get_post_type($post->ID);
	if($post_current_type == "post"){
		$shortlink = '
		<div class="wbc-shortlink">
			<h4 class="wbc-title-shortlink">دریافت لینک کوتاه این نوشته:</h4>
			<table>
				<tr>
					<td>
						<button class="wbc-copydone"  onclick="wbc_function_copy()">کپی کن!</button>
					</td>
					<td colspan="2">
						<input id="wbc-post-shortlink" value="'.home_url().'/?p='.get_the_ID().'" type="text" readonly>
						<p id="wbc-success-copy-done">کپی شد!</p>
					</td>
				</tr>
			</table>
		</div>
		';
			if(is_single() && !is_home()){
				$content.=$shortlink;
			}
			return $content;
	}
	else{
		return $content;
	}
}
add_action("wp_head", function(){
	?>
			<style>
				.wbc-shortlink {
					width: 100%;
					margin-top: 20px;
					margin-bottom: 20px;
				}
				button.wbc-copydone {
					padding: 11px;
					border: 1px solid #03A9F4;
					background-color: #03A9F4;
					font-family: inherit !IMPORTANT;
				}
				input#wbc-post-shortlink {
					text-align: left;
					border-color: #03A9F4;
					border-width: 2px;
				}
				.wbc-shortlink table tr td:first-child {
					text-align: left;
				}
				.wbc-shortlink table {
					position: relative;
				}
				.wbc-shortlink table tr td:nth-child(2) {
    			text-align: left !important;
				}
				.wbc-shortlink table, tr, td {
				    border: none !important;
				}
				p#wbc-success-copy-done {
					position: absolute;
					top: -45px;
					left: 32%;
					background-color: #03A9F4;
					padding: 8px 18px;
					color: #ffffff;
					border-radius: 4px;
					display: none;
				}
				h4.wbc-title-shortlink {
					text-align: right;
				}
			</style>
	<?php
});
add_action("wp_footer", function(){
	?>
	<script type="text/javascript">
		function wbc_function_copy() {
			var copyText = document.getElementById("wbc-post-shortlink");
			copyText.select();
			document.execCommand("copy");
			document.getElementById("wbc-success-copy-done").style.display = "block";
			setTimeout(function(){
				 document.getElementById("wbc-success-copy-done").style.display = "none";
			 }, 5000);
		}
	</script>
	<?php
});

@chem

از این کد استفاده کنید و جایگزین قبلی کنید.

چطور میشه کادر آبی رنگ حاوی لینک کوتاه پست رو طوری تنظیم کرد که کاملا در سمت چپ قرار بگیره ( الان برای من دقیق در وسط و پایین پست قرار داره) و همین طور کل لینک رو نشون بده؟ ===> اصلاح شده تو این کد جدید 

همین طور اون پیام کپی شد! برای من ظاهر نمیشه. آیا دلیل خاصی داره؟ ===> ممکنه استایلش پاک شده باشه ممکنه html و ممکنه و...

 

خروجی رو باید اینطوری داشته باشید:

 

5bb78447ad75e_ScreenShot2018-10-05at19_00_54.png.d212d043b1d6dc7c93359b5bd7c683fc.png

 

موفق باشید...

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

add_filter("the_content", "wbc_function_copy");
function wbc_function_copy($content){
	global $post;
	$post_current_type = get_post_type($post->ID);
	if($post_current_type == "post"){
		$shortlink = '
		<div class="wbc-shortlink">
			<h4 class="wbc-title-shortlink">دریافت لینک کوتاه این نوشته:</h4>
			<table>
				<tr>
					<td>
						<button class="wbc-copydone"  onclick="wbc_function_copy()">کپی کن!</button>
					</td>
					<td colspan="2">
						<input id="wbc-post-shortlink" value="'.home_url().'/?p='.get_the_ID().'" type="text" readonly>
						<p id="wbc-success-copy-done">کپی شد!</p>
					</td>
				</tr>
			</table>
		</div>
		';
			if(is_single() && !is_home()){
				$content.=$shortlink;
			}
			return $content;
	}
	else{
		return $content;
	}
}
add_action("wp_head", function(){
	?>
			<style>
				.wbc-shortlink {
					width: 100%;
					margin-top: 20px;
					margin-bottom: 20px;
				}
				button.wbc-copydone {
					padding: 11px;
					border: 1px solid #03A9F4;
					background-color: #03A9F4;
					font-family: inherit !IMPORTANT;
				}
				input#wbc-post-shortlink {
					text-align: left;
					border-color: #03A9F4;
					border-width: 2px;
				}
				.wbc-shortlink table tr td:first-child {
					text-align: left;
				}
				.wbc-shortlink table {
					position: relative;
				}
				.wbc-shortlink table tr td:nth-child(2) {
    			text-align: left !important;
				}
				.wbc-shortlink table, tr, td {
				    border: none !important;
				}
				p#wbc-success-copy-done {
					position: absolute;
					top: -45px;
					left: 32%;
					background-color: #03A9F4;
					padding: 8px 18px;
					color: #ffffff;
					border-radius: 4px;
					display: none;
				}
				h4.wbc-title-shortlink {
					text-align: right;
				}
			</style>
	<?php
});
add_action("wp_footer", function(){
	?>
	<script type="text/javascript">
		function wbc_function_copy() {
			var copyText = document.getElementById("wbc-post-shortlink");
			copyText.select();
			document.execCommand("copy");
			document.getElementById("wbc-success-copy-done").style.display = "block";
			setTimeout(function(){
				 document.getElementById("wbc-success-copy-done").style.display = "none";
			 }, 5000);
		}
	</script>
	<?php
});

@chem

از این کد استفاده کنید و جایگزین قبلی کنید.

چطور میشه کادر آبی رنگ حاوی لینک کوتاه پست رو طوری تنظیم کرد که کاملا در سمت چپ قرار بگیره ( الان برای من دقیق در وسط و پایین پست قرار داره) و همین طور کل لینک رو نشون بده؟ ===> اصلاح شده تو این کد جدید 

همین طور اون پیام کپی شد! برای من ظاهر نمیشه. آیا دلیل خاصی داره؟ ===> ممکنه استایلش پاک شده باشه ممکنه html و ممکنه و...

 

خروجی رو باید اینطوری داشته باشید:

 

5bb78447ad75e_ScreenShot2018-10-05at19_00_54.png.d212d043b1d6dc7c93359b5bd7c683fc.png

 

موفق باشید...

صمیمانه از زحمات و توجه شما دوست گرانقدرم تشکر می کنم

وقتی از کد جدید استفاده می کنم به صورت زیر میشه

captureaa.JPG

 

خودم به صورت سعی و خطا اینجوری در آوردم کد رو ( راستش هیچی از css بلد نیستم)

add_filter("the_content", "wbc_function_copy");
function wbc_function_copy($content){
	global $post;
	$post_current_type = get_post_type($post->ID);
	if($post_current_type == "post"){
		$shortlink = '
		<div class="wbc-shortlink">
						
				<tr>
					
						<button class="wbc-copydone"  onclick="wbc_function_copy()">لینک کوتاه مطلب</button>
					
					<td>
						<input id="wbc-post-shortlink" value="'.home_url().'/?p='.get_the_ID().'" type="text" readonly>
						<p id="wbc-success-copy-done">کپی شد!</p>
					</td>
				</tr>
			
		</div>
		';
			if(is_single() && !is_home()){
				$content.=$shortlink;
			}
			return $content;
	}
	else{
		return $content;
	}
}
add_action("wp_head", function(){
	?>
			<style>
				.wbc-shortlink {
					width: 100%;
					margin-top: 15px;
					margin-bottom: 15px;
				}
				button.wbc-copydone {
					padding: 11px;
					border: 1px solid #03A9F4;
					background-color: #03A9F4;
					font-family: inherit !IMPORTANT;
				}
				input#wbc-post-shortlink {
					text-align: left;
					border-color: #03A9F4;
					border-width: 2px;
				}
				.wbc-shortlink table tr td:first-child {
					text-align: left;
				}
				.wbc-shortlink table {
					position: relative;
				}
				p#wbc-success-copy-done {
					position: absolute;
					top: -45px;
					left: 32%;
					background-color: #03A9F4;
					padding: 8px 18px;
					color: #ffffff;
					border-radius: 4px;
					display: none;
				}
				h4.wbc-title-shortlink {
					text-align: right;
				}
			</style>
	<?php
});
add_action("wp_footer", function(){
	?>
	<script type="text/javascript">
		function wbc_function_copy() {
			var copyText = document.getElementById("wbc-post-shortlink");
			copyText.select();
			document.execCommand("copy");
			document.getElementById("wbc-success-copy-done").style.display = "block";
			setTimeout(function(){
				 document.getElementById("wbc-success-copy-done").style.display = "none";
			 }, 5000);
		}
	</script>
	<?php
});

Capture2.JPG

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

مجدد تشکر می کنم از زحمات ارزنده شما استاد گرامی ام

لینک به ارسال

در کل می خوام در نهایت همچین حالتی بشه به طوری که لینک کاملا در قسمت سمت چپ قرار بگیره همراه با آیکن لینک و دکمه آبی هم بیاد داخل کادر و سمت راست

linkos.jpg

لینک به ارسال

@chem

خواهش میکنم.

ببینید من خروجی کار رو براتون پیوست کردم عکسش که چطوری هست. ولی خب ممکنه شما تو قالبی که دارید استفاده میکنید استایل های بصورت کلی و عمومی تعریف شده باشه که باعث بشه خروجی که دریافت میکنید با خروجی که من پیوست کردم متفاوت باشه.

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

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

@chem

خواهش میکنم.

ببینید من خروجی کار رو براتون پیوست کردم عکسش که چطوری هست. ولی خب ممکنه شما تو قالبی که دارید استفاده میکنید استایل های بصورت کلی و عمومی تعریف شده باشه که باعث بشه خروجی که دریافت میکنید با خروجی که من پیوست کردم متفاوت باشه.

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

ممنونم

یعنی نمیشه در کل کادر رو طوری طراحی کرد که هم دکمه و هم لینک کوتاه درش قرار بگیره؟ با همین حالت و کدهایی که الان در اختیار دارید؟

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

و اگر هم باز نشه فقط همین کادر آبی  باشه که در سمت راست اون فقط کلمه لینک کوتاه باشه و در سمت چپ هم لینک کوتاه مطلب با آیکن

linkos.jpg

لینک به ارسال

در کل اگه همه ی مواردی که در پست بالا عرض کردم نمیشه و الزاما باید قالب جهت استایل نویسی باشه( چون امکان اشتراک فایل قالب نیست وگرنه براتون میفرستادم)

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

بیزحمت یه نگاه به سایت زیر بیندازید

آیا این مورد کوتاه کننده لینک در انتهای پست که با یک کادر ظاهر میشه با افزونه هست یا کد نویسی هست؟

ایکاش می شد این بخش از اون سایت رو بیرون کشید یا مشابه اون طراحی و الگو برداری کرد

با تشکر فراوان

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

آیا این مورد کوتاه کننده لینک در انتهای پست که با یک کادر ظاهر میشه با افزونه هست یا کد نویسی هست؟ ===> پلاگینی من در این زمینه ندیدم. میتونید خودتون تو مخزن سرچ کنید.

قطعا بصورت شخصی کدنویسی شده.

ایکاش می شد این بخش از اون سایت رو بیرون کشید یا مشابه اون طراحی و الگو برداری کرد ===> میشه طراحی کرد. ولی خب باید سفارش بدید تا براتون کدنویسی کنن.

 

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

 

ممنونم

کدی که حضرتعالی طراحی کردید نمیشه به صورت زیر در آورد؟ در ساده ترین حالت 

linkos.jpg

لینک به ارسال

برای اینکه طول مستطیل مشخص شده رو بیشتر کنم تا کل لینک مشخص بشه باید کدوم کدهای زیر رو ویرایش کرد؟ ممنون میشم راهنمایی بفرمایید و اینکه اگه میشه شما که اینقدر محبت فرمودید و این کار رو به صورت عالی طراحی کردید بررسی فرمایید که میشه اون دکمه آبی رنگ لینک کوتاه مطلب بیاد داخل مستطیل آبی رنگ

Capture2.JPG

و در آخر اینکه برای من اون پیام کپی شد نشون نمیده. میشه طوری ویرایش بفرمایید که این پیام بالای تمامی المانها قرار بگیره ( همون z-index)

با نهایت تشکر و احترام

<style>
				.wbc-shortlink {
					width: 100%;
					margin-top: 15px;
					margin-bottom: 15px;
				}
				button.wbc-copydone {
					padding: 11px;
					border: 1px solid #03A9F4;
					background-color: #03A9F4;
					font-family: inherit !IMPORTANT;
				}
				input#wbc-post-shortlink {
					text-align: left;
					border-color: #03A9F4;
					border-width: 2px;
				}
				.wbc-shortlink table tr td:first-child {
					text-align: left;
				}
				.wbc-shortlink table {
					position: relative;
				}
				p#wbc-success-copy-done {
					position: absolute;
					top: -45px;
					left: 32%;
					background-color: #03A9F4;
					padding: 8px 18px;
					color: #ffffff;
					border-radius: 4px;
					display: none;
				}
				h4.wbc-title-shortlink {
					text-align: right;
				}
			</style>

 

ویرایش شده توسط chem
لینک به ارسال
p#wbc-success-copy-done {
					position: absolute;
					top: -45px;
					z-index: +4;
					left: 32%;
					background-color: #78b500;
					padding: 8px 18px;
					color: #ffffff;
					border-radius: 4px;
					display: none;

برای اینکه اون پیام کپی شد ظاهر بشه از خاصیت z-index استفاده کردم ایا درسته کدش؟

چون هنوز هم نشون نمیده اون پیام 

خیلی لطف و شرمنده می فرمایید اگه این مشکل رو راهنمایی بفرمایید

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

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

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

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

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

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

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

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

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

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