在php中更改为多列情况

时间：2015-01-07 06:58:22

标签： php android css wordpress

最近，我们使用已购买的WP主题（木星）为我们的业务创建了一个网站，我的老板，所有者，已经进行了一些他想要的非常特别的修改（有些原因我不知道＃39;理解）鉴于我有HTML和CSS的工作知识，以及非常非常基本的PHP知识，我尝试并能够进行除了一个以外的所有自定义：

该主题旨在提供响应，因此，自定义投资组合库样式（在计算机上显示为图像库：http://14d.mercysou.server312.com/photos）将逐渐缩小在不同的设备上，以便在您关闭时对于智能手机，只会显示1列图像，您可以向下滚动。我的主管希望对其进行定制，以便无论屏幕尺寸如何，即使在手机上，屏幕上也始终至少有2列图像。此投资组合库的PHP（称为＆＃34;砌体＆＃34;）如下：

<?php
function mk_portfolio_masonry_loop(&$r, $atts)
{
global $post;
extract($atts);
global $mk_options;

$output     = '';
$terms      = get_the_terms(get_the_id(), 'portfolio_category');
$terms_slug = array();
$terms_name = array();
if (is_array($terms)) {
    foreach ($terms as $term) {
        $terms_slug[] = $term->slug;
        $terms_name[] = '<span>' . $term->name . '</span>';
    }
}

$post_type = get_post_meta($post->ID, '_single_post_type', true);
$post_type = !empty($post_type) ? $post_type : 'image';
$link_to   = get_post_meta(get_the_ID(), '_portfolio_permalink', true);

$hover_overlay_value = get_post_meta($post->ID, '_hover_skin', true);
$hover_overlay       = !empty($hover_overlay_value) ? (' style="background-color:' . $hover_overlay_value . '"') : '';

$column = get_post_meta(get_the_ID(), '_masonry_img_size', true);
$column = !(empty($column)) ? $column : 'x_x';

switch ($column) {
    case 'x_x':
        $width  = 300;
        $height = 300;
        break;

    case 'two_x_x': // 
        $width  = 600;
        $height = 300;
        break;

    case 'three_x_x':
        $width  = 900;
        $height = 300;
        break;
    case 'four_x_x':
        $width  = 1200;
        $height = 300;
        break;

    case 'x_two_x':
        $width  = 300;
        $height = 600;
        break;
    case 'two_x_two_x':
        $width  = 600;
        $height = 600;
        break;
    case 'three_x_two_x':
        $width  = 900;
        $height = 600;
        break;

    case 'four_x_two_x':
        $width  = 1200;
        $height = 600;
        break;

    default:
        $width  = 300;
        $height = 300;
        break;
}

$lightbox_full_size = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full', true);

$permalink = '';
if (!empty($link_to)) {
    $link_array = explode('||', $link_to);
    switch ($link_array[0]) {
        case 'page':
            $permalink = get_page_link($link_array[1]);
            break;
        case 'cat':
            $permalink = get_category_link($link_array[1]);
            break;
        case 'portfolio':
            $permalink = get_permalink($link_array[1]);
            break;
        case 'post':
            $permalink = get_permalink($link_array[1]);
            break;
        case 'manually':
            $permalink = $link_array[1];
            break;
    }
}
if ($ajax == 'true' || empty($permalink)) {
    $permalink = get_permalink();
}
$output .= '<article id="' . get_the_ID() . '" class="mk-portfolio-item mk-portfolio-masonry-item masonry-'.$item_id.' mk-isotop-item  ' . $hover_scenarios . '-hover size_' . $column . ' portfolio-' . $post_type . ' ' . implode(' ', $terms_slug) . '">';
$image_src_array = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full', true);
$image_src       = bfi_thumb($image_src_array[0], array(
    'width' => $width * $image_quality,
    'height' => $height * $image_quality
));

$item_bg_color_value = get_post_meta($post->ID, '_hover_skin', true);
$item_bg_color       = !empty($item_bg_color_value) ? (' background-color:' . $item_bg_color_value . '!important') : '';
$output .= '<div style="margin:0 ' . ($grid_spacing / 2) . 'px ' . $grid_spacing . 'px;" class="item-holder">';

//$output .= ($hover_scenarios == 'fadebox' || $hover_scenarios == 'none') ? '<a class="project-load" data-post-id="' . get_the_ID() . '" href="' . $permalink . '">' : '';


$output .= '<div class="featured-image">';
$output .= '<img alt="' . get_the_title() . '" class="item-featured-image" title="' . get_the_title() . '" src="' . mk_thumbnail_image_gen($image_src, $width, $height)  . '" itemprop="image" />';
if ($hover_scenarios == 'fadebox') {
    $output .= '<div class="hover-overlay gradient"' . $hover_overlay . '></div>';
} else {
    if ($hover_scenarios == 'zoomout') {
        $output .= '<div class="image-hover-overlay" style="' . $item_bg_color . '"></div>';
    } else {
        $output .= '<div class="image-hover-overlay"></div>';
    }
}


if ($hover_scenarios == 'fadebox') {
    $output .= '<div class="grid-hover-icons">';



    if ($post_type == 'image' || $post_type == '') {
        $output .= '<a rel="portfolio-grid" title="' . get_the_title() . '" data-fancybox-group="portfolio-masonry-item" class="zoom-badge mk-lightbox" href="' . $image_src_array[0] . '"><i class="mk-jupiter-icon-plus-circle"></i></a>';
    } else if ($post_type == 'video') {
        $video_id   = get_post_meta($post->ID, '_single_video_id', true);
        $video_site = get_post_meta($post->ID, '_single_video_site', true);
        $video_url  = '';
        if ($video_site == 'vimeo') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://vimeo.com/' . $video_id . '?autoplay=0';
        } elseif ($video_site == 'youtube') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://www.youtube.com/watch?v=' . $video_id . '?autoplay=0';
        } elseif ($video_site == 'dailymotion') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://www.dailymotion.com/video/' . $video_id . '?logo=0';
        }
        $output .= '<a title="' . get_the_title() . '" class="video-badge mk-lightbox" data-fancybox-group="portfolio-masonry-item" href="' . $video_url . '"><i class="mk-jupiter-icon-plus-circle"></i></a>';
    }

    $output .= '</div>';
}

