How to Create Your Own Wordpress Theme Как создать собственную тему Wordpress

Have you ever wanted to create your own custom wordpress theme? Вы никогда не хотели бы создавать свои собственные темы для Wordpress? I’ll show you how to start learning to hack away at your own WP theme in this tutorial in just a matter of minutes… Я покажу вам, как начать учиться за взломать на свой страх WP тема в этом учебнике всего несколько минут ...

This is the second installment in the Это уже второй взнос в Managing Wordpress More Effectively Series Управляющий Wordpress более эффективно серии - so you can get control of your blog and wring every last bit out of your content and visitors, saving you time and making you more money! - Так что вы можете получить контроль над вашим блогом и скручивать каждую последнюю разрядные из Вашего содержания и посетителей, экономя Ваше время и сделать вам больше денег!

If you’re a regular reader of this blog, you might notice that JTPratt’s Blogging Mistakes now has a new theme! Если вы регулярный читатель этого блога, вы можете заметить, что JTPratt в блог Ошибки теперь имеет новую тему! I think that a blog grows with the blogger, and the biggest mistake you can make is not modifying your blog to display your progress. Я думаю, что блог растет вместе с блоггером, и самая большая ошибка вы можете сделать, не изменив свой блог для отображения прогресса. I started out in 2007 with a really nice theme (Prosense), because it did most of what I wanted and looked professional. Я начал в 2007 году с очень приятные темы (Prosense), потому что он сделал большую часть того, что я хотел, и с нетерпением профессионала. But I hacked and hacked and hacked it some more to slowly get rid of things I didn’t like. Но я взломал и взломали и взломали ее несколько медленнее, чтобы избавиться от вещей мне не нравятся. Finally - I just had to say enough is enough and create my own Wordpress theme just exactly the way I wanted it. И наконец - я просто был бы сказать, хватит и создать мою собственную тему Wordpress просто именно так, как я хотел ее.

Wordpress Theme Hacking Wordpress тема взлома

If you’re curious and you know some HTML and CSS (even just enough to be dangerous) this guide was made for you. Если вы любопытны, и вы знаете, некоторые HTML и CSS (даже просто достаточно, чтобы быть опасным), это руководство было сделано для вас. This isn’ta definitive guide or anything, but it will get you started and I’m sure it will give you some good ideas to create your own “custom Wordpress theme”. Это не окончательное руководство или ничего, но она поможет вам началась, и я уверен, что она даст вам некоторые хорошие идеи для создания ваших собственных "обычай Wordpress темы". This is the “How to Create Your Own Wordpress Theme” tutorial, or “How to Hack Wordpress Themes”. Это "Как создать свой собственный Wordpress Тема" учебник, или "Как Hack Wordpress Темы". The first thing you need to do is get the Первое, что вам нужно сделать, это получить Theme Test Drive Тема Тест-драйв plugin. плагин. I used this plugin for two weeks, so I could hack and test my new theme to death before putting it live. Я использовал этот плагин в течение двух недель, так что я могла бы взломать и проверить мою новую тему смерти до сдачи его жизни. You see, it allows you to set a theme that only the admin will see when logged into the Wordpress. Вы видите, она позволяет задать тему, что только администратор увидит, когда вход в Wordpress. So as long as you’re logged in, you will see the new custom theme you’re building but all your visitors will see the regular one. Поэтому до тех пор, как вы вошли в систему, вы увидите новый пользовательский темы Вы здание, но и все ваши посетители увидят регулярный характер.

Creating Your Own WP Theme from a Copy Создание собственного WP тема с копией

