رفتن به مطلب

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


sajad

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

در 2 ساعت قبل، 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 استفاده کردم ایا درسته کدش؟

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

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

تو سورس صفحه پست ها تو سایت شما این المنت رو دارید یا نه؟
 

<p id="wbc-success-copy-done">کپی شد!</p>

 

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

تو سورس صفحه پست ها تو سایت شما این المنت رو دارید یا نه؟
 


<p id="wbc-success-copy-done">کپی شد!</p>

 

بله استاد وجود داره

local.JPG

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

بله استاد وجود داره

local.JPG

اینکه میگید نشون داده نمیشه.

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

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

اینکه میگید نشون داده نمیشه.

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

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

لینک به ارسال
p#wbc-success-copy-done {
					position: absolute;
					top: -45px;
					z-index: 9999 !important;
					left: 32%;
					background-color: #1446e7;
					padding: 8px 18px;
					color: #ffffff;
					border-radius: 4px;
					display: none;
				}

 

لینک به ارسال
در هم اکنون، chem گفته است :

نه به همون صورت گذاشتم نشون نمیده نمیدونم چرا!

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

جدیدا تغییراتی توی سایتتون اعمال کردید؟

لینک به ارسال
در هم اکنون، 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">
						
				<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;
	}

 

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

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

نه اصلا نه روی لوکال و نه رو سایت تغییری ایجاد نکردم استاد

 

من استاد نیستم لطفا نگین :)

من کدها رو سعی میکنم یه بار دیگه review کنم. ولی خب یه مقدار تایمم محدود هست. و ممکنه زمان ببره.

لینک به ارسال
در 5 دقیقه قبل، 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">
						
				<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;
	}

 

دقیقا بگید چه بخشی از کد رو تغییر دادید تا چک کنم.

 

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

من استاد نیستم لطفا نگین :)

من کدها رو سعی میکنم یه بار دیگه review کنم. ولی خب یه مقدار تایمم محدود هست. و ممکنه زمان ببره.

صمیمانه سپاسگزارم واقعا محبت می کنید.

برای من استاد هستید چون از شما درس می آموزم.

لینک به ارسال

کد  به صورت زیر است

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: 5px;
					border: 1px solid #110cea;
					background-color: #110cea;
					font-family: inherit !IMPORTANT;
				}
				input#wbc-post-shortlink {
					text-align: left;
					border-color: #110cea;
					border-width: 2px;
					width: 220px;
    
				}
				.wbc-shortlink table tr td:first-child {
					text-align: left;
				}
				.wbc-shortlink table {
					position: relative;
				}
				p#wbc-success-copy-done {
					position: absolute;
					top: -45px;
					z-index: 9999 !important;
					left: 32%;
					background-color: #110cea;
					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
لینک به ارسال

@chem

شما تو این کد آخری که دادید تگ table رو پاک کردید و فقط از tr ها استفاده کردید این استاندارد نیست.

چرا دلیل خاصی داشته ؟

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

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

@chem

شما تو این کد آخری که دادید تگ table رو پاک کردید و فقط از tr ها استفاده کردید این استاندارد نیست.

چرا دلیل خاصی داشته ؟

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

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

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

خبرتون میدم

236.JPG

لینک به ارسال

@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;
					z-index: 9999 !important;
					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
});

endd.JPG

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

@chem

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

با دقت بیشتری جایگزینی و تست رو انجام بدید.

@sajad

الان این کد با آخرین کد شما چه فرقی داره استاد؟ 

با دقت بالای 50 بار تست کردم ولی متاسفانه همش همون طور میشه!!

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;
					z-index: 9999 !important;
					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 گفته است :

@sajad

الان این کد با آخرین کد شما چه فرقی داره استاد؟ 

با دقت بالای 50 بار تست کردم ولی متاسفانه همش همون طور میشه!!


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;
					z-index: 9999 !important;
					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
});

 

@sajad

سلام استاد

این کد نهایی که خودتون محبت فرمودید و من میزارم در فانگشن بررسی فرمودید؟ خودم که با notpad مقایسه می کنم تفاوتی نداره

با تشکر

لینک به ارسال

@chem

بررسی شد.

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

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

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

@chem

بررسی شد.

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

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

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

در کد اخری که تگ table وجود داره میشه طوری ویرایش کرد که ساختار نهایی و خروجی به صورت زیر بشه؟ یعنی بدون حذف تگ مربوطه 

236.JPG

لینک به ارسال
در در 10/5/2018 at 19:03، sajad گفته است :

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

 

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

با سلام و ادب

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

یعنی این کلاس رو چطور تنظیم کنم

button.wbc-copydone {
   
    position: .....;
}

و همین طور این

input#wbc-post-shortlink {

 

خودم به صورت سعی و خطا  این بخش از کد بالا به صورت زیر تغییر دادم و حالاد تقریبا همون چیزی که می خواستم شد

آیا درسته؟ استاندارد هست از نظر کد نویسی؟

input#wbc-post-shortlink {
					text-align: left;
					margin-right: 200px;
					border-color: #061be6;
					border-width: 2px;
					width: 220px;

 

ویرایش شده توسط chem
لینک به ارسال
  • 3 ماه بعد...

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

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

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

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

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

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

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

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

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