Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Пачынаючы з WordPress: Рэдагаванне структуры сайта

by
Length:LongLanguages:
This post is part of a series called Beginning With WordPress.
Beginning With WordPress: Editing the Look of Your Site With CSS
Customising WordPress Functionality With functions.php

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

Такім чынам, вы атрымалі ваш CSS адбіўныя да хуткасці, і ваш сайт зараз павінен быць па крайняй меры справядлівы шлях ўніз па дарожцы да таго, наладзіць з дапамогай каляровай схемы і, магчыма, нават некаторыя нестандартныя шрыфты, каб зрабіць яго сапраўды пачынаюць адчуваць, што значна больш «вы», чым гэта было. Але, вы думаеце, вы таксама хацелі б зрабіць некаторыя іншыя змены, і гэтыя змены не зусім стыль звязаныя паміж сабой. Так што, хутчэй за ўсё, вы будзеце мець, каб пачаць атрымліваць у рэдагаванні некаторых жорстка закадавана, убудаванай структуры, і гэта азначае, што пачынае капацца ў PHP файлы вашага сайта.

Так, але перш чым гэта зрабіць, калі вы шукаеце табліцы стыляў я абяцаў на мінулым тыдні, што завяршае пераўтварэнне Дваццаць Трынаццаць ад памяранцавага да сіняга: вось тут - там могуць быць некаторыя элементы тэмы я, магчыма, прапусціў, як перамяшчацца па Я не наладжваць кожны апошні пост-фармат і ёсць, верагодна, іншыя рэчы, якія вы знойдзеце адсутнічаюць. Так што, калі вы сапраўды плануеце выкарыстаць гэта для жывога сайта вы будзеце мець ладную крыху больш працы, каб зрабіць. Але гэта будзе, па меншай меры, атрымаць вам справядлівы шлях у працэс і паставіў вас, каб быць у стане кіраваць любымі іншымі наладамі вы можаце захацець далей ўніз па дарожцы.

Ва ўсякім выпадку, у кіраўніцтве на гэтым тыдні!


Перад тым, як пачаць, вам трэба ...

  • FTP доступ да сайта
  • Ваша праграмнае забеспячэнне для рэдагавання тэксту

Што мы будзем рабіць

  • Рэдагаванне па змаўчанні WordPress калантытул з карыстацкай спасылкай на / ўтрыманне
  • Перасоўванне галоўнай навігацыі да перад загалоўкам
  • Стварэнне апісання старонкі з дапамогай карыстацкіх палёў

У якасці ўвядзення я павінен растлумачыць крыху больш пра шаблонах ў тэме WordPress і як яны працуюць у кантэксце дзіцячай тэмы. Таму што, вы, магчыма, памятаеце, што на дадзеным этапе наша тэма фактычна не ўключае якіх-небудзь PHP шаблоны.

Можа быць, я забягаю наперад. Вы можаце нават не ведаць аб сістэме шаблоннага, праўда? Так што для сапраўды поўных тлумачэнняў вы маглі б пачаць тут:

спасылка

Тым не менш, за кароткі да кропкі версіі, дазвольце мне працытаваць Кодэкс, як я не мог сказаць гэта лепш сябе:

Шаблоны з'яўляюцца файламі, якія кантралююць, як ваш WordPress сайт будзе адлюстроўвацца на вэб-сайце. Гэтыя файлы чэрпаць інфармацыю з базы дадзеных MySQL WordPress і генераваць HTML-код, які адпраўляецца ў вэб-браўзэры. Дзякуючы магутнай сістэме Theme, WordPress дазваляе вызначыць, як некалькі або шмат шаблонаў, як вам падабаецца ўсё пад адной тэмай

Цяпер, калі вы паглядзіце на вашу тэму, вы заўважыце, што на самой справе няма ніякіх шаблонаў у каталогу тэмы ў дадзены момант. Вам неабходная мне, каб нагадаць вам, чаму?

1-bwwp_7-templates-on-server-a

Я не думаю, што так. Вы памятаеце, што наша тэма з'яўляецца «дзіця тэмы» і, такім чынам, усе шаблоны для нашай тэмы падвярнуць назад там у каталогу бацькоўскай тэмы.