if ($hover_scenarios == 'light-zoomin' ) {
    $output .= '<div class="grid-hover-icons">';



    if ($post_type == 'image' || $post_type == '') {
        $output .= '<a rel="portfolio-grid" title="' . get_the_title() . '" data-fancybox-group="portfolio-masonry-item" class="zoom-badge mk-lightbox" href="' . $image_src_array[0] . '"><i class="mk-jupiter-icon-plus-circle"></i></a>';
    } else if ($post_type == 'video') {
        $video_id   = get_post_meta($post->ID, '_single_video_id', true);
        $video_site = get_post_meta($post->ID, '_single_video_site', true);
        $video_url  = '';
        if ($video_site == 'vimeo') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://vimeo.com/' . $video_id . '?autoplay=0';
        } elseif ($video_site == 'youtube') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://www.youtube.com/watch?v=' . $video_id . '?autoplay=0';
        } elseif ($video_site == 'dailymotion') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://www.dailymotion.com/video/' . $video_id . '?logo=0';
        }
        $output .= '<a title="' . get_the_title() . '" class="video-badge mk-lightbox" data-fancybox-group="portfolio-masonry-item" href="' . $video_url . '"><i class="mk-jupiter-icon-plus-circle"></i></a>';
    }

    $output .= '</div>';

}

