آموزش ساخت صفحه انتقال دهنده لینک ها در وردپرس و ASP.NET

دسته بندی: وردپرس
زمان مطالعه: 6 دقیقه
۱۸ مرداد ۱۳۹۲

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

طراحی صفحه

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

<?php
/*Template Name:Transfer Links*/

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

p19-select-page-name

اگه اون فایل php توی قالب وردپرس رو درست ایجاد کرده باشید می بینید که اون مقداری که جلوی Template name نوشتیم به گزینه های قسمت قالب برای برگه جدید اضافه شده،پس باید همین قالب رو انتخاب کنید.

p19-select-page-template

خوب حالا میریم سراغ کد نویسی لازم برای این کار،کد های لازم رو توی همون فایلی که توی قالب وردپرس ساختین می نویسیم.

قسمت HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Transfer Links</title>
</head>
<body>
<div id="wrapper">

<div id="info">
<p>آدرس درخوستی : </p>
<p></p>
</div>
<iframe id="main" src="" frameborder="0">
</iframe>
</div>
</body>
</html>

همه کد های HTML که لازم داریم همینه،بعضی جاهاش خالیه که اونو بعدا توضیح میدم،همه عناصر رو گذاشتیم توی یه wrapper،بعدشم برای نمایش اطلاعات یه تگ div ایجاد کردیم با آیدی info توی این قسمت هم دو تا تگ p گذاشتیم (حالا میتونید تگ span هم بذارید)،قراره تو p دومی آدرس درخواستی به نمایش در بیاد،بعدشم برای نمایش صفحه مورد نظر از یه تگ iframe استفاده کردیم که src اون هنوز خالیه چون بعدا باید با کد اونو مقدار دهی کنیم.

استایل دهی CSS

*{
margin:0;
padding:0;
}
#wrapper{
margin:0;
height:100%;
width:100%;
}
#info
{
width:100%;
height:40px;
text-align:center;
background-color:#9C0;
direction:rtl;
padding: 5px 0;
font-weight:bold;
}
#info p{
font-family:tahoma;
font-size:13px;
display:inline-block;
padding-top: 10px;
}
#main{
width:100%;
height:100%;
border:0;
border-collapse:collapse;
}

انتخاب این استایل سلیقه ای و شما  طبق سلیقه خودتون تغییرش بدید،فقط توضیح بدم که آیدی main واسه همون تگ iframe هست که ما طول و عرضو 100درصد گذاشتیم که صفحه کامل پر بشه،البته بعد از اون نوار بالایی که درست کرده بودیم قرار میگیره و فضا رو پر میکنه.

کد های PHP

/*Template Name:Transfer Links*/
if(isset($_GET['url']))
{

$request_url=$_GET['url'];
if(Validate_Url($request_url))
{
$url_info=$request_url;

if(strpos($request_url,"http://")===false)
{
$request_url='http://'.$request_url;
}
$url=$request_url;
}
else {
$url_info='آدرس مورد نظر معتبر نمی باشد';
}

}
else {
$url_info='آدرس مورد نظر یافت نشد';
}

function Validate_Url($url)
{
return preg_match('%^((https?://)|(www\.))([a-z0-9-].?)+(:[0-9]+)?(/.*)?$%i',$url);
}

خوب بچه ها اینم کد کامل PHP که لازم داشتیم،خوب از اول توضیح بدم،ما آدرس مورد نظر رو از طریق کوئری استرینگ ارسال شده به این صفحه دریافت می کنیم (متد GET) خوب تو خط اول من چک میکنم ببینم این مقدار ست شده یا نه (من دلخواه اسمشو گذاشتم url) خوب اگه ست نشده باشه، متغییر url_info با مقدار آدرس مورد نظر یافت نشد مقدار دهی میشه (url_info دقیقا توی همون تگ p دوم قرار میگیره و مقدا خودشو چاپ میکنه )،خوب حالا اگه آدرس ست شده باشه ما اونو توی متغییر request_url قرار میدیم،بعدش با یه شرط مقدار این آدرس رو اعتبار سنجی می کنیم (با تابع Validate_url و با استفاده از دستور preg_match خواستیم ببینیم این آدرسی که وارد کرده شبیه آدرس اینترنتی هست یانه )اگه تایید شد میره مرحله بعدی اگه تایید نشد url_info مقدار آدرس مورد نظر معتبر نمی باشد به خودش میگیره،اون regexp که ما توی تابع اعتبار سنجی به کار بردیم هم آدرس هایی که با http:// شروع میشه و هم آردس هایی که با www شروع میشه رو تایید میکنه،اما نکته اینجاست که ما نمی تونیم آدرس با شروع www رو بفرستیم برا src تگ iframe پس یه شرط گذاشتیم که اگه صفحه درخواستی با www شروع شده بود (با strpos چک کردیم)خودمون یه http:// به اولش اضافه کنیم،خوب بعد این هم مقدار request_url رو گذاشتیم توی url.