2-bwwp_7-templates-on-server-b

Такім чынам, пытанне застаецца тое, як мы атрымліваем доступ і рэдагаваць гэтыя файлы без рызыкі бацькоўскай тэмы, калі распрацоўшчык тэмы абнавіць тэму?

Я рады, што вы спыталі! Гэта лёгка, мы проста скапіяваць шаблон, які мы хочам змяніць з бацькоўскага каталога ўніз ў наш каталог дзіцячай тэмы. WordPress досыць разумны, каб шукаць шаблоны першымі ў каталогу нашай даччынай тэмы, і калі ён не знаходзіць патрэбны файл там будзе аўтаматычна шукаць назад да бацькі. Такім чынам, усё, што мы капіяваны ў дырэкторыю тэмы дзіцяці будзе мець прыярытэт.

Добра, што фон. Цяпер мы пераходзім на рэчы, што адбываецца, каб дазволіць нам зрабіць структурныя змены, якія мы хочам.


Стварэнне / капіраванне файлаў у вашым дзіцяці тэму

Для пачатку, ёсць больш чым адзін спосаб атрымаць копію шаблонаў, якія мы хочам змяніць з бацькоўскай тэмы ў дзіцячай тэму.

метад 1

Вы можаце перацягнуць з аддаленага на лакальны і назад Remote ў вашым FTP-кліенце.

У FileZilla бугельного копіі шаблонаў, якія вы змяняеце з бацькоўскай тэмы, на працоўны стол (ці дзе-небудзь яшчэ мясцовы на вашай машыне), а затым перацягнуць яго назад на сервер у дырэкторыю дзіцяці тэмы:

3-bwwp_7-drag-down-up

Гэта нічога не выдаляе з пульта дыстанцыйнага кіравання, проста стварае копію на лакальным кампутары, які вы затым капіраванне назад на выдаленую машыну ў іншым месцы.

спосаб 2

Мы таксама можам стварыць закладку для нашага FTP-сервера ў тэкставым Wrangler, таму мы можам зэканоміць да альтэрнатыўных месцаў (напрыклад, у дзіцячай тэме), як гэта:

  1. У тэксце Wrangler перайсці да тэксту Налады Wrangler »
  2. У Tab закладкі ўдарыла знак + у левым ніжнім куце, каб стварыць новую закладку
4-bwwp_7-bookmark-textwrangler-a

Запаўняем поля з вашымі дадзенымі FTP, тыя ж уліковыя дадзеныя, якія вы выкарыстоўвалі, калі мы стварылі FileZilla.

5-bwwp_7-bookmark-textwrangler-b

Пры гэтым усталяваць, калі вы ў FileZilla і хочаце скапіяваць файл, які вы можаце затым правай кнопкай мышы на файл на сэрвэры (у нашым выпадку, footer.php) і абярыце рэдагаваць, так што адкрываецца ў тэкставым Wrangler.

Затым у тэкставым меню Wrangler Файл выберыце каманду Захаваць копію на сервер FTP / SFTP. (Калі вы выбіраеце FTP і праграма паведаміць вам, што вы павінны дазволіць выключэнне бяспекі, таму што вы выкарыстоўваеце выбраць дазваляюць кожны раз, і перайсці да эканоміі файла - вам прыйдзецца зрабіць толькі адзін раз).

6-bwwp_7-bookmark-textwrangler-c

У якое адкрылася акне побач, вы можаце перайсці ў каталог вашай даччынай тэмы і захаваць новы footer.php для вашага дзіцяці тэмы.

7-bwwp_7-bookmark-textwrangler-d

Гэта таксама перамяшчае файл ўніз ад раз'ядноўвае, і назад зноў у новае месца на гэтым сэрвэры, гэта крыху больш складана, але я думаю, што гэта робіць для больш чыстага працэсу ў тым, што вы не ў канчатковым выніку з безгаспадарнымі файлаў на вашым працоўным стале. У любым выпадку, незалежна ад таго, як вы вырашыце зрабіць гэта, мы павінны мець копію footer.php (або любы іншы файл, мы рэдагуемы) у нашай дзіцячай тэме, каб мы маглі ўнесці ў яго змяненні!