if ($hover_scenarios != 'fadebox' && $hover_scenarios != 'light-zoomin' && $hover_scenarios != 'none') {
    $output .= '<div class="grid-hover-icons">';



    if ($post_type == 'image' || $post_type == '') {
        $output .= '<a data-fancybox-group="portfolio-grid" title="' . get_the_title() . '" class="zoom-badge mk-lightbox" href="' . $lightbox_full_size[0] . '"><i class="mk-jupiter-icon-plus-circle"></i></a>';
    } else if ($post_type == 'video') {
        $video_id   = get_post_meta($post->ID, '_single_video_id', true);
        $video_site = get_post_meta($post->ID, '_single_video_site', true);
        $video_url  = '';
        if ($video_site == 'vimeo') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://vimeo.com/' . $video_id . '?autoplay=0';
        } elseif ($video_site == 'youtube') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://www.youtube.com/watch?v=' . $video_id . '?autoplay=0';
        } elseif ($video_site == 'dailymotion') {
            $video_url = 'http' . ((is_ssl()) ? 's' : '') . '://www.dailymotion.com/video/' . $video_id . '?logo=0';
        }
        $output .= '<a title="' . get_the_title() . '" class="video-badge mk-lightbox" href="' . $video_url . '"><i class="mk-jupiter-icon-plus-circle"></i></a>';
    }

    $output .= '</div>';

}



if ($hover_scenarios != 'none') {

     $output .= ($hover_scenarios == 'slidebox') ? '<div class="portfolio-meta"' . $hover_overlay . '>' : '<div class="portfolio-meta">';
     $output .= '<h3 class="the-title">' . get_the_title() . '</h3><div class="clearboth"></div>';
     if ($meta_type == 'category') {
         $output .= '<div class="portfolio-categories">' . implode(', ', $terms_name) . ' </div>';
     } else {
         $output .= '<time class="portfolio-date" datetime="' . get_the_date() . '">' . get_the_date() . '</time>';
     }
     $output .= '</div><!-- Portfolio meta -->';

}

$output .= '</div><!-- Featured Image -->';


//$output .= ($hover_scenarios == 'fadebox' || $hover_scenarios == 'none') ? '</a><!-- project load -->' : '';
$output .= '</div>';


$output .= '</article>' . "\n\n\n";
return $output;}

我知道为了达到我想要的2列样式我需要修改的内容是在30行左右，特别是这部分：

$column = get_post_meta(get_the_ID(), '_masonry_img_size', true);
$column = !(empty($column)) ? $column : 'x_x';

switch ($column) {
    case 'x_x':
        $width  = 300;
        $height = 300;
        break;

    case 'two_x_x': // 
        $width  = 600;
        $height = 300;
        break;

    case 'three_x_x':
        $width  = 900;
        $height = 300;
        break;
    case 'four_x_x':
        $width  = 1200;
        $height = 300;
        break;

    case 'x_two_x':
        $width  = 300;
        $height = 600;
        break;
    case 'two_x_two_x':
        $width  = 600;
        $height = 600;
        break;
    case 'three_x_two_x':
        $width  = 900;
        $height = 600;
        break;

    case 'four_x_two_x':
        $width  = 1200;
        $height = 600;
        break;

    default:
        $width  = 300;
        $height = 300;
        break;
}

我已经阅读了几个教程，并尝试创建一个2列函数并在交换机中使用它，但我担心我对PHP的了解不足以正确实现它。任何想法，建议或帮助将不胜感激，因为我不专业，我们没有预算聘请一个，但责任已经落在我身上，因为我是唯一有点网络知识的家伙在办公室。

1 个答案:

答案 0 :(得分：1)

看到它是响应的，它的理由是它的强制2列的css。我无法确定，因为我无法看到代码，但我会使用css媒体查询执行此操作，使列中的项目在达到特定屏幕宽度时100％宽度。如果是这种情况，请尝试找到执行该操作的代码，并将宽度设为50％。

我不能保证如果没有看到整个代码，它会起作用，但它是你的开始。 php不知道屏幕宽度。

相关问题
最新问题