Now login to your web site in FTP and download the theme you’re using now to your desktop. Теперь для входа в ваш веб-сайт на FTP и скачать темы вы пользуетесь в настоящее время на Вашем рабочем столе. Give the folder a unique name like “custom-theme” or something. Укажите папку уникальное название как "пользовательские-тему" или что-то. I’m going to show you how to create your own theme by starting to modify a second copy of the one you’re currently using (without anyone but you knowing about it). Я собираюсь показать вам, как создать свою собственную тему, начав изменять вторую копию одной вы используете (без никого, но вы зная о нем). Now, using Notepad (or any text editor) open the “style.css” file. Теперь, с помощью Блокнота (или любого текстового редактора) открыть "style.css" файл. At the top of the file are some comment lines. В верхней части файла имеют некоторые замечания линий. When you go to “Presentation -> Themes” in your Wordpress dashboard, the titles and descriptions of the themes you have installed come from the “style.css” file of those themes. Когда вы идете в "Представление -> Темы" в ваш Wordpress приборной доски, названия и описания темы, вы устанавливали из "style.css" файл из этих тем. The style file you just opened should already have comments like this as the first few lines like this: Стиль файл, который вы только что открыли уже есть комментарии, как этот, как первые несколько строк, как это:

 /* Theme Name: JTPratts Custom Theme Theme URI: http://www.jtpratt.com Description: No nonsense custom theme developed in house. Author: JTPratt's Blogging Mistakes Author URI: http://www.jtpratt.com 

Modify all those lines with your own details, delete the “screenshot.png” file from the folder, and then upload the entire folder back to your theme directory in FTP. Изменить все эти линии с помощью собственных деталей, удалите "screenshot.png" файл из папки, а затем загрузить всю папку обратно в вашу тему в каталоге FTP. If you have a graphics editor, you could instead open the screenshot file and modify it to go with your theme. Если у вас есть графический редактор, вы могли бы вместо этого открыть скриншот файл, а затем изменять его идти с вашей теме. I created a custom one so I could tell my backup from my live one like this: Я создал один обычай так что я мог бы рассказать мою резервного копирования от моего жить один, как это:

Once you’ve uploaded the folder to your theme directory, go back to your WP dashboard and “Presentation -> Themes” tab. После того как вы загрузили папки для вашей теме каталога, вернитесь к вашей РГ приборную панель и "Представление -> Темы" на вкладке. Your new theme should now be an option. Ваша новая тема должна быть одним из вариантов. If you also created a “screenshot.png” (it must be named exactly that) and uploaded it in the folder too - the new picture of your theme will show up as well as in my example above. Если вы создали "screenshot.png" (он должен называться именно этого) и загрузили его в папке слишком - новая картина вашей теме будет отображаться, а также в моем примере выше.

How to Test a Wordpress Theme as Admin Only Как испытаний Тема Wordpress в качестве администратора Только

Now, enable the “Theme Test Drive” plugin you downloaded and installed if you haven’t already. Теперь, позволит "Тема тест-драйв" плагин, если вы скачали и установили, если Вы еще не сделали этого. Go to “Presentation -> Theme Test drive”, choose your new theme from the dropdown and click the “enable” button. Переход на "Представление -> Тема Тест-драйв", выбирать вашу новую тему из выпадающего и нажмите кнопку "включить" кнопку.

That’s it - now your ready to start theme hacking! Вот она - теперь ваш готовы приступить к теме взлома! Go to the “Presentation -> Theme Editor” tab and in the drop down menu your “current” theme will be listed like this: Переход на "Представление -> Тема редактор" и в выпадающем меню вашей "текущим" тему, будут перечислены так:

That’s my current theme everyone sees. Вот мои текущие темы все видит. Before I start editing the test theme only I will see as admin I need to switch to that one in the theme editor like this: Прежде чем начать редактирование теста тему я только увидят, как админ мне нужно переключиться на что один в тему редактор подобно этому:

Now in the right hand list of files, find the one labeled “Main Index” and click on it. Теперь в правой руке список файлов, найти один ярлык "Главная" и щелкните по нему. 10 or 20 lines in you should see something like this: 10 или 20 строк в вас должны увидеть нечто вроде этого:

 <div class="entry"> <?php the_content('Read the rest of this entry &raquo;'); ?> </div> 

Right after the div entry tag add a bunch of random text, save the file, and in another tab or browser window load up your blog home page. Сразу после Div вступление тега добавить кучу случайных текст, сохраните файл, а в другой вкладке окна браузера или загрузить свой блог главную страницу. Does it contain the random text? Есть ли содержать случайных текстов? If it does - great! Если оно - прекрасно! If not, go back and follow the directions again to see what you did wrong. Если нет, вернитесь и следуйте указаниям вновь, чтобы узнать, что вы сделали неправильно. Now I don’t know how much HTML and CSS code you know - so if you need a reference be sure to visit and bookmark Теперь я не знаю, сколько HTML и CSS код, который вы знаете - поэтому, если вам нужна ссылка не забудьте посетить и закладки W3Schools which is a free online resource for web coding. , которая представляет собой бесплатную онлайн ресурс для веб-кодирования. They have a reference page for each and every tag, and many free tutorials. Они имеют ссылки на страницы каждого тега, и многие учебники бесплатно.

What is the “Wordpress Loop”? Что такое "Wordpress Loop"?

Depending on how much HTML and CSS code you know (and are willing to mess with) now you remove the random text and start messing around with your theme. В зависимости от того, сколько HTML и CSS код, который вы знаете (и готовы к столовой с) в настоящее время удаления случайных текстов и начать баловаться вокруг с вашей теме. Remember - only you can see the changes (while you’re logged in as admin), and you can even make major changes to the sidebar, header, and footer. Помните - только вы можете видеть изменения (в то время как вы вошли в систему в качестве администратора), и вы даже можете внести серьезные изменения в боковой, верхний и нижний колонтитулы. The code I just showed you is what puts the posts on the main page. Код я просто показал вам, какие ставит посты на главной странице. Not the titles or meta information, just the post content itself. Не названия или мета-информации, только после самого содержания. You home page (Main Index) contains a “loop”. Вы домашняя страница (Главная) содержит "петля". It’s called the “Wordpress loop” because by default your Main Index shows 10 posts. Она называется "Wordpress петля", потому что по умолчанию ваши главные Индекс показывает 10 должностей. The PHP code for the look basically says (in English) “once you find the first posts, do these things over and over until you reach the tenth post. PHP код смотреть в основном говорит (в Английский) ", как только вы найдете первые должности, делать это снова и снова, пока не достигнет десятого должностей. So if you put something “in the loop” (like a picture or text) is would display on your Main Index page 10 times before or afer the content for each post beginning with the first until it reached the last. Так что если вы создали нечто "в цикле" (как изображение или текст) будет отображаться на главной странице индекса в 10 раз до или afer контента для каждой должности, начиная с первого до тех пор, пока она достигший последней.

I’m telling you this because if you want a graphic at the top of your page before the posts (like mine) you have to place it “before the loop”. Я говорю вам это потому, что, если вы хотите графические в верхней части страницы до должности (например, в шахте) вы должны поместить его "до петли". If you want it after all the posts, like the 336×280 ad at the bottom of my Main Index page, it has to go “after the loop”. Если вы хотите его после всех должностей, как и 336 × 280 объявлений в нижней части моего Главная страница, она должна идти "после цикла". While EVERY theme is a bit different I this is what you look for: Хотя тема несколько иная Мне это то, что вы ищете:

 <?php if (have_posts()) : ?> <?php endwhile; ?> 

The Wordpress loop starts with the have_posts line and ends with the endwhile line. Wordpress цикл начинается с have_posts линии и заканчивается с endwhile линии. Before and after those 2 lines would be “before and after the loop”. До и после этих 2 строки будет "до и после фрагмента". Somewhere in between those 2 lines would be placing something “in the loop”. Где-то между этими 2 строки будет уделять-то "в цикле". I wanted to explain this to you before you started hacking around and wondered why your changes showed up in weird place. Я хотел бы объяснить это вам, прежде чем вы начали взлом вокруг, и спрашивает, почему ваши изменения показали в странные места. For practice, try adding some kind of code or script for an ad (or just a linked image if you know the code) before or after the loop on your Main index page. На практике, попробуйте добавить какую-код или скрипт для объявлений (или просто связаны образ, если вы знаете код) перед и после фрагмента на главной странице индекса. If you’re new at this it’s good practice, and you should be figuring out why so many of us hack our theme by hand - it’s just impossible to have a plugin for every little modification you want to make. Если Вы новичок в этом Это хорошая практика, и вы должны узнать, почему столь многие из нас взломать нашу тему на руку - это просто невозможно иметь плагин для каждого мало модификации вы хотите сделать.

Your First Wordpress Theme Hack Ваша первая тема Wordpress Hack

Now I’m going to teach you your first real ‘hack’. Теперь я собираюсь учить вас ваш первый настоящий "взломать". Let’s say you want to show some kind of text, image, or ad further down your Main Index page, but not before or after “the loop” and not after all 10 posts. Допустим, вы хотите показать своего рода текст, изображение, или объявление дальше ваши Главная страница, но не до или после "петля", а не после того, как все 10 должностей. You have to insert a line of code to tell “the loop” to display it only once (and where) Вы должны добавить строку кода сказать, "петля", чтобы показать его только один раз (и где)

 <?php if ($count==2) { include('main-index-ad.php'); } ?> <?php $count = $count + 1; ?> <?php endwhile; ?> 

The first line is the one you copy and paste into your Main Index file, put it before the count and endwhile lines just like in my example. Первая линия является одной скопировать и вставить в ваш Главная файл, ставит его перед рассчитывать и endwhile строк точно так же, как в моем примере. That line of PHP code says to the loop (in English) “while you counting, after the second post print the contents of the main-index-ad.php file”. Эта строка кода PHP говорит петля (в Английский) "при подсчете, после второго поста распечатать содержимое основного индекса-ad.php файл". This means of course, you have to create a file called ‘main-index-ad.php’ (or whatever you want to call it) and add the script or code or whatever you want to put after the second post. Это означает, конечно, вы должны создать файл с именем "основного индекса-ad.php" (или что вы хотите назвать его) и добавьте сценарий или код, или что вы хотите поставить после второй должностью. Make the change in your Main Index file and “save”. Сделать изменения в вашей Главная файл и "спасти". Upload the main-index-ad.php file to your theme folder, and then reload your home page to test your very first theme hack. Загрузить основной индекс-ad.php файл на тему папку, а затем перезагрузить вашу домашнюю страницу для проверки вашей самой первой теме взломать. Did it work? Ли он работать?

So far, we’ve been working on only the “Main Index” or index.php file for theme hacks. До сих пор мы работали только на "Главная" или index.php файл на тему хаки. Although every theme is a bit different, nearly every one has a Main Index, a Single Post, a Page file, 404 Template (file not found), Sidebar (sometimes 2), Comments, and Archives page. Хотя каждая тема несколько иная, почти каждый имеет Главная, один пост, файл, 404 шаблонов (файл не найден), боковой (иногда 2), комментарии и архивов страницу. Some themes also have a Category page, but if they don’t the Archives.php page will be used for category pages too. Некоторые темы, также имеют Категория страница, но если они не Archives.php страница будет использоваться для категории страниц тоже. I point this out because if you ad something to the homepage, you might also want it to appear on single posts, or pages, or category pages. Я указать на это, потому что если вы-то объявление на главной странице, можно также хотим, чтобы появиться на одной должности, или страниц, или категория страницах. Like in the previous example you might consider making several files with ads, text, or images and uploading them to your theme directory. Как и в предыдущем примере вы могли бы рассмотреть возможность несколько файлов с объявлениями, текст или изображения, и загружать их в ваш каталог теме. You can use the same line of code in the previous example to include any file before or after the loop. Вы можете использовать те же строки кода в предыдущем примере включить любой файл перед и после фрагмента. Just remove the count statement like this: Просто удалите кол выступление так:

 <?php include('name-of-my-file.php'); ?> 

It’s much smarter to add things to your pages with a file like this if it’s going to be in multiple places. Это гораздо умнее, чтобы добавить вещи для ваших страниц, как этот файл, если он собирается быть в нескольких местах. Otherwise, you have to manually modify multiple files. В противном случае, вам придется вручную изменить несколько файлов. If you do it like this, in the future when you need to change that content, you just edit the one file. Если вы делаете это так, в будущем, когда вам необходимо изменить содержание, вы просто изменить один файл.

Your Second Wordpress Theme Hack Ваша вторая Wordpress тема Hack

For quite a while I had wanted to add the comment count under my post titles on my index page where they would be linked to actually post a comment. На некоторое время я хотел бы добавить комментарий под моим кол должности глав на моем индексе страницы, где они будут связаны с фактически комментировать. Oh - an I wanted a little comment graphic beside them too. О - Я хотел немного прокомментировать графическое рядом с ним тоже. Basically “inside the loop” you just add the following PHP code somewhere are your post title: В основном "в цикле" Вы просто добавить следующий код PHP-нибудь ваши посты название:

 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> <?php $comments_img_link= '<img src="/wp-content/images/comments-icon.gif"  title="comments" alt="comments" />'; comments_popup_link($comments_img_link .' Comments(0)', $comments_img_link .' Comments(1)', $comments_img_link . '  Comments(%)');?> 

The first line is the code you need to find “in the loop” which prints out the post title heading. Первая строка кода нужно найти "в цикле", который выводит название заголовком поста. Your may look slightly different, just look for “the_title” in the line. Ваш может выглядеть немного отличается, просто смотреть на "the_title" в строке. Right after that paste the two lines in my example. Правой после этого вставьте две строки в моем примере. You’ll meed to modify the first line with the name of and correct path to your comment icon. Вы награда изменить первую строку с именем и правильный путь на ваш комментарий значок. You’ll need to create one or find a free suitable one on the web. Вам нужно будет создать один или найти подходящую бесплатно в Интернете.

Adding a plugin to do the Hacking for You Добавление плагин делать Хакинг для Вас

There’s still a few things that Wordpress “won’t do” what I prefer to have on my blog that are easily added with a plugin. Там еще несколько вещей, которые Wordpress "не делать" то, что я предпочитаю иметь в моем блоге, что можно легко добавить с плагином. For most of these things I use Для большинства из этих вещей я использую Lester Chan’s Wordpress Plugins Лестер Чан в Wordpress Плагины . I use WP-PageNavi for the navigation at the bottom of my home page, and replaced the horrible “previous” and “next” default wordpress navigation links with it. Я использую WP-PageNavi для навигации в нижней части моей домашней странице, и заменить попало "Previous" и "Next" по умолчанию Wordpress навигационных связей с ней. I use WP-PostRatings for the star voting on each post. Я использую WP-PostRatings за звездой голосования по каждой должности. WP-Post Views displays the post count for each post, in addition to the “most viewed” posts in my sidebar. WP-Post Просмотров дисплеи после подсчета для каждой должности, в дополнение к "Самые популярные" должностей в моей панели. The WP-Print plugin is for the printer friendly page link for posts. WP-Принт плагин предназначен для печати странице ссылку на должности. With all these Lester Chan Wordpress plugins, once you install and activate them, all you have to do is copy and paste the line of PHP code on the pages and places you want the plugin to display something. Что все это Чен Лестеру Wordpress плагин, после установки и активации их, все, что вам нужно сделать, это скопировать и вставить строку кода на PHP-страниц и места вы хотите плагин для отображения нибудь. You get that code on the documentation “usage” page for each plugin on Lester’s site. Вы получите этот код по документации "использование" для каждого по Плагин Лестер сайта. After doing the first two hacks, it should be pretty easy to add the code to your template pages for the plugin hacks to work. После делаем первые два хаки, она должна быть довольно легко добавить код в шаблон страницы для плагина хаки на работу.

In addition to the Lester Chan plugins, on my pages after the posts on my main page you’ll see some options for visitor’s like “subscribe to this feed”, “email this”, “digg this”, etc. These features actually come from Feedburner. В дополнение к Лестер Чан плагины, на моих страницах после должности на моей главной странице вы увидите несколько вариантов для посетителей, как "оформить подписку на этот канал", "Отправить", "Digg этого" и т.д. Эти функции , фактически поступает из Feedburner. I know on a lot sites I see people adding a “social” plugin to display a bazillion options for all the tagging sites. Я знаю о многих сайтах я вижу людей добавить "социальное" плагин для отображения bazillion варианты для всех меток сайтов. I use Feedburner for my feed (like most bloggers do), and they have a “Feedburner Feedsmith” plugin that will add that “flare” after your posts - which I think have much more helpful options than any social plugin around. Я использую на Feedburner моя корма (как и большинство блоггеров делать), и они "Feedburner Feedsmith" плагин, который будет добавить, что "ракету" после вашей должности - что я думаю, гораздо более полезными, чем любые варианты социальной плагин вокруг. If you download and enable that plugin from Feedburner, you have to add the provided PHP code to your template as well. Если вы загружаете и дать, что плагин от Feedburner, вам придется добавить условии PHP код в свой шаблон, а.

Hacking Your Theme Stylesheet Хакинг вашей теме стилей

Your stylesheet contains all properties of all the colors and sizes of items on your blog. Ваш стиль содержит все свойства всех цветов и размеров предметов на вашем блоге. It has background and link colors, font sizes, bold, italics, you name it. Она фона и связь цвета, размера шрифта, полужирный, курсив, то назовите его. In your dashboard theme editor click on “Stylesheet” to bring up this file. В панели инструментов редактора теме нажмите кнопку "стилей", чтобы открыть этот файл. It’s the same one you added the theme properties to on your computer in a text editor at the very beginning of this article. Это же вы добавили тему свойства, на вашем компьютере в текстовом редакторе, в самом начале этой статьи. YOUR stylesheet is more than likely going to be completely different than mine, and editing it won’t be as easy as the earlier copy and paste hacks. ВАШ стилей является более вероятным будет полностью отличаться от моей, и редактирование он не будет таким же легким, как раньше, скопируйте и вставьте хаки. What you need to know is that every web page is a “document” that has “elements”. Что нужно знать, что каждая веб-страница представляет собой "документ", которое имеет "элементы". The elements are setup in a “box model”, and items like div’s, paragraphs (p’s), spans, the body, headings (h’s), blockquote, and list tags (ul, ol, li or underordered list, ordered list, and list) are all “boxes”. Элементы установка в "окне модель", и предметы, как Div в пунктах (P's), охватывает, орган, заголовки (в час), Цитата, а также список тегов (UL, OL, Li или underordered список, упорядоченный список, а список), все "коробки". In CSS code everything “nests” and “properties” can be assigned to elements at any level. В CSS код все "гнезда" и "свойства" может быть отнесен к элементам на любом уровне. Here’sa diagram example: Вот пример диаграммы:

That image is an example of how all the boxes would look if you drew them all out. Это изображение является примером того, как все поля будут смотреть, если вы обратили все из них. Here’s how those boxes look as (well formatted) HTML code: Вот как эти ящики с нетерпением, как (хорошо форматированный) HTML код:

 <body> <div> <p> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </p> </div> </body> 

I wanted you to visualize this before you started stylesheet hacking so you would know about how nesting works. Я хотел вам визуализировать это, прежде чем вы начали стилей взлома, чтобы вы знали о том, как работает гнездования. If you change the (font) “color” to grey at the “body” level all the text on the page will be grey. Если вы изменяете (шрифт) "цвета" серый в "тело" уровне всего текста на странице, будет серым. If you also change the font color to green at the “li” or list item level, all the text on the page will be grey except the list items, which will be green. Если вы также изменить шрифт, цвет на зеленый на "Ли", или элемент списка уровне, весь текст на странице будет серым, за исключением списка предметов, которые будут зеленого цвета. If you change the paragraph or “p” font color to red, then both the P and UL text will be red, the LI text will be green, but the rest of the body and div text above those levels will still be grey. Если вы измените пункт, или "P" цвет шрифта на красный, тогда как С и UL текст будет красным, Л. И. текст будет зеленый, но на остальной части тела и Div текст выше этих уровней будет по-прежнему серо. This is called “inheritance”, and properties start at the highest level and stay that property until changed lower down the nesting chain. Это называется "наследование", и свойства начать на самом высоком уровне и пребывание этого имущества до тех пор, пока нижний изменили вниз цепь гнездовья.

The first thing you might want to hack is your link colors and properties. Первое, что вы можете взломать ваша ссылка цветов и свойств. There are sooooo many ways to change your links to make them stand out. Sooooo Есть много способов изменить вашу связь с тем чтобы они выделяются. A hyperlink is an “a” or anchor tag. Гиперссылку "а" или якорь метки. There are 3 states of a link which are normal, visited, and hover. Есть 3 говорится о связи, которые являются нормальными, посетили, и на режиме висения. Normal is what the color of the link is before you click it. Нормально то, что цвет ссылки, прежде чем нажать ее. Visited is the color of the link once you’ve visited it. Посетил это цвет ссылки, как только вы посетили его. And hover is the color of the link when your mouse goes over it. И наведите это цвет ссылки, когда мышь идет за ней. For all three of these states of a link you can change the color, text-decoration, background, and many other properties. Для всех трех из этих состояний ссылке вы можете изменять цвет, текст-декорации, фон, и многие другие свойства. In my stylesheet I have entries to change link properties for the entire body of all my pages like this: На мой стиль я отзывов изменить ссылку свойства для всего тела всех моих страницах, например:

 body a { color: #0033CC; text-decoration: none; } body a:visited { color: #003399; } body a:hover { text-decoration: underline; color: #003399; background: #000000; } 

As you see, you can change the color for the 3 different states of links, you can change the text decoration (for any state), or the background color (for any state). Как вы видите, вы можете изменить цвет для 3 различных состояний ссылки, вы можете изменить оформление текста (для любого государства), либо цвет фона (для любого государства). You can also leave any of these properties out. Вы также можете оставить любое из этих свойств OUT. For the text decoration property you could use any of these values: solid, underline, overline, line-through, none, dotted, or dashed. На имущество Текст украшения можно использовать любой из этих ценностей: твердый, подчеркиваю, overline, прямой путь, никто не пунктиром, или разбиты. While my code example above controls the link color for an entire body of a page, you can also change them at any level, like maybe your sidebar: Хотя мой код выше примере контроля связь цвет для всего тела страницы, вы также можете менять их на любом уровне, как может быть ваш боковая панель:

 #sidebar a:hover { text-decoration: underline; } 

Experiment by modifying the link colors in your stylesheet now. Эксперимент по изменению цвета ссылке в вашем стиль сейчас. Then experiment further by changing font sizes and colors. Затем эксперимент дальнейшее изменение размеров шрифтов и цветов. To find cool color schemes to change colors of text, links, or backgrounds Чтобы найти прохладное цветовые схемы для изменения цвета текста, ссылки, или происхождения Use this CSS color chart for reference Используйте этот цвет CSS таблица для ведения . It’s probably the best color chart I’ve seen in years, mainly because it is based on pantone colors and paint strip samples from a hardware store. Он, наверное, лучший цвет схему я видел в те годы, главным образом потому, что она основана на PANTONE цветов и красок полосу образцов из аппаратного хранения.

The last wordpress theme hack (in this article) I’ll show you is for headings. В последнем Wordpress тема взломать (в этой статье) я покажу вам по рубрикам. A heading is an “H” tag like <H1> <H2> <H3> <H4>, etc. Every post should have a (title) heading, and every widget or section in your sidebar has a heading. Раздел "Н" тег, как <h1> <h2> <h3> <H4> и т.д. Каждый пост должен был (название) статье, и каждый виджет или раздел в боковой панели в статье. As shown earlier in my diagram - a heading is a “box” and that box has properties, like background, padding, margin, (text) color, (link) color, border, border-style, and more. Как было показано ранее в моей схеме - раздел "окно" и о том, что поле имеет свойства, как и фон, обивка, маржа, (текст) цвет (ссылка) цвета, границы, пограничного стиле, и многое другое. By default in Wordpress the post headers are just linked text. По умолчанию в Wordpress должность заголовки просто связаны текста. While that’s ok, as you can see on my Main page and my post pages I prefer a black border, a background color, and some padding. Хотя это нормально, как вы можете видеть на моей главной страницы и страницы моего поста, я предпочитаю черную, цвет фона, и некоторые обивка. In my sidebar I gave the sections headings a background image, a bottom border, and some margines. В моей панели я дал разделы заголовками фоновое изображение, снизу границу, а некоторые margines. The list elements also have a bottom border. Список элементов, также нижней границе.

 #sidebar ul { margin-bottom:5px; padding-left:5px; } #sidebar .sidebar_left ul h2 { padding-bottom: 1px; border-bottom: solid 1px #999999; font-size: 1.1em; } #sidebar h2 { background: #B0E2FF  url('/wp-content/images/header-bkg.gif') no-repeat; padding-left: 7px; padding-bottom: 0px; } #sidebar .sidebar_right ul h2 { padding-bottom: 1px; border-bottom: solid 1px #999999; font-size: 1.1em; } 

In the code example above I showed you nearly all my sidebar stylesheet properties so you can get an idea of the many different ways you can customize a header and list item. В примере кода выше я показал вам почти все мои боковой панели свойств стилей, чтобы вы могли получить представление о многих различных способов можно настроить заголовок и пункт списка. You can see how I gave the sidebar H2 header a backround image instead of just a color. Вы можете увидеть, как я дал боковой H2 заголовка backround изображения вместо просто цвет. This the code I used to format the properties of the post headings: Этот код я использовал в формате свойства заголовка поста:

 .post h2 { background: #CCCCCC; border: 1px solid; border-color: #000000; padding-left: 10px; padding-right: 10px } 

Instead of just having linked text I gave my post headings a background color of grey, a solid 1 pixel black border, and some padding on the left and right sides. Вместо того чтобы просто связано текст я отдал свой пост Рубрики цвет серый, твердый 1 пиксель черного, а некоторые прокладки на левой и правой сторон. Now I think it’s much easier to see where one post ends an the next begins on my pages. Теперь я думаю, что гораздо легче увидеть, где заканчивается одна должность следующего начинается на моих страницах.

Use What You’ve Learned to Hack Your Theme More Используйте то, что вы научились взломать вашу тему больше

I’ve give you a way to hack away at your Wordpress theme without changing how your visitor’s see it. Я предоставляю вам способ взломать вне на ваш Wordpress тема без изменения, как ваши посетители увидеть. I’ve told you about the Wordpress loop, and how to add things before, after, and inside it. Я говорил вам о Wordpress петля, и как добавить вещи до, после и внутри нее. We hacked and added some PHP code, and then hacked our theme stylesheet to change properties to affect the layout and design of the page. Мы взломали и добавила некоторые PHP-код, а затем взломали нашу тему стилей для изменения свойств влияют на внешний вид и дизайн страницы. I can’t teach you everything you need to know to create your own entire custom theme in just one post - but I can get you started! Я не могу научить вас все, что вам нужно знать, чтобы создавать свои собственные пользовательские темы всего лишь один пост - но я могу вам разобраться! Now you know enough about Wordpress themes to be dangerous and customize your own. Теперь вы знаете достаточно о Wordpress темы, которые будут опасны и настроить свой собственный. Visit and bookmark Посетите и закладки W3Schools.com for your HTML and CSS reference needs. для ваших HTML и CSS ссылка потребностей. Research and read more articles explaining how to hack and customize your Wordpress theme further like the Научно-исследовательский и читать больше статей, объяснив, как взломать и настроить вашу тему Wordpress далее как tutorials at WPDesigner.com Обучение на WPDesigner.com .

Please comment if this article helped you, you had a question, or a great worpress theme hack or customization to add! Просьба прокомментировать, если эта статья помогла вам, у вас вопрос, или большой worpress тема взломать или настройки, чтобы добавить! I hope you found this information valuable - if so please feel free to bookmark, digg, and stumble this page! Я надеюсь, что вы обнаружили эту ценную информацию - если да, пожалуйста, не стесняйтесь закладки Digg, и спотыкаться на этой странице!

Tags: Теги: tutorial учебник , wordpress-hack Wordpress-Hack