Рэдагаванне Footer Змена Сайта Info Падрабязнасці

Першыя змены, якія я звычайна прашу, каб кожны раз, калі мае слухачы атрымліваюць у гэтую частку курса, як змяніць значэнне па змаўчанні Дваццаць Трынаццаць Footer

8-bwwp_7-site-info

У асноўным яны хочуць, каб дадаць апавяшчэнне аб аўтарскім праве, або яны могуць захацець змяніць яго ў цэлым, так ці інакш, верагодна, не здзівіць вас, каб ведаць, што важдаўся аб гэтай частцы вашага сайта можа быць зроблена ў шаблоне калантытула (footer.php) - так, на аснове інфармацыі, якая змяшчаецца ў раздзеле вышэй, адкрыйце копію вашага дзіцяці тэму ў ў footer.php ў вашым тэкставым рэдактары.

Такім чынам, перш чым ісці што-небудзь рэдагаванне, давайце зламаем тое, што мы глядзім.

9-bwwp_7-footer-php

На самым версе старонкі мы бачым код тэг, які выглядае наступным чынам. Гэта паказвае на тое, што тэкст, якому трэба вынікаць PHP, мова, які інтэрпрэтуецца і выконваецца на сэрвэры, перш чым старонка падаецца назад на кліента (браўзэра) - гэта разумны матэрыял вэб-тэхналогіі, мы больш не павінны выкарыстоўваць тупыя файлы, сядзець статычна на сэрвэры проста служыў у адказ на запыт браўзэра. Сервер сцэнарыяў на баку, якая з'яўляецца тое, што PHP з'яўляецца, дазваляе нашмат больш разумнай, дынамічнай тэхналогіі, якая прыводзіць шмат вэб-прадуктаў на базе сёння (ёсць і іншыя мовы таксама, але WordPress напісаная на PHP і, такім чынам, нашу ўвагу тут ).

PHP ня HTML, але ён працуе і вакол HTML, таму што гэта тое, што браўзэры чытаць. Браўзэры не могуць чытаць ці інтэрпрэтаваць PHP, што ўсё гэта адбываецца на сэрвэры (і таму пры замове хостынгу зваротна ў эпізодзе 2 вы павінны былі пераканацца, што ваш гаспадар прапанаваў сервер з PHP, які, вядома ж, пераважная большасць з іх рабіць).

У любым выпадку, чытаючы старонку ўніз, вы ўбачыце наступнае:

  1. Адкрыццё PHP тэг
  2. Каментары аб гэтым шаблоне з указаннем яго месца ў структуры сайта ў цэлым (змяшчае змесціва калантытула, а таксама закрывае галоўны змест спраў)
  3. Закрыццё PHP тэгаў
  4. Некаторыя HTML-тэгі - з карыснымі каментарамі ...
  5. некаторыя HTML-тэгі - з карыснымі каментарамі ... Заключны Main </div>, то <footer> адкрыццё падзелу.
  6. Некаторыя PHP тэгі напрыклад <?php get_sidebar('main'); ?>
  7. Іншыя HTML-тэгі закрыцця

Апублікаваны код на самай справе выглядае наступным чынам:

10-bwwp_7-published-html

Вы заўважыце, што ёсць толькі HTML на старонцы. Усе розныя часткі шаблону Выцягнулі ў небудзь з тэмы (sidebar.php і footer.php і г.д.) або ад самага wp_footer () WordPress; і скампіляваныя ў адзін HTML-старонкі. Кожная старонка або запіс на вашым сайце, што вы наведваеце будзе складзена такім жа чынам, з якога б бітамі тэма называюцца ў адпаведнасці з, дзе вы знаходзіцеся на вашым сайце.

Калі вы знаходзіцеся на галоўнай старонцы можна выцягваць у home.php або шаблон front-page.php, калі вы на блогу гэта, верагодна, будзе шаблон archive.php. Усе шаблонаў у вашай тэме сцягваецца (сервер), па меры неабходнасці, калі кліент (браўзэр) робіць запыт на сервер для прагляду вашага сайта.