حالا توی قسمت HTML متغییر های لازم رو قرار میدیم.

<div id="wrapper">

<div id="info">
<p>آدرس درخوستی : </p>
<p><?php echo isset($url_info)?$url_info:$url?></p>
</div>
<iframe id="main" src="<?php if(isset($url)){ echo $url;} ?>" frameborder="0">
</iframe>
</div>

توی تگ p دوم گفتیم که اگه url_info ست شده اونو نمایش بده و گرنه مقدار url رو نشون بده،چرا؟خوب url_info وقتی ست شده که حتما یا آدرس خالیه یا حتما معتبر نیست،و اگه url_info ست نشده باشه این یعنی آردس درست بوده پس ما آدرس درست رو نشون میدیم(از شرط یه خطی استفاده کردیم).

توی خاصیت src تگ iframe هم ما گفتیم اگه url  ست شده اونو چاپ کن.

مقدار url و هم چنین اسم و نامک صفحه رو خودتون می تونید به دلخواه تغییر بدید.

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

/%postname%

خوب حالا توی سات وردپرس خودتون می تونید این آدرس رو تست کنید .

http://www.your-domain.ir/Transfer?url=https://7learn.com

دانلود فایل اسکریپت PHP

توی صفحه بعد دستورات لازم رو برای ASP.NET می نویسیم.

خوب دوستان برای ASP.NET ما یه صفحه aspx ایجاد میکنیم،من اینجا صفحه Transfer.aspx رو ایجاد کردم،قسمت HTML و CSS دقیقا شبیه همون قسمت وردپرس هست،فقط یادتون باشه کد های HTML رو توی قسمت form اصلی صفحه بذارید.

<body>
<form id="form1" runat="server">
<div class="wrapper">
<div class="bar">
<span>آدرس در خواستی: </span>
<span></span>
</div>
<iframe id="show" src=""></iframe>
</div>
</form>
</body>

کد های C#

خوب اینم از کد های کامل قسمت Code Behind ما.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text.RegularExpressions;

public partial class Transfer : System.Web.UI.Page
{
protected string url = "";
protected string url_info = "";
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["url"] != null)
{
string request_url = Request.QueryString["url"].ToString();

if (Regex.IsMatch(request_url, @"^([a-zA-Z0-9]+(\.[a-zA-Z0-9]+)+.*)$")
|| Regex.IsMatch(request_url,@"(http(s)?://)?([\w-]+\.)+[\w-]+[.com]+(/[/?%&=]*)?"))
{

if (request_url.Substring(0,7)!="http://")
{
request_url = "http://" + request_url;
}

url =url_info= request_url;

}
else
{
url_info = "آدرس درخواستی شما نامعتبر است";
}

DataBind();

}
else
{
url_info = "آدرس درخواستی شما نامعتبر میباشد";
}
}
}

اولش ما فضای نام RegularExpressions رو به فایل اضافه کردیم تا از کلاس های اون (کلاس Regex) بهره ببریم.

خوب اولش توی متد Page_load، مثل کد قبلی چک کردیم که مقدار کوئری استرینگی که گرفتیم null هست یا نه،اگه ست شده باشه اونو میریزیم توی request_url خوب حالا با استفاده از متد IsMatch توی کلاس Regex چک میکنیم این مقداری که گرفتیم آدرس اینترنتی هست یا نه،من خیلی گشتم اما نتونستم regexp رو پیدا کنم که هم http:// و هم www رو تایید کنه،به خاطر همین دوتا عبارت regexp نوشتم که یکی شون www و یکی شون http:// رو تایید میکنه،پس آدرس ما هر کدووم از اینا باشه تایید میشه :).

