rss feed会吸引特色帖子,但需要有限的描述

时间:2016-11-01 16:47:18

标签: php css wordpress rss

我想出了如何限制我的帖子。我遇到的问题是我的css代码几乎集中在3个帖子中,但它仍然偏向左侧。这些不是我将使用的颜色,他们只是帮我布局。如果有人可以提供任何帮助,我们将不胜感激!

这是php代码

<section id="blog">
<div class="container-fluid">
    <div class="row">

        <div id="blog_title">

            Featured Posts

        </div><!--END BLOG TITLE-->

<div id="featured_posts">

<?php

// output RSS feed to HTML
output_rss_feed('http://www.bmcsquincy.com/featured_posts/feed', 20, true, true, 200);

// Check http://www.systutorials.com/136102/a-php-function-for-fetching-rss-feed-and-outputing-feed-items-as-html/ for description
// RSS to HTML
/*
    $item_cnt: max number of feed items to be displayed
    $max_words: max number of words (not real words, HTML words)
    if <= 0: no limitation, if > 0 display at most $max_words words
 */
function get_rss_feed_as_html($feed_url, $max_item_cnt = 10, $show_date = true, $show_description = true, $max_words = 0, $cache_timeout = 7200, $cache_prefix = "/tmp/rss2html-")
{
    $result = "";
    // get feeds and parse items
    $rss = new DOMDocument();
    $cache_file = $cache_prefix . md5($feed_url);
    // load from file or load content
    if ($cache_timeout > 0 &&
        is_file($cache_file) &&
        (filemtime($cache_file) + $cache_timeout > time())) {
            $rss->load($cache_file);
    } else {
        $rss->load($feed_url);
        if ($cache_timeout > 0) {
            $rss->save($cache_file);
        }
    }
    $feed = array();
    foreach ($rss->getElementsByTagName('item') as $node) {
        $item = array (
            'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
            'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
            'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
            'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,
        );
        $content = $node->getElementsByTagName('encoded'); // <content:encoded>
        if ($content->length > 0) {
            $item['content'] = $content->item(0)->nodeValue;
        }
        array_push($feed, $item);
    }
    // real good count
    if ($max_item_cnt > count($feed)) {
        $max_item_cnt = count($feed);
    }
    $result .= '<ul class="feed-lists">';


    //ADDED THIS FOR POST AMOUNT
    $max_item_cnt = 3;
    $max_words = 25;

    for ($x=0;$x<$max_item_cnt;$x++) {
        $title = str_replace(' & ', ' &amp; ', $feed[$x]['title']);
        $link = $feed[$x]['link'];
        $result .= '<li class="feed-item">';
        $result .= '<div class="feed-title"><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong></div>';
        if ($show_date) {
            $date = date('l F d, Y', strtotime($feed[$x]['date']));
            $result .= '<small class="feed-date"><em>Posted on '.$date.'</em></small>';
        }
        if ($show_description) {
            $description = $feed[$x]['desc'];
            $content = $feed[$x]['content'];
            // find the img
            $has_image = preg_match('/<img.+src=[\'"](?P<src>.+?)[\'"].*>/i', $content, $image);
            // no html tags
            $description = strip_tags($description, '');
            // whether cut by number of words
            if ($max_words > 0) {
                $arr = explode(' ', $description);
                if ($max_words < count($arr)) {
                    $description = '';
                    $w_cnt = 0;
                    foreach($arr as $w) {
                        $description .= $w . ' ';
                        $w_cnt = $w_cnt + 1;
                        if ($w_cnt == $max_words) {
                            break;
                        }
                    }
                    $description .= " ...";
                }
            }
            // add img if it exists

            //ADDED THE P IN DESCRIPTION LINE TO FOR A BREAK BY IMAGE

            if ($has_image == 1) {
                $description = '<p> <a href="'.$link.'" img="'.$description.'"> <img class="feed-item-image" src="' . $image['src'] . '" /></a></p>' . $description;
            }
            $result .= '<div class="feed-description">' . $description;

            //ADDED THE P IN THIS TO LINE BREAK CONTINUE READING

            $result .= '<p> <a href="'.$link.'" title="'.$title.'">Continue Reading &raquo;</a></p>'.'</div>';
        }
        $result .= '</li>';
    }
    $result .= '</ul>';
    return $result;
}
function output_rss_feed($feed_url, $max_item_cnt = 10, $show_date = true, $show_description = true, $max_words = 0)
{
    echo get_rss_feed_as_html($feed_url, $max_item_cnt, $show_date, $show_description, $max_words);
}
?>

</div><!--END FEATURED POSTS-->

        <div class="col-md-12 col-sm-12 col-xs-12" id="blog_btn_section"> 
             <div id="btn_see_work" class="col-md-12 text-center"><a class="button btn btn-default btn-md wp5 delay-3s" id="btn-intro" href="./contact.php" target="_top">SEE MORE
            </a>
            </div><!--END BUTTON-->
        </div><!--END COL SPAN-->

    </div><!--END ROW-->
    </div><!--END CONTAINER-->
</section><!--END SECTION BLOG-->

这是我的CSS,它给了我对齐麻烦

#blog {
    background-color: yellow;
    color: #dbdbdb;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    margin: 0px auto 0px auto;
}

#blog_title {
    text-align: center;
    font-family: pathwaygothic;
    font-size: 2em;
    color: green;
    padding-bottom: 50px;
}

#blog_btn_section {
    padding-top: 50px;
}

#featured_posts {
    background-color: pink;
    max-width: 1200px;
    margin: 0px auto 0px auto;
    padding: 5px;
}

#featured_posts ul {
    display: inline-block;
    margin: 0px auto 0px auto;
    text-align: center;
    padding: 0px;
}

#featured_posts li {
    list-style-type: none;
    text-align: left;
    padding: 30px;
    float: left;
    font-family: pathwaygothic;
    font-size: 1em;
    background-color: purple;
    max-width: 1200px;
    margin-left: 25px;
}

.feed-lists {
  background-color: aqua;
  width: 100%;

}

.feed-title a {
    color: red;
}

.feed-date {
    color: aqua;
}

.feed-description {
    width: 300px;
}

.feed-lists li {
    background-color: green;
}

.feed-item-image:hover {
    opacity: .5;
    background-color: #333333;
    transition: 0.5s ease;
}

0 个答案:

没有答案