Такім чынам, каб вярнуцца да таго, што мы жадаючы дамагчыся для гэтага практыкаванні, вярнуцца ў тэкставы рэдактар ​​і пачаць, каб атрымаць уяўленне аб тым, якія біты гэтага калантытула кода шаблону вы можаце быць жадаючаму змяніць.

Калі вы ўважліва паглядзіце, вы ўбачыце адзін доўгі PHP тэг, які, здаецца, змяшчае ўсе элементы, якія вы маглі б жадаць змяніць. Па-першае, мы можам убачыць, што ўвесь гэты фрагмент з'яўляецца спасылка назад WordPress.org:

Цяпер, калі вы асвоіць з гэтым відам кода вы можаце наладзіць яго, як вы хочаце, вы можаце выдаліць гэты раздзел ўсе разам, у гэтым выпадку вы можаце выдаліць усе з:

і ёсць, што цэлы раздзел знікне, і ваш сайт з аздабленнем у ніжняй частцы widgetised зноскі (sidebar.php).

Але ў гэтым выпадку тое, што мы жадаючаму зрабіць, гэта змяніць URL на мой сайт і паставіць у крэдыт для мяне, як распрацоўшчык, і апавяшчэнне аб аўтарскім праве, каб адгаварыць людзей ад паўторнага майго ўтрымання.

Нешта накшталт гэтага «любоўна створаная The Web Прынцэсы для кліента сайта © 2013»

Па-першае, мы зменім спасылкі ў гэтым фрагменце кода з twentythirteen ў mytheme (назва нашай тэмы) і:

Затым мы змяняны URL з wordpress.org ў thewebprincess.com - дык гэта будзе спасылка на маю старонку:

Тады мы зменім назву спасылкі з «семантычнага Personal Publishing Platform» на «Вэб-распрацоўка і WordPress навучання» (гэта спасылка назад да мяне, давайце скажам Google, што я магу зрабіць):

Затым мы зменім тэкст «Ганарліва Працуе на" да "Любоўна Ствараюцца»

Тады мы зменім слова «WordPress» на фразу «The Web прынцэсай»:

Нарэшце, мы хочам, каб наладзіць яго з дапамогай нашага апавяшчэння аб аўтарскіх правах, дадаўшы ў імя кліента пасля нашай спасылцы і PHP тэг для адлюстравання даты, і мы выкарыстоўвалі PHP, таму што гэта аўтаматычна будзе паказваць тое, што бягучы год!

Там вы ідзяце! Новы заказны калантытул для нашага сайта.

Дарэчы, гэта было даволі доўга намотваецца спосаб ісці аб гэтым. Пры гэтым гэта такім чынам мы захавалі ўсе элементы, якія робяць магчымым інтэрнацыяналізацыю гэтую тэму, якая, у рэальным свеце сцэнар проста тонкай налады для сябе (а не падрыхтоўкі вашай тэмы для больш шырокага распаўсюджвання), вы маглі б проста прапушчана яго усё і замяніць усе вышэй кода з наступным:


Перасоўванне асноўнай навігацыі па Да загалоўка малюнка

Такім чынам, наступная рэч, якую мы збіраемся зрабіць, гэта перамясціць асноўную навігацыю ад свайго цяперашняга дома пад сцяг, каб над ім. Затым мы створым новую вобласць навігацыі ніжэй банэра. Вы ведаеце, толькі таму, што мы можам.

На гэты раз вам трэба скапіяваць header.php з бацькоўскай тэмы ў вашу дзіцячай тэму і адкрыць дзіцячую версію ў рэдактары.

Выберыце код з пачатку:

Гэта адна з самых цікавых рэчаў пра Twenty Thirteen, усе гэтыя вялікія каментары, каб дапамагчы вам знайсці, дзе вы знаходзіцеся. Прыміце да ведама і зрабіць тое ж самае ў сваіх тэмах, так што людзі, якія прыходзяць ззаду вы можаце знайсці свой шлях у вашых тэмах.

12-bwwp_7-move-header

Выразаць гэты код, і ўстаўце яго над <header class="homelink"> радка. Пераканайцеся, што вы трымаеце яго ўнутры </div>.

