مدیر سایت
انتقال و بارگذاری وردپرس از کامپیوتر به سرور وب سایت
طراحی سایت با وردپرس بر روی کامپیوتر سرعت پیاده سازی سایت را افزایش می دهد. زمانی که کار طراحی سایت وردپرس شما به اتمام رسید می بایست وب سایت را بر روی سرور خود بارگذاری نمایید. در این مقاله به شما آموزش خواهم داد که چگونه تمامی سایت وردپرس خود را به هاست خود انتتقال دهید. قبل از آنکه بحث را ادامه دهم در جزیان باشید شما می توانید سایت وردپرس خود را از روی کامپیوتر خود به سرور توسط دو پلاگین BackupBuddy یا Duplicator به راحتی انجام دهید، اما موردی که من در این مقاله آموزش می دهم بارگذاری به صورت دستی می باشد.
مرحله اول: از دیتابیس کامپیوتر خود بک آپ بگیرید
اولین کاری که لازم است انجام دهید آن است که از دیتابیس وب سایت وردپرس موجود بر روی کامپیوتر خود فایل پشتیبان تهیه نمایید. این کار را می توانید توسط phpmyadmin سرور کامپیوتر خود که معمولا در این آدرس http://localhost/phpmyadmin/ قرار دارد انجام دهید.
مرحله دوم: می بایست فایل های وردپرس وب سایت را به سرور خود منتقل نمایید
توسط نرم افزارهای FTP نظیر livezilla فایل های خود را به سرور اصلی به فلدر public_html منتقل نمایید.
مرحله سوم: دیتابیس را بر روی سرور ایجاد نمایید
در پنل هاست خود دیتابیس لازم را ایجاد نمایید.
و سپس برای دیتابیس خود نام کاربری و رمز عبور در نظر بگیرید.
مرحله چهار: دیتابیس وردپرس را به سایت منتقل نمایید
توسط phpmyadmin سرور خود فایل دیتابیس را به سرور خود منتقل نمایید.
مرحله پنج: تغییر آدرس سایت
به دیتابیس سایت خود از طریق phpmyadmin مراجعه نموده و جدول wp_options را بیابید و فیلد options_name که برابر با siteurl است را پیدا نموده و options_value آن را با آدرس سایت خود تغییر دهید. به عنوان مثال http://localhost/joomir تبدیل به http://sitedesign.joomir.com
مرحله شش: ست نمودن سایت
پس از انجام مراحل بالا کافی است فایل wp-config.php را بر روی سرور خود باز نموده و اطلاعات دیتابیس خود نظیر نام دیتابیس، نام کاربری و رمز را در آن ست نمایید. به پنل سایت وردپرس خود مراجعه نموده به بخش Settings » General مراجعه نمودن و بر روی ثبت تنظیمات کلیک نمایید تا مطمئن شوید تمامی اطلاعات به درستی ست شده اند.
مرحله هفت: لینک های قبلی و تصاویری که باز نمی شوند را رفع عیب نمایید
در این مرحله توسط کد sql زیر می بایست تمامی آدرس دهی های اشتباه قبلی را جایگزین نمایید:
تفاوت میان html ، xhtml و xml
در ژانویه 2000 ، W3C اعلام نمود که html 4 به xhtml 1 تغییر پیدا نموده است و xhtml کد html 4 می باشد که به صورت xml نوشته شده باشد.
xhtml از دو بخش اصلی تشکیل شده
* html 4
html 4 زبان برنامه نویسی می باشد برای نمایش متن و مطالب در پلتفرم های مختلف. در این زبان قابلیت های بسیاری برای نمایش مطالب، تصویر و فایل های مولتی مدیل وجود دارد.
* xml
یک زبان برنامه نویسی مارک آپ قابل گسترش می باشد که سادگی و و قدرت html را دارد و پیچیدگی خاصی چندانی ندارد.
XHTML انعطاف پذیری HTML و قابل گسترش دادن XML را با هم دارد. اما این به چه معناست.
برخی از تگ های html وجود دارند که در برخی از مرورگرها کار می کنند و در برخی دیگر خیر. برخی از آن ها جزو تگ های DTD هستند و برخی دیگر خیر. اما نتیجه آن این است که صفحه سایت شما در تمامی مرورگرها به یک شکل نمایش داده نمی شود. تنها راهی که به عنوان کد نویس html دارید آن است که از آن تگ ها استفاده ننمایید و یا در سایت خود عنوان نمایید که این سایت در چه مرورگرهای نمایش بهتری دارد و همچنین اینکه صفحات مختلف برای مرورگرهای مختلف ایجاد نمایید.
با استفاده از XHTML به انجام این کارها احتیاجی نیست. توسط XHTML ، در صورتی که احتیاجی برای ایجاد تگ جدید بود، می توانید آن را در ماژول XHTML ایجاد نمایید و آن را در صفحه وب سایت خود استفاده نمایید. شما همچنین می توانید توسط XHTML حالت نمایش صفحه را در مرورگری که آن را لود می نماید معین نمایید.
بهترین 5 روش جهت بررسی وب سایت در تمامی مرورگرها
موردی که برای اکثر طراحان وب پس از طراحی وب سایت مهم است آن است که سایت را در تمامی مرورگرها بررسی نماید, در زیر به شما 5 روز برای بررسی وب سایت در مرورگرهای مختلف ارائه داده خواهد شد. برخی از این موارد وب سایت هستند و کافی است آدرس سایت مورد نظر خود را در آنها وارد نمایید و برخی نیز نرم افزار هستند و می بایست بر روی کامپیوتر خود نصب نمایید.
Adobe Browserlab
Litmusapp (paid service)
VMware Fusion
لطفا به خاطر داشته باشید که برنامه های بسیاری به مانند این برنامه وجود دارند که با استفاده از آنها می توانید سایت خود را بررسی نمایید ولی از نظر بنده VMWare Fusion از همه مناسب تر است.
IE Tester
سایتی نیز با عنوان http://www.browserstack.com/ نیز برای بررسی سایت در مرورگرهای مختلف وجود دارد که نیاز به عضویت در سایت دارد.
تبدیل هر وب سایت به سایت موبایل توسط phpMobilizer
phpMobilizer به صاحبان وب سایت قابلیت اضافه نمودن پشتیبانی سایت از موبایل را میدهد.
phpMobilizer چیست؟
به صورت اتوماتیک هر وب سایتی را به وب سایت موبایل تبدیل می نماید. phpMobilizer به مانند سایر مبدلهای سایت به نسخه موبایلی کار می کند به جز آنکه این برنامه بر روی سرور شما
اجرا می شود.
هدف این پروژه جهانی ساختن آن می باشد. فقط کافی است این برنامه را بر روی یک ساب دامنه از سرور خود بارگذاری نمایید و سپس کد مربوط به انتقال مرورگرهای موبایل را به سایت موبایلی در برنامه اصلی قرار دهید.
قابلیت ها
- به آسانی نصب می شود، فقط کافی است فایل ها را بر روی ساب دامنه از سایت خود بارگذاری نمایید
- هر وب سایتی را به نسخه موبایل تبدیل می نماید.
- تصاویر را برای نمایش در نسخه موبایل تغییر سایز می دهد. فقط سایز آنها را تغییر نمی دهد، بلکه حجم آن ها را برای نمایش در موبایل کاهش می دهد
- انتقال خودکار به نسخه موبایل سایت. البته می بایست کد به سایت اصلی اضافه گردد
نیازمندی ها
- PHP 5
- Apache (.htaccess/mod_rewrite capable)
برای دانلود به آدرس زیر مراجعه نمایید:
14 مرجع محبوب طراحی وب سایت
این مرجع ها برای طراحان وب سایت می باشد و در مورد Photoshop، css، html، جاوا اسکریپت و فلش می باشد. این صفحات به عنوان صفحات مرجع در طراحی سایت می باشند و طراحان با استفاده از این مرجع ها می توانند کار خود را در طراحی آسان نمایند.
در این بخش 14 مورد از محبوب ترین های آن ها را برای شما آورده ام
Photoshop
Adobe Photoshop CS4 Keyboard Shortcuts
Adobe Photoshop CS3 Keyboard Shortcuts
Photoshop Lasso Tool Cheatsheet
Adobe Pen Tool Cheatsheet
CSS
CSS Cheat Sheet (V2)
Mac OS X CSS Cheat Sheet
CSS CHEAT SHEET
XHTML
(X)HTML Elements and Attributes
HTML/XHTML in one page
JavaScript Frameworks
jQuery 1.3 Cheat Sheet
mootools 1.2 cheat sheet
Prototype 1.6.0.2 Cheat Sheet
Flash
Adobe Flash CS4 OS X Keyboard Shortcuts
Flash CS3 Cheat Sheet
اجرا کردن ویدئو توسط html5 در وب سایت
قرار دادن ویدئو در صفحه توسط html5 بسیار آسان است و از قرار دادن تصویر در صفحه سخت تر نیست. در این مقاله مزایای استفاده از ابزار اجرا کننده داخلی ویدئو مرورگر بحث خواهد شد. به راحتی می توانیم با استفاده از تگ <video> و بدون استفاده از هیچ پلاگین خارجی ویدئو را اجرا نماییم.
پیش نیازها
می بایست از Chrome, Safari یا Internet Explorer 9+ استفاده نمایید. در مرورگرهای Firefox و Opera این کد به دلیل تداخل با ابزارهای داخلی مرورگر کار نمی کند. برای انجام این کار می بایست فرمت ویدئو شما .mp4 باشد.
ایجاد فریم ورک اصلی
کد زیر برای ایجاد فریم ورک ویدئو پلیر می باشد. این کد یک لایه بندی ساده برای ویدئو می سازد. کد html چیزی است شبیه به این:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Video Player</title>
<style>
body { font-family: sans-serif; border: 0; margin: 0; padding: 0; }
header { text-align: center; }
#player { display: table; width: 100%; padding: 4px; }
#player > div { display: table-cell; vertical-align: top; }
</style>
</head>
<body>
<header>
<h1>HTML5 Video Player</h1>
</header>
<section id="player">
<div> <!-- The video will appear here-->
</div>
</section>
</body>
</html>
هم اکنون کادر ویدئو ایجاد گردید می بایست ویدئو به صفحه اضافه شود.
استفاده از تگ video برای اضافه نمودن ویدئو به صفحه
کد اضافه نمودن ویدئو به صفحه وب سایت کمی پیچیده تر از اضافه کردن تصویر به وب سایت می باشد برای اضافه کردن ویدئو به صفحه سایت می بایست از تگ <video> استفاده نمایید.
<video src="[ YOUR VIDEO ].mp4" controls width="720" height="480"> Your browser does not support the video element, please #D try <a href="videos/VID_20120122_133036.mp4">downloading the video instead</a> </video>
در بخش src می بایست آدرس فایل ویدئو داده شود. بخش controls اعلام می نماید که شما می خواهید ویدئو ابزارهای استاندارد کنترل ویدئو را داشته باشد. width و height نیز طول و عرض ویدئو در صفحه می باشند و در صورتی که مرورگر از المان <video> پشتیبانی ننماید متن داخل المان <video> نمایش داده می شود.
نتیجه
به طوری که می بیند وب در حال تغییر است و به طوری که می بینید قبلا برای نمایش ویدئو در سایت مجبور بودید از پلاگین های مختلف برای انجام این کار استفاده نمایید. ولی هم اکنون این کار توسط خود مرورگر انجام می شود. html5 به شما این قابلیت را می دهد که به آسانی ویدئو خود را در صفحه و توسط خود مرورگر نمایش دهید. البته در طراحی سایت خود در نظر داشته باشد که این کد فقط برای مرورگرهای مدرن سازگاری کامل دارد. برای آنکه ویدئو شما در تمامی مرورگرها اجرا شود می بایست از پلاگین ها به مانند فلش ویدئو پلیر استفاده نمایید.
پلتفرم جدید ساخت وبلاگ بدون نیاز به دیتابیس
در صورتی که به دنبال سیستم مدیریت محتوا برای ساخت وب سایت خود می گردید که نیاز به ساخت دیتابیس نداشته باشید نرم افزار Ghost بهترین نرم افزار برای شما است که به زبان جاوا اسکریپت نوشته شده و بنابراین نیازی به راه اندازی سایت بر روی سرور ندارید.
از زبان خالق:
در حدود یک سال پیش، در نظر داشتم یک بلاگ وردپرس راه اندازی نمایم. به عنوان شخصی که چندین سال بر روی وردپرس تجربه داشته ام، مورد جدیدی برای من نبود. وردپرس در این سال ها رشد بسیاری نموده است، و امروزه از آن به عنوان یک سیستم مدیریت محتوای کامل یاد می شود تا پلتفرم ساخت وبلاگ. سیستم ایجاد وبلاگی که تمرکز آن بر ارسال ها بود و بسیار ساده تر از وردپرس بود را در نظر گرفتم. در نوامبر 2012 مطلبی با عنوان ابزار جدید ایجاد بلاگ ghost منتشر نمودن و مخاطبان بسیاری پیدا نمود که نظرات مثبتی بر روی آن داشتند. در آپریل 2013 تصمیم گرفتم نسخه پروتایپ آن را جهت استفاده در معرض عموم قرار دهم و آن جواب داد. بعد از 5 ماه کار بر روی ghost هم اکنون توسط کاربران آن در حال استفاده می باشد. تفاوت اصلی که ghost با سایر سیستم های ساخت وبلاگ دارد آن است که این نرم افزار تنها با جاوا اسکریپت پیاده سازی شده. با توجه به این مورد شما می توانید محدودیت های وب را نداشته باشید. به عنوان مثال یک وب سایت کامل را می توانید بر روی کول دیسک خود داشته باشید، موردی که قبلا قادر به انجام آن نبودیم. تمرکز اصلی Ghost بر روی ارسال و انتشار مطالب است. همه چیز در این نرم افزار برای ایجاد ساده مطالب در وبلاگ ، سایت خبری و روزنامه بهینه سازی شده.
در صورتی که می خواهید بیشتر در مورد این نرم افزار بدانید به سایت رسمی Ghost مراجعه نمایید.
ساخت منو وب سایت سازگار با موبایل توسط css
امروز سازگاری وب سایت طراحی شده با مرورگرهای موبایل بسیار مهم می باشد بنابراین تمامی طراحان سعی در سازگار سازی سایت با مرورگرهای موبایل دارند. در این مقاله به شما نحوه ایجاد منو سازگار با موبایل توسط html و css و بدون استفاده از جاوا اسکریپت آموزش داده خواهد شد. این منو قابلیت چپ چین، راست چین و وسط چین سدن را دارد. این منو با موسط اور بر روی منو باز می شود. همچنین این منو شامل مشخص کننده منو فعال می باشد. این منو در مرورگرهای موبایل و کامپیوتر سازگاری کامل دارد.
هدف
هدف این مقاله چگونگی تبدیل یک لیست منو به منو آبشاری می باشد که به فضای بسیار کنتری برای نمایش نیازمند است.
شما می توانید تمامی منوهای خود را در یک کلید قرار دهید و بدین وسیله در فضای صفحه خود صرفه جویی نمایید.
Nav HTML Markup
در بخش کد html منو توضیح داده خواهد شد. تگ <nav> برای ایجاد منو آبشاری مورد نیاز می باشد. این را در ادامه مقاله توضیح خواهم داد. کلاس current منوی فعلی که در آن هستیم را نمایش می دهد.
<ul>
<li class="current"><a href="#">Portfolio</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Print Media</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>
CSS
کد ایجاد منوی آبشاری بسیار ساده می باشد بنابراین توضیح خاصی برای آن ندارم. فقط دقت نمایید از display:inline-block به جای float:left در تگ <li> استفاده شده. بنابراین با text-align به UL می توانید منوهای خود را راست چین، چپ چین و یا وسط چین نمایید.
.nav { position: relative; margin: 20px 0; }
.nav ul { margin: 0; padding: 0; }
.nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; }
.nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; }
.nav a:hover { color: #000; }
.nav .current a { background: #999; color: #fff; border-radius: 5px; }
وسط چین و یا راست چین
به طوری که در بخش قبل توضیح داده می شود می توانید جهت منوهای خود را عوض نمایید:
.nav.right ul { text-align: right; }
/* center nav */
.nav.center ul { text-align: center; }
پشتیبانی از اینترنت اکسپلورر
تگ html5 که در این کد استفاده شده یعنی <nav> در اینترنت اکسپلورر نسخه 8 با پایین پشتیبانی نمی شود. برای پشتیبانی css3-mediaqueries.js (یا respond.js) و html5shim.js استفاده نمایید. در صورتی که نمی خواهید از این کتابخانه ها استفاده نماید می توانید <nav> را با <div> جایگزین نمایید.
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Responsive
هم اکنون که می بایست این منوی ایجاد شده را با استفاده از media query سازگار با نسخه موبایل نمایید. در رزولوشن کمتر از 600px از تگ nav استفاده شده بنابراین می توان تگ <ul> را به بالای صفحه انتقال داد. تمامی <li> توسط display:none مخفی شده اند. اما .current به صورت بلاک نمایش داده می شود. اما در هاور nav کلیه <li> ها به حالت display:block خواهد بود. آیکون به .current اضافه شده تا منوی فعال مشخص گردد.
{ .nav { position: relative; min-height: 40px; }
.nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.nav li { display: none; /* hide all <li> items */ margin: 0; }
.nav .current { display: block;
/* show only current <li> item */
}
.nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; }
.nav .current a { background: none; color: #666; }
/* on nav hover */
.nav ul:hover { background-image: none; }
.nav ul:hover li { display: block; margin: 0 0 5px; }
.nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; }
/* right nav */
.nav.right ul { left: auto; right: 0; }
/* center nav */
.nav.center ul { left: 50%; margin-left: -90px; } }
طراحی قالب وب سایت سازگار موبایل (ریسپانسیو)
طراحی قالب وب سایت سازگار با موبایل کار ساده ای نیست و نیاز به تجربه فراوانی دارد. در صورتی که تجربه ای در ساخت سایت سازگار با موبایل ندارید این کار را به طراحی سایت دارکوب بسپارید. طراحی سایت سازگار با موبایل بسیاری از هزینه های شما در مقایسه با طراحی جداگانه سایت برای موبایل را پایین می آورد. برای ساخت سیستم ستون بندی می بایست جهت صفحه بندی کلاس ستون اول و آخر را بدانید. البته بدون دانستن ستون اول و آخر نیز می توانید ستون بندی سازگار با انواع مرورگرها را داشته باشد. در این مقاله می خواهم به شما نحوه ساخت سیستم ستون بندی سازگار با موبایل توسط nth-of-type دستور css را آموزش دهم. لازم نیست کلاس ستون آخر و اول داشته باشید و یا تعداد ستون ها را بدانید، زیرا همه کارها توسط viewport انجام می شود. زیرا در سایزهای مختلف مرورگر و رزولوشن صفحه قالب به ستون های مختلف تبدیل می گردد.
بروز خطا در استفاده از کلاس اول و آخر
به صورت پیش فرض می بایست کلاس ستون اول و آخر (.first و .last) را به کدهای خود اضافه نماییم ولی انجام این کار برای پیاده سازی قالب مناسب برای رزولوشن های مختلف مشکل ایجاد می نماید.
استفاده از nth-of-type
دستور زیر به شما امکان ایجاد فلوت و مارجین را بدون استفاده از (.first و .last) می دهد.
- دستور زیر ستون های 4 ام از ستون 1 را انتخاب می نماید.
- دستور زیر ستون های3 ام از ستون 1 را انتخاب می نماید.
- دستور زیر ستون های 2 ام از ستون 1 را انتخاب می نماید.
{ margin-left: 0; clear: left; }
سازگاری با موبایل توسط Media Queries
.col { background: #eee; float: left; margin-left: 3.2%; margin-bottom: 30px; }
/* grid4 col */
.grid4 .col { width: 22.6%; }
/* grid3 col */
.grid3 .col { width: 31.2%; }
/* grid2 col */
.grid2 .col { width: 48.4%; }
تبدیل 4 ستونه به 3 ستونه
برای تبدیل 4 ستونه به 3 ستونه که عرض آن کمتر از 740px می باشد
1. تبدیل عرض .grid4 .col به 31.2%
2. بازنویسی left margin و clear
3. ست نمودن مجدد left margin و clear property توسط دستور nth-of-type(3n+1) برای ایجاد قالب سه ستونه
{ .grid4 .col { width: 31.2%; }
.grid4 .col:nth-of-type(4n+1) { margin-left: 3.2%; clear: none; }
.grid4 .col:nth-of-type(3n+1) { margin-left: 0; clear: left; }
}
تبدیل 4 ستونه و 3 ستونه به 2 ستونه
برای تبدیل 4 ستونه به 3 ستونه و 2 ستونه که عرض صفحه کمتر از 600px باشد نیز به همان روش بالا اقدام نمایید.
{ /* change grid4 to 2-column */
.grid4 .col { width: 48.4%; }
.grid4 .col:nth-of-type(3n+1) { margin-left: 3.2%; clear: none; }
.grid4 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; }
/* change grid3 to 2-column */
.grid3 .col { width: 48.4%; }
.grid3 .col:nth-of-type(3n+1)
{ margin-left: 3.2%; clear: none; }
.grid3 .col:nth-of-type(2n+1)
{ margin-left: 0; clear: left; }
}
تمام عرض کردن تمامی ستون ها
برای تمام عرض کردن کلیه ستون ها که رزولوشن صفحه آنها از 400px: کمتر است می بایست به روش زیر اقدام شود.
{
.col { width: 100% !important; margin-left: 0 !important; clear: none !important; }
}
مشکلات اینترنت اکسپلورر
هم media queries and nth-of-type توسط اینترنت اکسپلورر 8 به پایین پشتیبانی نمی شود. شما می توانید از selectivizr.js برای nth-of-type و respond.js برای media queries به جهت پشتیبانی اینترنت اکسپلورر استفاده نمایید. هر دوی selectivizr.js and respond.js متاسفانه به یکدیگر به خوبی کار نمی کنند بنابراین ستون بندی ها از 4 به 3 و 2 تغییر نمی یابند. البته فقط در اکسپلورر.
نمایش تصویر و نام نویسنده در نتایج گوگل
گوگل اطلاعات نویسنده مقاله را به مانند تصویر نویسنده و نام نویسنده در نتایج جستجوی خود نمایش می دهد تا کاربران بتوانند محتوای بهتر را انتخاب نمایند. به عنوان مثال در گوگل جستجو نمایید "طراحی سایت" و تصاویر نویسندگان برخی از سایت ها به همراه نام آنها در کنار هر یک نمایش داده شده است.
در صورتی که می خواهید اطلاعات شما نظیر تصویر و نام شما در گوگل نمایش داده شود قبل از هر چیز می بایست یک حساب کاربری گوگل پلاس ایجاد نمایید که شامل تصویر مناسبی از صورت شما در پروفایل آن باشد. سپس می بایست بین محتوای نوشته شده در سایت و پروفایل گوگل پلاس خود ارتباط برقرار نمایید که این کار را می توانید از دو روش زیر انجام دهید.
روش اول: لینک کردن محتوای سایت با گوگل پلاس توسط آدرس ایمیل معتبر
در صورتی که آدرس ایمیل از سایت مورد نظر ندارید می بایست روش دوم را انجام دهید.
1. بررسی نمایید تا در سایت مورد و با نام دامنه مورد نظر آدرس ایمیل داشته باشید.
2. در سایت مورد نظر می بایست در مقالاتی که مربوط به شماست توسط نویسنده داشته باشید. به عنوان مثال "By احمد بالوی پور" یا "Author: احمد بالوی پور"
3. صفحه Authorship گوگل را مشاهده نموده و آدرس ایمیل خود را ارسال نمایید. فرقی ندارد در این دامنه چند مقاله دارید می بایست این کار را یک بار برای هر دامنه انجام دهید. ایمیل شما در بخش Contributor to گوگل نمایش داده می شود.
4. برای آنکه بدانید از پروفایل شما چه اطلاعاتی نمایش داده می شود می توانید از آدرس structured data testing tool آن را بررسی نمایید. به عنوان مثال در صورت وارد نموده آدرس چیزی شبیه به این برای شما نمایش داده خواهد شد.
* در صورتی که در سایت سایر اسنیپت های گوگل نظیر اسنیپت آدرس صفحات و رتبه بندی مقاله فعال باشد نمایش صفحه به این صورت خواهد بود.
روش دوم: برقراری ارتباط بین مقاله و پروفایل گوگل پلاس توسط لینک دادن
1. ایجاد یک لینک از صفحه مقاله به پروفایل گوگل پلاس شما به صورت زیر:
این بخش [profile_url] را با آدرس گوگل پلاس خود جایگزین نمایید به مانند زیر:
دقت نمایید لینک شما حتما می بایست شامل ?rel=author باشد در غیر این صورت گوگل متوجه لینک شما نخواهد گردید.
2. از پروفایل گوگل نیز می بایست به سایت خود لینک برقرار نمایید:
- بخش Contributor To section را ویرایش نمایید.
- در بخش Add custom link آدرس سایت خود را وارد نمایید.
- و همچنین می توانید انتخاب نمایید چه کسی لینک را مشاهده نماید.
- بر روی ثبت کلیک نمایید
* در صورتی که نمی خواهید اطلاعاتی از پروفایل شما نمایش داده شود به آدرس http://plus.google.com/me/about/edit مراجعه نموده و Help others discover my profile in search results را غیر فعال نمایید.