learning WordPress Page Templates (Theme Development) > WordPress learning

WordPress

Learn how to use WordPress.

learning | WordPress Page Templates (Theme Development)

본문

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

 



hello everyone welcome to another
WordPress tutorial in an earlier lesson
we learned how to use page PHP to
control the output of our WordPress
pages well in this lesson we're going to
take things one step further so what if
we want to use different layouts for
different pages now most of the time all
of your pages will look fairly similar
and the only thing that will be
different is the actual content in the
main body part of the page but there
will be times when you do want to use
different layouts or different output
schemes or different HTML so in this
video we're going to learn how to use
conditional logic and page templates to
do just that so let's get started let's
give ourselves a hypothetical task let's
say that when we're on the portfolio
page we want to bet a custom text to
display after this tagline so right
about here and we don't want that text
to display on any other pages only on
the portfolio page now perhaps this
isn't the most intelligent design choice
or maybe this doesn't make sense in a
real-world scenario but I think it'll be
a good proof of concept so the idea is
that we already have a header file that
is used on all pages so how can we make
a change in this one header.php file
that only shows on one actual page we're
going to use something called
conditional logic the code will look
like this will drop into PHP and we're
going to use an if statement so we're
saying if a condition is met and we want
to do something so now anything we place
between this line and this line will run
only if a condition is met so here in
between these brackets is where we
define what condition we're checking for
so we'll say if we're currently on a
certain page now how can we signify the
portfolio page with code it's quite
simple if we're viewing the portfolio
page we can see that in the URL bar it
ends with ID equals 14 so it's really as
simple as adding a 14 and then this is
page function will take care of the rest
so now any code we include here excuse
me not necessarily code just text so we
can say thank you for
or viewing our work actually let's move
this to sit within this heading level 5
element and if we refresh we can see
that this extra bit of text displays but
if we're on any other page it doesn't a
quick note if your particular WordPress
website does not show page ID at the end
of URLs that's okay in fact it's
desirable so let me show you an
alternative way to figure out the ID
simply go into your WordPress dashboard
click on pages click on whatever page
you're looking for or trying to figure
out the idea of and then once you click
on it then in the admin the URL will say
post equals and a number now if you
don't like using ID numbers at all
you don't have to you can also use slug
names in your conditional logic in our
code so let me go into settings and
adjust my permalinks so that our URLs
actually use names so I'll change it to
month and name so now if we go back to
our website and we click on portfolio
again you can see that the URL does not
have a page ID it's simply portfolio so
that means portfolio is the slug the
slug name for this page so an
alternative way of adjusting or using
our conditional logic would be to get
rid of the 14 the ID include quotes and
say portfolio so if we refresh we can
see that the exact same behavior is
still in place now I'll be the first to
admit that this exact example isn't very
exciting or terribly useful to include
extra text in the header but it's a
proof of concept the point is that you
now have conditional logic in your
toolbox now anywhere in any of your
theme files you can use conditional
logic to display different menus or
different content or different anything
on any page so that closes the first
chapter for this lesson conditional
logic now let's move on to something
different what if we actually wanted a
different template file to power this
portfolio page so currently page PHP
this is powering all pages but what if
we had changes that we only wanted to
show on this page
and they weren't subtle enough to just
use conditional logic what if we
actually wanted an entirely different
template
well WordPress makes that incredibly
easy to do we simply create a new file
in the theme folder and name it page -
and then we can include either the slug
name of the page that we're targeting or
the ID number of the page so we could
either include 14 or we could spell out
the slug and say portfolio that's it now
if we copy and paste code from page PHP
into this newly created file we can
customize this any way we would like so
for example what if on the portfolio
page we do not want to display the title
just delete that line refresh you can
see that it's gone but if we go to any
other page the title is still present
well that wasn't the most exciting
change
let's give us something a bit more
interesting what if we wanted the title
to sit on the left side and we wanted
this content to sit on the right side so
sort of a two column layout you can do
whatever you would like so we could say
a column container give it a class of
clearfix say title column text column so
we'll move the content into this text
column will output the title and title
column so we'll say H to use the PHP
excuse me the WordPress function name
the title so you can see that it's back
in but now we have this unique HTML
structure to play with so we can just
add a bit of CSS and we'll have a two
column layout so let's head over to our
style sheet and add a comment to stay
organized to column title layout so the
title column width 30% float it to the
left the text column take up the rest of
the width and we'll float it to the
right so if we refresh you can see that
we have a two column layout now I'm not
going to claim that I love the way this
looks visually but we set it up very
quickly and it's just to illustrate the
point that you can very easily create
different layouts for different pages
ice
creating a new file on your theme folder
named page - and then either the slug or
the ID so now we've learned how to
assign very specific theme files to very
specific pages based on their name or ID
however what if we wanted to create a
template that could be used by multiple
pages so for example you can see we have
links down here in the footer frequently
asked question Terms & Conditions
privacy policy what if we wanted just
these three pages to all share a common
layout but none of the other pages
WordPress makes it very simple so we'll
head over to the code we'll create a new
file you can name it anything we would
like I will call it special template now
let's copy and paste the code from our
standard page PHP into special template
and we just want to include a comment up
near the top of the file that says
template name special layout or you can
name it anything you would like and then
close the comment this comment is
essentially registering the template
with WordPress so WordPress is aware
that it exists so for example if we head
over to the dashboard click on pages and
find one of the pages that is linked to
from the footer privacy policy war we
can see that in the bottom right corner
under page attributes there's a template
field and we can click it and select
special layout the file we just created
now obviously if we click update and
refresh nothing will change because
remember we literally just copied and
pasted the code from page standard page
PHP so let's go ahead and make some
quick customizations let's imagine that
we want some sort of info box or
disclaimer to sit right about here over
on the right side so in our code we'll
go between the header and the content
create a new section info box let's
create a heading level 4 that says
disclaimer title and then just include a
bit of dummy text okay so now let's add
some corresponding CSS so that this
markup will sit right about here
oops create a new comment infobox styles
okay so let's add the code we'll give it
a width of about 30% float it to the
right obviously
let's give it a bit of margin so it
doesn't sit right up against the regular
text okay
let's also give it a bit of padding and
then a really light background color
let's also go ahead and adjust some of
the text that sits inside the info box
so remember we created a heading level 4
I don't really want there to be too much
space below the header so margin bottom
only 5 or 6 pixels and then let's make
the dummy text quite small so the
paragraph text font size maybe 85% so if
we refresh you can see that there's now
this nice little info box and if we
wanted this info box to also display on
the terms and conditions and frequently
asked questions' pages all we would need
to do is head over to the dashboard find
those two pages and adjust the template
so frequently asked questions template
special layout then we can do the same
thing for terms and conditions
okay so if we refresh there it is and if
we go to terms and conditions there it
is so this is useful because if you
imagine you have maybe 10 or 20 pages
and you want to include a uniform text
box if you ever down the road make
changes to this text now you don't have
to go to 20 different pages and update
it it's just in this one easy to update
template file so you can just change it
in one spot and that brings this third
and final chapter of the lesson to a
close let's review what we learned today
number one we can use conditional logic
and if statement and then if that
condition is met so if we're on a
certain page we can include unique code
number two we learned how to create new
theme files that match the slug name or
the ID number of a page and WordPress
will automatically make the connection
to only use it for that page and number
three we learned how to create actual
page templates that can be chosen from
the WordPress admin screen so we've
learned three different ways to send
unique code to different pages so that
brings this particular lesson to a close
thank you very much for watching I hope
you feel like you learned something and
stay tuned for more wordpress tutorials
thanks bye

댓글 0개

등록된 댓글이 없습니다.

Total 19건 2 페이지

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

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

Menu