خوب حالا بعدش با متد substring که از طریق متغییر های string قابل دسترسیه چک کردیم که آدرس با //:http شروع شده یا نه،که اگه شروع نشده باشه ما خودمون بهش اضافه میکنیم،بعدشم فقط متغییر هارو جاگذاری کردیم،فقط یه نکته ای که مونده اینه که ما بعدش از ()DataBind استفاده کردیم،این برای اینه که ما بتونیم از متغییر هایی که اون بالا به صورت protected تعریف کردیم توی قسمت HTML صفحه هم استفاده کنیم.

خوب حالا قسمت HTML رو با متغییر ها مینویسیم.

</p>
<body>
<form id="form1" runat="server">
<div class="wrapper">
<div class="bar">
<span>آدرس در خواستی: </span>
<span><%#url_info %></span>
</div>
<iframe id="show" src="<%#url %>"></iframe>
</div>
</form>
</body>
<p style="text-align: right;">

علامت # که توی کد های asp استفاده کردیم،برای مواقعی که میخوایم داده های کنترلی های DataBound رو اینجا  استفاده کنیم به کار میبریم،پس به خاطر همین ما آخر صفحه ()Databind انجام دادیم.

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

http://www.your-domain.ir/transfer.aspx?url=https://7learn.com

 

دانلود فایل های ASP.NET

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

نویسنده
یادگیرنده ی همیشگی،برنامه نویس،نویسنده،عاشق خلق چیزهای عجیب،عاشق تحلیل داده ها، مسئول بخش فنی و هم بنیان گذار در سون لرن.

نظرات کاربران

اکبر قره باغی

ممنون

noro

با سلام

توی ورژن جدید وردپرس این ادرس اینطوری ثبت میشه

http://www.your-domain.ir/Transfer

بعد اینم وجود نداره

https://7learn.com/wp-content/uploads/2013/08/p19-select-page-template.png

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

amir

میتونید از این کدهم استفاده کنید

سایت دانلودهای

😉
ممنون از مطالب مفید سایتتون.

Pakdaman

مطلب آموزشی با ارزشی بود
خدا قوت
موضوع کاملا واسم جا افتاده فقط چندتا سوال داشتم
۱ – میخوام تمام لینکای خروجی سایت رو به صورت اتومات به این صورت در بیارم ، در بعضی سایتای کوتاه کننده لینک یه کد جاوا میدند که تو هدر قالب میزاریم و تمام لینک ها رو تبدیل میکنه
۲ – اینکه با ورد به صفحه لینک شده چطور میشه تمام لینک های موجود در صفحه مقصد را هم بصورت لینک از سایت مبدا در آورد
یعنی با ورود به لینک

http://www.your-domain.ir/Transfer?url=https://7learn.com

تمام لینک های سایت

www.7learn.com

به

http://www.your-domain.ir/Transfer?url=https://7learn.com/Bi Nahayat 

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

۳ – آیا این کار تاثیری در افزایش رتبه سایت داره ؟
۴ – تمام لینکای خروجی به این طریق را چطور بیاد نافالو کرد؟ اصلا چنین کاری لزوم داره؟

کیوان علی محمدی

سلام،وردپرس این امکان رو میده که با استفاده از فیلتر ها محتوای خروجی رو به صورت دلخواه نشون بدید،میتونید تمام لینک های خروجی رو با استفاده از همین فیلتر ها به لینک دلخواه تبدیل کنید،برای کاری که شما میخواین باید کمی کد نویسی اضافه کرد که در بحث این آموزش نبوده و کمی تخصصی تر میشه.از لحاظ تاثیر سئو مطمئن نیستم و این امر هم بعید به نظر میرسه،می تونید با استفاده از همون فلیتر ها لینک های محتوای خروجی در وردپرس (مطلب،صفحات،نظرات) رو به nofollow تبدیل کرد.

Pakdaman

ببخشید سلام یادم رفت 😳

Pakdaman

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

&lt;script src=&quot;http://www.your-site.ir/autolink.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

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

راستی فکر کنم تو استایل CSS نویسی یه چیزی رو فراموش کرده باشید ❗
برای کل صفحه ساخته شده یادتون رفته که طول و عرض تعریف کنید

*{
 width:100%;
 height:100%;
 margin:0;
 padding:0;
 }   
Blacky

حرفمو پس میگیرم یادم رفته بود برگه رو انتشار بدم
ولی وقتی اینکار کردم منتقل کننده سایت خودمو ناقص زیر آیفریم لود کرد مشکل گذاشتن کد در جای مناسبه
الان ذهنم درگیره بعدا روش کار میکنم ولی روشی که گفتم داره کار میکنه صحیح و سالم 😆 🙄