12-bwwp_7-move-header_2

Захавайце яго і абновіце апублікаваны выгляд вашага сайта, так што вы можаце ўбачыць змены:

13-bwwp_7-move-header-2

Звярніце ўвагу на тое, як банэр фота трохі карацей, чым гэта было, і разрыў паміж банэрам і загалоўкам старонкі трохі шырокім. Калі мы правяраем яго ў інспектара мы можам бачыць, што загаловак падзелу застаецца на той жа вышыні. Што адбываецца ў тым, што малюнак загалоўка быць схавана нав, так што мы збіраемся, каб перамясціць малюнак ўніз адпаведна.

14-bwwp_7-move-header-3

Такім чынам, каб зрабіць гэта, мы падправіць крыху CSS. Сапраўды гэтак жа, як мы рабілі ў папярэднім ўроку, праверце код, пакуль вы не знойдзеце гэта:

15-bwwp_7-move-header-4

Прычына, чаму мы змясцілі селектар цела ў з .site-header Выходным-загалоўкам, каб павялічыць спецыфічнасць CSS. Без яго мы маглі б паставіць код у табліцы стыляў і ня бачыць вынікі, якія мы хочам, таму што CSS для .site-header ўсталёўваюцца ў іншым месцы ў тэме, і яна прымае прыярытэт (прыходзіць пасля таго, як табліца стыляў у каскадзе). Наша даданне тэг цела робіць CSS больш канкрэтным і азначае, што ён мае прыярытэт, і ў якасці такога сайта будзе адлюстроўваць нашы змены.

16-bwwp_7-move-header-5b

Зэканоміць на сайт і абнавіць апублікаваны сайт!

16-bwwp_7-move-header-5c

Гледзячы Добра!


Даданне старонкі Апісанне да нашага шаблонаў старонак з дапамогай карыстацкіх палёў

Нарэшце, апошняе, што мы збіраемся зрабіць, гэта змяніць наш шаблон page.php, каб дазволіць нам дадаць у полі апісання старонкі пад загалоўкам старонкі. Мы будзем рабіць гэта з дапамогай карыстацкіх палёў (гл Кодэкса для больш падрабязнай інфармацыі пра тыя).

Мы пачнем з наладжваць нашага карыстацкага поля на нашай старонцы Паслугі.

Спачатку вы будзеце, верагодна, прыйдзецца змяніць Параметры экрана, каб пераканацца, што ў вас ёсць доступ да панэлі наладжвальных палёў, пераканайцеся, што ўсталяваны сцяжок Карыстальніцкія палі:

17-bwwp_7-custom-fields

Гэта адкрывае новую панэль ніжэй рэдактара старонак. Націсніце Enter Стварыць, каб стварыць новае карыстацкае поле і пакласці «апісанне старонкі» у поле Імя і ўвядзіце апісанне вашай старонкі ў поле Значэнне.

18-bwwp_7-custom-fields-2

Цяпер мы зрабілі, што нам трэба дадаць код у наш шаблон старонкі, таму скапіруйце page.php з бацькоўскай тэмы ў нашым каталогу дзіцячай тэме і адкрыць page.php ў даччынай тэмы ў нашым рэдактары. Мы змяшчаем гэты код у шаблоне пасля 1-га ўзроўню загалоўка (<h1>) і да канца загалоўка артыкула.

19-bwwp_7-custom-fields-3

Мы атрымалі код, мы выкарыстоўвалі для гэтай старонкі са старонкі ў Codex на карыстацкіх палёў - знайдзіце профіль Функцыі шаблону - мы проста выгружаны іх «key» з нашымі, якая з'яўляецца «page description». Захаваць і загрузіць файл і абновіце апублікаваную старонку:

20-bwwp_7-custom-fields-5

Там вы ідзяце, зародкі шаблонаў рэдагавання тэмы.


выснову

Зарыентавацца вакол шаблонаў тэмы можа быць трохі страшным, на шчасце, пачынаючы з тэмы, як дваццаць Трынаццаць сапраўды карысны старт з-за таго, як добра прокомментірован гэта паўсюль.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.