learning WordPress "About the Author" Tutorial > WordPress learning

WordPress

Learn how to use WordPress.

learning | WordPress "About the Author" Tutorial

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
learning님의 WordPress learning강의 청각장애인을 위한 자막
15777710222456.jpg

 



hello everyone welcome back to the
WordPress series in this lesson we will
learn how to create a dynamically
generated about the author box let's
begin by jumping into a demo of the
finished product that we will be
building together alright so this is the
home page for our website but if I
navigate to a single blog post detail
screen if I scroll down to the bottom of
the post here we can see the about the
author box so this pulls in an avatar
for the user as well as their name also
a bit of biography text three of their
other most recent posts and then a
button to view all posts by that author
now I must admit if your website only
has one author then this feature won't
seem very cool because you could just
hard code all of this content in your
theme files but if your website has
multiple authors I think this is pretty
neat so check this out if we go back to
the home page and click on one of these
blog posts so I will click on eating
grass is nice now we see that the about
the author box is for Kitty Doe here's
her biography text and here's a link to
her only other blog post so you get the
idea the about the author box pulls in
info about the author of the current
post you're viewing now behind the
scenes I just reset my theme files to
the state they were in at the very end
of our previous lesson so you and I are
now on the same page at this point let's
begin working together to add back in
the dynamic about the author box so
let's jump over to our text editors and
within our theme folder let's open up
content single dot PHP let's scroll down
to the bottom of the file and right
below this the content line let's add a
few new lines and let's create a new div
let's give it a class of about author
within this new div we are going to want
two columns one column for the avatar
and one column for the text content so
let's create a sub div with a class of
about author image
and let's create another div with a
class of about author text and within
this about author text div let's add a
heading level 3 which will read about
the author let's go ahead and save this
file and refresh in the browser so
here's the new HTML that we just added
let's go ahead and style it a bit with
CSS so back in our text editor let's
jump in to style dot CSS let's scroll
down to the very bottom of the CSS file
and let's create a new comment to stay
organized let's say about the author
section first let's select the entire
about the author box and give it a
background color so it had a class of
about author
let's give it a really light gray
background so background color pound
sign and then II de de dee let's also
give it a bit of padding so padding 20
pixels in all four directions let's see
how that looks that looks a bit better
next let's add the two column layout so
let's create a new rule that targets the
about author image div so this will be
the first column let's float it to the
left and give it a width of 28% and
let's also set up the second column the
text column so it had a class of about
author text let's float it to the right
and give it a width of 68% now if we
were floating both children divs of the
parent div we want to make sure that the
parent div clears the floats so back in
our HTML or I should say our PHP file
let's give this main about author div a
second class of clear fix so now if we
check things out in the browser we see
the beginnings of a two column layout
all right that's enough CSS for now
let's change gears and begin writing PHP
to actually output the current authors
image and their text content but before
we do that
first talk about user accounts in
WordPress so if we jump to the admin
dashboard and click on users in the
sidebar we can see that my example site
only has two users in this case two
authors but obviously on your WordPress
site you can create as many users as
you'd like so if you want to let your
friends family or coworkers create posts
you just create a new user account for
them based on their email address but
back to the task at hand we want to see
where we are pulling author information
from so for example if I click on Kitty
Doe this nickname field is the name that
we will want to display on the front-end
and if I scroll down here we see the
biography text that we will want to echo
out and here is the user avatar we want
to display now you don't actually upload
your avatar directly in WordPress
instead you need to create an account on
a website named Gravatar which stands
for globally recognized avatar and then
WordPress will look up your user account
avatar by searching the Gravatar service
for your matching email address I
definitely recommend taking a couple of
minutes to set up a Gravatar account
it's definitely worth it it isn't just
for your own WordPress site also if you
leave a comment on any other blog on the
web with your email address it will
automatically pull in your avatar also
github Stack Overflow and discuss can
also pull in your photo based on your
email but let's get back on track so now
that we know where author information is
being pulled from let's jump back into
our theme files and write PHP to finish
our about the author box so within our
content single PHP file let's begin by
outputting the Gravatar image within our
about author image div so within this
div let's drop into PHP and we want to
echo out the contents of a function that
board press offers us named get avatar
we will provide this function with two
arguments the first is the ID for the
user or author
we want to look up so to find the ID of
the author of the current post we can
use a function named get the author meta
and we are interested in the ID so
that's the first argument that we will
pass the get avatar function but let's
add a comma here because we will also
provide it a second argument where we
specify the size of the image that we
want it to return
so we could say 100 pixels or 200 pixels
but let's go with the max value of 512
so the image will be as sharp as
possible and now if we save this and
check out the browser here's our
Gravatar now I think it would look nice
if we overlaid the WordPress user
account name on top of the very bottom
of the photo here so back in our PHP
underneath this image line let's create
a paragraph and within it let's drop
into PHP and let's echo out the contents
of get the author meta and we are
interested in their nickname so if I
save that we see that it outputs their
nickname of Kitty Doe so now let's just
use CSS to position this so that it sits
on top of the bottom of the image so in
our text editor let's jump into style
dot CSS and beneath this rule for the
image div let's create a new rule that
selects the paragraph element within
that div so about author image P let's
tell it to be positioned absolutely and
it should sit at the very bottom edge
and let's also tell it to be full width
so left:0 right:0 let's also give it a
transparent black background so
background-color:rgba 0 0 0 gives us
black and let's say that it should be
partially transparent let's go with 0.5
let's give it a bit of vertical padding
so padding maybe 4 pixels vertically and
we don't need any horizontal padding
let's tell the text itself to be aligned
in the center so text align Center let's
also make the text bold
so font-weight:bold and why don't we
give the
a subtle shadow so text-shadow
let's go with one pixel offset and one
pixel blur rgba to create black and then
let's tell it to be 85% visible let's
say that the text itself should be white
so it's easy to read on the black
background and let's also zero out any
margins that this paragraph element
would have so margin zero
and finally if we are telling this
element to be positioned absolutely we
want to be sure that we tell its parent
element to use position:relative so that
way our name paragraph will be
positioned in relation to its parent
instead of the entire page so let's see
what this looks like that looks pretty
good
but if you zoom in really closely you
can see that there's maybe a three pixel
gap where the paragraph is positioned
lower than the image now if we want that
to align perfectly we just need to tell
the image to be a block level element so
within our CSS let's create a selector
that targets the actual IMG image
element and just say display block now
let me zoom in really closely and when i
refresh we see that the bottom edge is
now perfectly aligned all right so that
takes care of our image next let's work
on outputting the biography text for the
author so in our text editor let's jump
back into content single.php and within
this about the author text div
underneath our heading level three let's
drop into PHP and let's echo out the
result of get the author meta and we are
interested in the description now if we
save this on its own it will return raw
text but we want the text to be wrapped
in HTML paragraph elements so what we
can do is wrap this function within
another function named WP auto P so be
sure to add the closing extra
parentheses right here let's save this
and check it out in the browser
there's Kitty dough's wonderful
biography next let's work on outputting
a list of other posts by this author so
back in our PHP file underneath the
biography description let's create a
brand new div let's give it a class of
other posts by and within this new div
let's create a heading level 4 that
reads other posts and then let's drop
into PHP so we can dynamically output
the name of the author
so let's echo out the results of get the
author meta and we want their nickname
so let's save that and in the browser
that gives us other posts by Kitty Doe
all right and then back in our PHP
underneath this heading level four let's
create an unordered list and then we
will simply have a list item and a link
for each post but we don't want to
hard-code links to other posts we want
this to be dynamic so we are going to
use the wordpress loop but before we can
loop through anything useful we first
need to create a custom query of the
posts that we are interested in after
that then we can loop through the
collection of posts to output a list
item and a link so right above this
about author text div let's create a new
space and drop into PHP and let's create
a new variable named other author posts
we could have named this anything we
like I just made this up but what we are
going to do is populate this variable
with only the posts that we are
interested in so only other posts from
the same author so let's set this
variable to equal a new instance of the
WP query class within these parentheses
let's create an array and then within
these parentheses let's drop down to a
new line just to stay organized and now
we can build our own custom post query
so let's begin with the author property
we only want posts from the current
author so get the author
and we want the ID let's also say that
there should only be three posts at the
maximum so let's set the posts per page
property let's set it to three and
that's all we need for the custom query
at the moment let's be sure to add a
semicolon after these closing
parenthesis and now within our unordered
list we can simply loop through the
results of our custom query so below
this opening unordered list line let's
drop in to PHP and let's use a while
loop so while and let's say while our
custom query of posts so remember the
variable name was other author posts
let's say while that collection still
has posts to loop through so this method
of have posts will evaluate to true if
there are still more posts to loop
through so while this is the case while
there are still posts to loop through
we'll open up a pair of curly brackets
and within here we'll do something once
for each post the first thing we want to
do is get the data for that particular
post ready to be used so to do that we
can begin with our variable other author
posts and it has a method named the post
which will get the relevant data ready
so at this point we are ready to drop
out of PHP and begin outputting dynamic
HTML so at the end of this line let's
drop out of PHP and then on this line
where we end the curly bracket we can
drop back into PHP and then let's cut
and paste our list item line so that it
sits in between these two lines
so let's paste it in and now we just
need to output the permalink and the
post title so within the href attribute
let's drop into PHP and we can use the
the permalink function to give us the
URL and then within the a tag we just
want to output the title of each post so
drop into PHP again
and we can use the the title function
let's save this and check it out in the
browser looks good
but notice we are currently viewing the
eating grass is nice post so it doesn't
really make sense to include that post
in the other posts list so to fix that
all we need to do is jump into our PHP
and up here when we are creating that
custom query let's just add on another
property named post underscore
underscore not underscore in and this
will let us exclude certain post IDs
from the results of this search query so
this property is expecting an array of
post IDs and we just need to post it the
ID of the current post so to do that we
can use a function name to get the ID so
let's save this and refresh the page
perfect so because we are currently
viewing the eating grass is nice post it
doesn't show up in the other post list
so the kitty doe author only has two
total posts but what if an author only
had one total post in that case we
wouldn't want to display this other post
section at all so to account for that
possibility we can wrap this entire div
within an if statement so back in our
PHP here is where the other posts by div
begins so right above that let's drop
into PHP and let's say only if our other
author posts variable only if that
custom query actually has posts so we
can use a method have posts so only if
this evaluates to true do we want to
display any of this content so to begin
the body of the if statement let's open
up a curly bracket here and then let's
find the closing div tag for this div so
let's scroll down a bit here it is so
right below that let's drop into PHP and
close out the if bracket and then drop
back out of PHP also once we're done
using our custom
weary it's a good practice to reset the
wordpress post data back to the natural
state that it was in before our custom
query overrode it so remember that
typically WordPress decides which dated
a query based on the current URL not our
own custom query so to reset the post
data back to normal after this closing
curly bracket while we are still in PHP
we can simply run a function named WP
reset post data so things are working
well for kitty doe because she only has
two total posts but if we visit a post
by a different author so this post for
example this is by a different author
who has more than three total posts so
in this case it would probably be
helpful to include a button or link here
that reads view all posts by this author
so let's set that up let's jump back in
to our PHP let's scroll down a bit let's
drop down to a new line let's create a
link element to fill out the H ref URL
we will want to drop into PHP and let's
echo out the results of get author posts
URL and we simply pass this function a
user ID and it will return a URL to the
full author archives link so to get the
current author's ID number we can use
the get the author meta function and
we're looking for the ID alright and we
want the actual text of this link that
users click on to read view all posts by
and then we'll output the user's name so
drop in to PHP and then just echo out
get the author meta and we want their
nickname and while we're at it why don't
we give this link element a class so it
looks like a button we can reuse CSS
that we once wrote for our home page
buttons so let's give it a class of
button a and let's see how this looks in
the browser perfect so view all posts by
Brad and if we click it
it takes us to an author archive screen
but if we go back to one of Kitty doze
posts you'll notice that it doesn't make
sense to include this full author
archives link for authors that don't
have more than three other posts to
display so with that in mind let's jump
back into our PHP and let's wrap this
link within an if statement so let's
drop into PHP right above it and let's
say only if the current author has more
than three posts do we want to display
this so we can use a function named
count user posts and we just feed this
function the ID of the current author so
get the author meta and we want the ID
so only if that value is greater than
three do we want to display this link so
then we just open up a curly bracket we
close out PHP here and then right after
this link let's drop into PHP close out
the if statement curly bracket and then
drop out of PHP so if we save this and
check out the browser perfect Kitty dono
longer needs that button but if we go to
a different author the button displays
perfectly and that's it our about the
author box is complete I won't bore you
with the CSS that makes the other post
section look a bit nicer if you're
interested in the CSS I used for that
you can always download the zip file
with the source code of our finished
product that links in the description
and that's going to bring this lesson to
a close thank you so much for watching I
hope you feel like you learned something
and in our next lesson we'll take a
quick break from WordPress and take a
look at a few raw JavaScript without
jQuery techniques and also a few
relatively modern CSS layout tricks so
take care and I will see you in another
new video next Tuesday if you haven't
already be sure to check out my brand
new get a web developer job mastering
the modern workflow course as always
there's a link to it in the description

댓글 0개

등록된 댓글이 없습니다.

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권, 강의등록, 광고, 제휴등은 "관리자에게 문의"로 메세지 주시면 확인후 답변드립니다.

Menu