طراحی صفحه پروفایل کاربری برای قالب وردپرس

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

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

به پوشه ی مربوط به قالب مورد نظر برید , پیشنهاد می کنم برای ایجاد این بخش و تغییرات بر روی قالب وردپرس رو روی لوکال هاست یعنی کامپیوتر خودتون نصب کنید و بعد از اتمام کار و تغییرات قالب رو روی هاست آپلود کنید , آموزش نصب وردپرس روی لوکال هاست .

وارد پوشه ی قالب وردپرس مورد نظر بشید و فایل Functions.php رو در یک ویرایشگر متنی باز کنید مثل ( نوت پد , نوت پد ++ و … ) , و کد زیر رو به این فایل اضافه کنید توجه داشته باشید کد را در محل مناسب کپی کنید پایین کد های این فایل قرار بدید

// Display Authors

function authors() {

// Change role= to whatever user type you want to display
$authors = get_users('role=author');

echo '<div id="bio-wrap">';

echo '<ul>';

foreach ($authors as $author ) {

$desc = the_author_meta('user_descrption', $author->ID);

echo '<div>';

echo '<div id="bio-avatar">';

echo '<li>';

// Changing the 126 will change the height and width property of the avatar. Profiles will have to have an avatar in order for this to display.
echo get_avatar($author->ID , '126');

echo '</div><!-- end .col-left -->';

echo '<div id="bio-text">';

echo '<h3>';

echo '<a href="' . get_bloginfo('url') . '/author/';

the_author_meta('user_nicename', $author->ID);

echo '">';

the_author_meta('display_name', $author->ID);

echo '</a>';

echo '</h3>';

echo '<div id="bio-desc">';

// If you want to change how many characters show simply change 250 to whatever number you want.
echo substr( $author->user_description , 0 , 250 );

// This is attached to the end of the excerpt from above. Here you can add a custom Read More link if you want.
echo '...';

echo '</div><!-- end #bio-desc -->';

echo '<div>';

// This link does not work. You will have to have a custom member profile page and link it from here.
echo '<a href="' . get_bloginfo('url') . '/user/';

the_author_meta('user_nicename', $author-ID);

echo '">Full Profile</a>';

echo '|';

// By default this should link to a list of posts by this person. You may have to customize this link as well.
echo '<a href="' . get_bloginfo('url') . '/author/';

the_author_meta('user_nicename', $author->ID);

echo '">All Articles</a>';

echo "</a>";

echo '</div><!-- end .bio-links -->';

echo '</div><!-- end .col-left -->';

echo '</li>';

echo '</div><!-- end .bio-entry -->';

}

echo '</ul>';

echo '</div><!-- end .bio-wrap -->';

}

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

حال نوبت ساخت برگه ی مربوط به پروفایل کاربران هست داخل پوشه ی قالب فایلی به نام authors.php ایجاد کنید , سپس در داخل پوشه ی قالب فایلی به نام page.php وجود داره که باید محتویات ( کدها ) مربوط به فالی page.php رو به داخل فایلی که ایجاد کردید یعنی authors.php کپی کنید.

بررسی کنید کدی شبیه کد زیر در ابتدای این فایل که کدها رو داخلش کپی کردید موجود باشه

<?php get_header(); ?>

کار بعدی , کد زیر رو بعد از کد بالا قرار بدید , اگر کدی شبیه با این کد وجود داره کافیه اون کد رو شبیه این کد ویرایش کنید

<?php
/*
Template Name: Author Bios
*/
?>

سپس کد زیر رو داخل این فایل پیدا کنید ( توجه : با فایل page.php کاری نداریم فقط authors.php )

<?php the_content(); ?>

کد بالا رو که پیدا کردید پاکش کنید و کد زیر رو به جای آن قرار بدید

<!-- start custom author biographies -->
<div>
<h3> Authors </h3>
<?php authors(); ?>
</div>
</div><!-- end .group -->
<!-- end custom author biographies -->

خسته نباشید کار تمام است , حالا کافیه کمی به این بخش ایجاد شده استایل بدهید تا زیبا تر دیده شود , کدهای زیر را به فایل style.css قالب اضافه کنید , می تونید به دلخواه خودتون تغییرش بدید.

/*--------------------------------------------------
Author Bios
----------------------------------------------------*/
.group:after {
content: "";
display: table;
clear: both;
}
* html .group             { zoom: 1; } /* IE6 */

*:first-child+html .group { zoom: 1; } /* IE7 */

.col-left{
float:left;
}
.col-right{
float:right;
}
#bio-wrap{
width: 100%;
font-family: 'Raleway', sans-serif;
}
#bio-wrap ul{
margin:0px !important;
padding:0px !important;
}
#bio-wrap ul li{
list-style-type:none !important;
}
.bio-entry{
width:43%;
display:inline-block;

/* This giant block of code is to give the gradient effect to the background. You can choose your own here: http://www.colorzilla.com/gradient-editor/ */
background: rgb(248,248,248); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiNmOGY4ZjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  rgba(248,248,248,1) 30%, rgba(232,232,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(248,248,248,1)), color-stop(100%,rgba(232,232,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 30%,rgba(232,232,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(248,248,248,1) 30%,rgba(232,232,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(248,248,248,1) 30%,rgba(232,232,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(248,248,248,1) 30%,rgba(232,232,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-8 */
/* THIS ENDS THE GRADIENT COLOR */

/* This block displays an inner shadow effect that you can change by going here: http://css3generator.com/ Make sure to select Box Shadow and Inset to Yes*/
-webkit-box-shadow: inset 0px 0px 15px 3px rgba(85, 85, 85, 0.1);
box-shadow: inset 0px 0px 15px 3px rgba(85, 85, 85, 0.1);
/* THIS ENDS THE BOX SHADOW */
margin:10px 0px 0px 25px;
position:relative;
padding: 10px 10px 55px;
float:left;
}
#bio-avatar{
width:auto;
height:auto;
display:block;
}
#bio-avatar li a img.avatar{
border:2px solid #cccccc;
-webkit-box-shadow: inset 1px 1px 8px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 1px 1px 8px 1px rgba(0, 0, 0, 0.2);
}
#bio-text{
width:63%;
height:auto;
margin-left:5%;
line-height:1.2em;
}
h3.bio-titles{
font-family: 'Archivo Black', sans-serif !important;
text-transform:capitalize;
}
h3.bio-titles a{
color:#888888;
}
h3.bio-titles a:hover{
text-decoration:none;
}
.bio-links {
position:absolute;
right:15px;
bottom:10px;
}
/* Changing these colors will change the link colors to the profile and articles*/
.bio-links a{
padding:5px;
color:#f58320;
}
.bio-links a:hover{
color:#f57200;
text-decoration:none;
}
/* THIS ENDS THE LINK COLOR STYLES */

h3.author-titles{
font-family: 'Archivo Black', sans-serif !important;
font-size:3em;
display:block;
padding:15px 0px;
border-bottom:1px solid #888888;
width:100%;
color:#555555;
}

امیدوارم مفید واقع بشه براتون.