Шпора Wordpress

Весь интерфейс находится в меню view

Показать/скрыть эксплорел Ctrl+k+b или просто перетянуть в редактор папку
Открытие файла по имени Ctrl+p
Все возможные команды Ctrl+Shift+p
Комментирование однострочный Ctrl+/, многострочный Ctrl+Alt+/
Множественные курсоры Ctrl+D (после выделения слова)
Дублирование строк Shift+Ctrl+G
Поиск и замена Ctrl+H

Установка плагина вордпресс. Сначала устанавливаем sublime package control

там копируем текст и в командной строке sublime добавляем его в консоли Ctrl+`

и у нас установится sublime package control, дальше уже нажимаем ctrl+shift+p у нас запустится окно с командами sublime и там мы вводим install и выбираем install Package

у нас появится целый список доступных плагинов которые можно установить и там уже выбираем что мы собираемся устанавливать.

посмотреть установленные плагины можно командой list Package

После установки плагина wordpress комбинации доступные.

<?php theloop — нарисует полностью цикл wordpress

Получить описание темы в файле css вводим theme_head

Настройки:

перенос по строкам «word_wrap»: «true» прописываем в файле настроек, по умолчанию там стоит auto

темы вордпресс должны состоять минимум из двух файлов index.php и style.css

Добавление screenshot к теме »

сделайте скриншот вашей темы и добавьте файл в папку с вашей темой с названием screenshot.phg и у вас появится в самом вордпрессе скрин вашей темы

Небольшой примерчик использования функций-тегов вордпресс »

файл index.php темы

<html>

<head>

</head>

<body>

<?php bloginfo("description"); ?>

<br>

<a href="<?php echo home_url(); ?>">Главная страница</a>

<br>

<?php bloginfo("template_url"); ?>

<br>

<?php bloginfo("stylesheet_url"); ?>

<hr>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php // the_content(); ?>

<!-- выводит цитату,

если ее нету, то просто n символов -->

<?php the_excerpt(); ?>

<a href="<?php the_permalink(); ?>">Читать полностью</a>

<?php endwhile; ?>

<?php else: ?>

<?php endif; ?>

<?php

// в $post содержатся данные последней записи

var_dump($post);

echo "<br><br>";

// в $posts содержатся данные всех постов

// которые должны вывестись на странице

// с учетом пагинации - сколько их должно

// выводится на страницу

var_dump($posts);

echo "<br><br>";

foreach ($posts as $key => $value) {

echo "<h3>".$value->post_title."</h3>";

echo $value->post_excerpt."<br>";

echo $value->post_content."<br>";

}

</body>

</html>

получить путь к папке с темой wordpress »

используем функцию

1	<?php bloginfo('template_url'); ?>/

и добавляем в конце слешь, например подключить css мы можем следующим образом

1	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/style.css">

и javaScript от так

1	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/test.js">

Файлы вордпресс темы »

header.php — шапки
footer.php — подвал
sidebar.php — боковая панель
function.php — файл функций обеспечивающий работу нашей темы

Скилет wordpress »

Просто приведу файлы, в них все закомментировано

функции wordpress которые использовали:

get_header(),get_sidebar(), get_footer() — функции подключают стандартные файлы, если без параметров, а с параметрами хз. наверно те что передаем
wp_head(); — подключается в файле header.php, ее нужно подключать перед тегом </head>, этот файл вроде за плагины отвечает или хз.
wp_footer(); — подключается в файле footer.php в самом конце, как бы в самом конце перед </body>, а этот файл вроде подключает панель администратора, что появляется вверху когда мы авторизованы на сайте
bloginfo(‘name’);/*название сайта*/ wp_title(); /*название страницы*/ ?> — эти функции возвращают название сайта и wp_title — название для страниц, для главноей страницы названия не будет.
home_url(); /*ссылка на главную страницу сайта*/ ссылка на гавную страницу сайта

index.php

<?php get_header(); ?>

<div class="content">content

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

style.css

Theme Name: Theme Name

Theme URI: http://example.com/

Description: Description

Version: 1.0

Author: Your Name

Author URI: http://example.com/

Tags: one, two

/*Зброс*/

margin: 0px;

padding: 0px;

}

body{

font-size: 25px;

margin:0px;

padding: 0px;

/*background: #113333;*/

}

.container{

background: #00ff00;

max-width: 900px;

margin: 10px auto;

}

.header{

background: #ff0000;

height: 150px;

}

.nav{

background: #f0f;

}

.content{

background: #00f;

min-height: 200px;

width: 70%;

float: left;

}

.right-menu{

background: #ccc;

height: 100px;

width: 30%;

float: right;

}

.footer{

background: #f00;

height: 100px;

clear: both;

}

header.php

<html>

<head>

<?php wp_head(); ?>

</head>

<body>

<a href="<?php home_url(); /*ссылка на главную страницу сайта*/ ?>">Главная</a>

</div>

footer.php

<div class="footer">footer</div>

</div>

<?php wp_footer(); ?>

</body>

</html>

sidebar.php

1	<div class="right-menu">right-menu</div>

И на выходе у нас получится от такая картинка

Подключение файлов CSS и скриптов Javascritp в wordpress »

Используемые функции

wp_enqueue_scripts — стандартная функция вордпресс на которую мы цепляем через хук свою собственную функцию для подключения скприптов
wp_enqueue_script и wp_enqueue_style функции вызываются из своей собсвтенной функции и в качестве параметров передаются названия файлов и путь к подключаемым файлам (wp_enqueue_style(‘style’, get_template_directory_uri().’/style.css’);)
get_template_directory_uri() — возвращает путь в виде переменной к папке с темой
add_action — так называемый хук действий.

Подключать файлы CSS и JavaScript нужно псециальным способом, чтобы небыло конфликтов, для этого создаем файл functions.php — это файл в котором создаются функции для нашей темы. Дальше в этом файле создаем хук действия add_action для функции wordpress wp_enqueue_scripts и к ней добавляем нашу собственную функцию под названием load_style_script

Таким способом можно подключать несколько скриптов и файлов css вызывав соответственно несколько раз для каждого скрипта функции wp_enqueue_script или wp_enqueue_style 🙂

вот файл function.php

<?php

/**

* загружаемые стили и скрипты

**/

//наша собственная функция

function load_style_script(){

// специальная функция для подключения скриптов

// где myscript - это название скрипта, а

// get_template_directory_uri().'/js/myscript.js' - это

// путь к скрипту

wp_enqueue_script('myscript', get_template_directory_uri().'/js/myscript.js');

// специальная функция для подключения css

// аналогично, что означают параметры смотрим выше.

wp_enqueue_style('style', get_template_directory_uri().'/style.css');

}

/**

* загружаем стили и скрипты

**/

// это наш собственный хук, который на функцию вордпресс

// wp_enqueue_scripts цепляет нашу собственную функцию load_style_script

add_action('wp_enqueue_scripts','load_style_script');

вот скрин где находятся наши файлы

вот что у нас в файле header.php

<html>

<head>

<?php wp_head(); ?>

</head>

<body>

<a href="<?php home_url(); /*ссылка на главную страницу сайта*/ ?>">Главная</a>

</div>

как видно ни скрипты ни другие файлы у нас не подключаются, если мы глянем на исходный html код, страницы, то там у нас все подключилось

Вот так в общем подключается.

Добавление поддержики миниатюр в теме wordpress »

в файле functions.php вашей темы добавте следующий код

/**

* Добавление миниатюры к теме

**/

add_theme_support('post-thumbnails');

все и у вас появится в админке форма для добавления миниатюры

Добавляет возможность создания меню в теме »

добавляем следующий код в файл functions.php

/**

* регистрация меню

**/

// первый параметр идентификатор, второй описание меню

register_nav_menu('menu','Меню');

и у нас появляется подпункт «меню» в админской панели, где мы можем редактировать наше меню

Шпора WordPress

Добавить комментарий Отменить ответ