- Расширенный — Название, крупное изображение, анонс, некоторые ссылки
- Компактный — Название, маленькое изображение
Причиной тому был тот факт, что некоторым пользователям удобнее, когда на страничке отображается несколько последних записей и их краткое содержание, а некоторым — большое количество записей, без анонса.
В таком случае необходимо каждому пользователю дать возможность переключать вид так, как ему будет удобно.
Общий алгоритм следующий:
- При загрузке страницы проверяется состояние параметра style в базе
- В зависимости от параметра посты выводятся в том или ином формате
- При нажатии на флажок переключения вида запускается функция getPage
- Функция getPage принимает значение переключателя и отправляет данные на обработку и ОЖИДАЕТ ЗАВЕРШЕНИЯ ОБРАБОТКИ
- Файл style_updater.php принимает данные и обновляет Базу данных.
- После этого функция getPage перезагрузит страницу
Пример, вы можете протестировать на моём сайте — game.tobefun.org (Переключатель доступен после авторизации)
Итак, как же это реализовать?
Изменение Базы данных
Чтобы выбранный стиль сохранялся для каждого пользователя, необходимо в базе данных, в таблицу wp-user добавить ещё одно поле ‘style’ принимающее значения 1 или 0. (По умолчанию 0).
Изменение главного цикла
В главном цикле вашего шаблона, после
<?php if ( have_posts() ) : ?>
Замените ваш цикл на следующий код
<?php $current_user = wp_get_current_user(); // Получение данных авторизованного пользователя if ( 1 == $current_user->style ) { // Если в базе данных значение параметра style = 1 while ( have_posts() ) : the_post(); // Запустить цикл get_template_part( 'content', 'min' ); // Где каждая запись будут формироваться файлом content-min.php endwhile; } // И закончить цикл else { // Если значение параметра style != 1 while ( have_posts() ) : the_post(); // Запустить цикл get_template_part( 'content', 'max' ); // Где каждая запись будут формироваться файлом content-max.php endwhile; } // И закончить цикл ?>
Создание content-min.php и content-max.php
content-min.php и content-max.php формируют исключительно один пост и поскольку они стоят в цикле то запускаются многократно.
Пример:
<a href="<?php the_permalink(); ?>"> <div class="min"> <h3><?php the_title(); ?></h3> <div class="image"> <?php $thumb = get_post_thumbnail_id(); // Получение ID изображения установленного как миниатюра $img_url = wp_get_attachment_url( $thumb,'full' ); // Получение ссылки на полный формат изображения $image = aq_resize( $img_url, 170, 120, true ); // Уменьшение изображения до размеров 170х120. ?> <img width="170px" height="120px" src="<?php echo $image ?>"/> </div></div> </a>
Данный код будет замускаться столько раз, сколько записей нужно будет отобразить на странице.
Функция aq_resize()
Создайте в корне вашей темы файл aq_resizer.php со следующим содержанием:
<?php /** * Title : Aqua Resizer * Description : Resizes WordPress images on the fly * Version : 1.1.3 * Author : Syamil MJ * Author URI : http://aquagraphite.com * License : WTFPL - http://sam.zoy.org/wtfpl/ * Documentation : https://github.com/sy4mil/Aqua-Resizer/ * * @param string $url - (required) must be uploaded using wp media uploader * @param int $width - (required) * @param int $height - (optional) * @param bool $crop - (optional) default to soft crop * @param bool $single - (optional) returns an array if false * @uses wp_upload_dir() * @uses image_resize_dimensions() * @uses image_resize() * * @return str|array */ function aq_resize( $url, $width, $height = null, $crop = null, $single = true ) { //validate inputs if(!$url OR !$width ) return false; //define upload path & dir $upload_info = wp_upload_dir(); $upload_dir = $upload_info['basedir']; $upload_url = $upload_info['baseurl']; //check if $img_url is local if(strpos( $url, home_url() ) === false) return false; //define path of image $rel_path = str_replace( $upload_url, '', $url); $img_path = $upload_dir . $rel_path; //check if img path exists, and is an image indeed if( !file_exists($img_path) OR !getimagesize($img_path) ) return false; //get image info $info = pathinfo($img_path); $ext = $info['extension']; list($orig_w,$orig_h) = getimagesize($img_path); //get image size after cropping $dims = image_resize_dimensions($orig_w, $orig_h, $width, $height, $crop); $dst_w = $dims[4]; $dst_h = $dims[5]; //use this to check if cropped image already exists, so we can return that instead $suffix = "{$dst_w}x{$dst_h}"; $dst_rel_path = str_replace( '.'.$ext, '', $rel_path); $destfilename = "{$upload_dir}{$dst_rel_path}-{$suffix}.{$ext}"; //if orig size is smaller if($width >= $orig_w) { if(!$dst_h) : //can't resize, so return original url $img_url = $url; $dst_w = $orig_w; $dst_h = $orig_h; else : //else check if cache exists if(file_exists($destfilename) && getimagesize($destfilename)) { $img_url = "{$upload_url}{$dst_rel_path}-{$suffix}.{$ext}"; } //else resize and return the new resized image url else { $resized_img_path = image_resize( $img_path, $width, $height, $crop ); $resized_rel_path = str_replace( $upload_dir, '', $resized_img_path); $img_url = $upload_url . $resized_rel_path; } endif; } //else check if cache exists elseif(file_exists($destfilename) && getimagesize($destfilename)) { $img_url = "{$upload_url}{$dst_rel_path}-{$suffix}.{$ext}"; } //else, we resize the image and return the new resized image url else { $resized_img_path = image_resize( $img_path, $width, $height, $crop ); $resized_rel_path = str_replace( $upload_dir, '', $resized_img_path); $img_url = $upload_url . $resized_rel_path; } //return the output if($single) { //str return $image = $img_url; } else { //array return $image = array ( 0 => $img_url, 1 => $dst_w, 2 => $dst_h ); } return $image; }
Затем в function.php добавьте
include ( 'aq_resizer.php' );
Изменение количества записей
Для того чтобы в одном из вариантов выводилось большее количество записей на странице, необходимо в function.php добавить
function change_posts_per_page( $query ) { $current_user = wp_get_current_user(); // Получение данных пользователя if ( is_admin() || ! $query->is_main_query() ) // изменять не в админке и только главный запрос return; if ( 1 == $current_user->style ) { // Если в базе данных значение параметра style = 1 $query->set( 'posts_per_page', 30 ); // Выводить по 30 постов на страничке return; } else { // Если в базе данных значение параметра style != 1 $query->set( 'posts_per_page', 5 ); // Выводить по 30 постов на страничке return; } } add_action( 'pre_get_posts', 'change_posts_per_page', 1 );
Переключатель вида
Создаём на панели пользователя переключатель
<input type="checkbox" <?php if ( 1 == $current_user->style ) print 'checked';?> // Проверяем состояние переключателя onchange="getPage(this)"> // Создаём событие
Дальше в шапке нашего сайта создаём обработчик события
<script type="text/javascript"> function getPage(obj) { var style_statys = 0; if(obj.checked == true) { style_statys = 1; } else { style_statys = 0; } $.post( "style_updater.php", // Файл который должен обработать данные отправленные методом POST { style: style_statys, // Первый параметр. $_POST[style] ID: <?php print $current_user->ID; ?>// Второй параметр. $_POST[ID] которому присваивается значение авторизованного пользователя }, onAjaxSuccess // При успешной передаче запустить функцию onAjaxSuccess ); } function onAjaxSuccess(_html) { location.reload(); // Которая обновит нашу страницу } // --> </script>
style_updater.php
<?php include '../../../wp-config.php'; // Подключаем wp-config.php $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD); // Подключаемся к Серверу mysql_select_db(DB_NAME, $link); // Выбираем и подключаем базу данных $query = 'UPDATE `wp_users` SET `style`='.$_POST['style'].' WHERE `ID`='.$_POST['ID']; // Формируем SQL команду mysql_query($query, $link); // Выполняем SQL команду mysql_close($link); // Закрываем соединение с сервером ?>
ссылка на оригинал статьи http://habrahabr.ru/post/172875/
Добавить комментарий