Blacky

و اینکه بگو

یه نکته دیگه هم اینکه من تنظیمات قسمت پیوند های یکتا توی وردپرسم رو به این صورت تنظیم کردم.
1 /%postname%

از ضروریاته باید این شکلی باشه
اینو ببین این کامنتو خاستم بفرستم سایتت ارور داد چندین بار
http://upload7.ir/images/57695169570302133869.jpg

Blacky

سلام به دوست و برادر عزیزم کیوان
فکر میکنم یه اشتباه پیش اومده و اینکه در این آموزش بر فرض اینکه کاملا درسته باشه نگفتین کدارو کجا بذارین و بر فرض اینک من درست گفته باشم باید فایل Transfer.php رو در روت وبلاگ آپلود کرده سپس آدرس انتهای صفحه ی اول آموزش باید به صورت زیر تغییر کنه و فکر میکنم شما اشتباه نوشتین

http://weblog.amsec.ir/Transfer.php?url=https://7learn.com

البته الان که نگاه میکنم من اشتباه میکنم ولی چرا اینحوری برام کار میکنه؟

http://weblog.amsec.ir/Transfer.php?url=https://7learn.com

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

پســـــرونه

سلام
روی لوکال به خوبی تست شد
ولی
نمیشه یه استایل جالبتر براش طراحی کنید؟ یا اگه سراغ دارید معرفی کنید . چیزی شبیه لینک زیر
http://www.afsaran.ir/site/click/369229?url=http%3A%2F%2Fwww.aviny.com%2FVoice%2FDefae_moghadas%2Fmadahi_defamoghadas.aspx

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

راستی نمیشه کاری کنید که اون کادر نمایش انتقال دهنده لینک ،گزینه ضربدر برای بستن هم داشته باشه که با زدنش بره توی لینک مستقیمش.

ممنون
یاعلی

کیوان علی محمدی

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

محمد

زرنگی؟میگی بیاین تو این صفحه هم روش ASP رو میگم و هم PHP بعد پایینش نوشتی ASP رو بعدا میگم
اینجوری طرف دارات کم میشه ها!!!

لقمان آوند

دوست عزیز . پیاده سازی ASP در صفحه ی دوم همین مطلب آورده شده . یکم بیشتر دقت کنید ! این مطلب دو صفحه است . ادامشو بخونید !

غزاله

سلام فایل سایتم
http://up.persianscript.ir/uploads/137623374095741.psd
سوال دیگه ایی هم داشتم من میخوام بانک اطلاعاتی برای سایتم بسازم چون سایت من فروشگاه آنلاین هست میخوام دکمه ایی بزارم برای افزودن محصول جدید که بتونم محصول رو به سبد خرید اضافه کنم یا حذف کنم sql رو باید فقط برای محصولاتم بسازم؟بعد بانک اطلاعاتی رو چجوری ه html ربط بدم؟تنها راه ساختن افزودن محصول یا حذف محصول یا سرچ محصول آیا فقط با بانک اطلاعاتی امکان داره>یا راهی هست که بدون بانک اطلاعاتی این کار رو انجام بدم من کدهاشون رو توی html نوشتم ولی اضافه یا حذف نمیشه محصولم فقط نمایش داده میشه

کیوان علی محمدی

این فایلی هم که گذاشتین فقط یه فایل psd فتوشاپ بود که فکر کنم مربوط میشه به قسمت طراحی قالب،من گفتم کدهایی که نوشتین رو قرار بدین نه فایل گرافیک رو.

کیوان علی محمدی

برای محصولات حتما باید جدول بانک اطلاعاتی داشته باشین،مثلا جدول products،کل مشخصات محصولات هم توی این جدول ذخیره میشه،برای افزدون محصول به سبد خرید بهترین راه استفاده از سشن هست،برای قرار دان مقادیری که از بانک دریافت میشه توی html، باید توسط دستورات php کوئری های sql رو پردازش کنید و اونوقت می تونید به راحتی اونو توی تگ ها قرار بدید،بهترین و منطقی ترین راه استفاده از بانک اطلاعاته و مثلا استفاده از فایل ها دردسر های خاص خودشو داره و کارایی و امنیت سیستم میاد پایین،برای حذف کردن و اضافه کردن هم باید کوئری های sql رو توسط php پردازش کنید تا نتیجه توی بانک اطلاعات ثبت بشه.

غزاله

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

کیوان علی محمدی

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

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل