在Twitter循环中添加Bootstrap列之间的边界

时间:2016-11-29 18:37:47

标签: wordpress twitter

好的,我有一个有趣的难题需要解决。

我有一个使用oAuth Twitter Feed for Developers Plugin

输出Twitter Feed的WordPress网站

我需要这个插件,因为我需要从用户水平显示3条最近的推文。这是插件的代码:

<div class="container" id="b2btwitter">
  <?php
    $tweets = getTweets('anthonytravel', 3, array('exclude_replies' => true, 'include_rts' => false));
    foreach($tweets as $tweet){
        if($tweet['text']){
          echo '<div id="twitterCol" class="col-xs-6 col-sm-4">';
            $the_tweet = $tweet['text'];
            foreach($tweet['entities']['user_mentions'] as $key => $user_mention){
                $the_tweet = preg_replace(
                    '/@'.$user_mention['screen_name'].'/i',
                    '<a href="http://www.twitter.com/'.$user_mention['screen_name'].'" target="_blank">@'.$user_mention['screen_name'].'</a>',
                    $the_tweet);
            }
            foreach($tweet['entities']['hashtags'] as $key => $hashtag){
                $the_tweet = preg_replace(
                    '/#'.$hashtag['text'].'/i',
                    '<a href="https://twitter.com/search?q=%23'.$hashtag['text'].'&src=hash" target="_blank">#'.$hashtag['text'].'</a>',
                    $the_tweet);
            }
            foreach($tweet['entities']['urls'] as $key => $link){
                $the_tweet = preg_replace(
                    '`'.$link['url'].'`',
                    '<a href="'.$link['url'].'" target="_blank">'.$link['url'].'</a>',
                    $the_tweet);
            }
            echo '<h1>Anthony Travel</h1><h2><a href="https://www.twitter.com/AnthonyTravel">@anthonytravel</a></h2>';
            echo '<p>'.$the_tweet.'</p>';
            echo '<span> -- '.humanTiming(strtotime($tweet['created_at'])) . ' ago</span>';
            echo '</div>';
        } else {
            echo '
            <br /><br />
            <a href="http://twitter.com/anthonytravel" target="_blank">Click here to read anthonytravel\'S Twitter feed</a>';
        }
    }
    function humanTiming ($time)
    {
        $time = time() - $time; // to get the time since that moment
        $tokens = array (
            31536000 => 'year',
            2592000 => 'month',
            604800 => 'week',
            86400 => 'day',
            3600 => 'hour',
            60 => 'minute',
            1 => 'second'
        );
        foreach ($tokens as $unit => $text) {
            if ($time < $unit) continue;
            $numberOfUnits = floor($time / $unit);
            return $numberOfUnits.' '.$text.(($numberOfUnits>1)?'s':'');
        }
    }
  ?>

一切都很好用。但我需要的是推文之间的分隔符。所以两个分隔线。像这样:

           |           |            
 Tweet 1   |  Tweet 2  |   Tweet 3 
           |           |           
           |           |           

正如您所看到的,我无法在div的右侧添加边框,因为最后一列会有边框。我需要将CSS添加到一个或两个列而不是其他列。

有没有办法在JavaScript中做到这一点?

我的另一个想法是将Twitter提要三次单独添加,但最新的推文减去1或其他类似的效果。我只是不知道这是否可能/如何使用Twitter API。

2 个答案:

答案 0 :(得分:1)

找到解决方案!这是最终的代码:

<?php
    $x = 1;
    $tweets = getTweets('anthonytravel', 3, array('exclude_replies' => true, 'include_rts' => false));
    foreach($tweets as $tweet){

        if($tweet['text']){
          echo '<div id="twitterCol" class="col-sm-6 col-sm-4 border-'.$x++.'">';
            $the_tweet = $tweet['text'];
            foreach($tweet['entities']['user_mentions'] as $key => $user_mention){
                $the_tweet = preg_replace(
                    '/@'.$user_mention['screen_name'].'/i',
                    '<a href="http://www.twitter.com/'.$user_mention['screen_name'].'" target="_blank">@'.$user_mention['screen_name'].'</a>',
                    $the_tweet);
            }
            foreach($tweet['entities']['hashtags'] as $key => $hashtag){
                $the_tweet = preg_replace(
                    '/#'.$hashtag['text'].'/i',
                    '<a href="https://twitter.com/search?q=%23'.$hashtag['text'].'&src=hash" target="_blank">#'.$hashtag['text'].'</a>',
                    $the_tweet);
            }
            foreach($tweet['entities']['urls'] as $key => $link){
                $the_tweet = preg_replace(
                    '`'.$link['url'].'`',
                    '<a href="'.$link['url'].'" target="_blank">'.$link['url'].'</a>',
                    $the_tweet);
            }

            echo '<h1>Anthony Travel</h1><h2><a href="https://www.twitter.com/AnthonyTravel">@anthonytravel</a></h2>';
            echo '<p>'.$the_tweet.'</p>';
            echo '<span> -- '.humanTiming(strtotime($tweet['created_at'])) . ' ago</span>';
            echo '</div>';
        } else {
            echo '
            <br /><br />
            <a href="http://twitter.com/anthonytravel" target="_blank">Click here to read anthonytravel\'S Twitter feed</a>';
        }
    }
    function humanTiming ($time)
    {
        $time = time() - $time; // to get the time since that moment
        $tokens = array (
            31536000 => 'year',
            2592000 => 'month',
            604800 => 'week',
            86400 => 'day',
            3600 => 'hour',
            60 => 'minute',
            1 => 'second'
        );
        foreach ($tokens as $unit => $text) {
            if ($time < $unit) continue;
            $numberOfUnits = floor($time / $unit);
            return $numberOfUnits.' '.$text.(($numberOfUnits>1)?'s':'');
        }
    }
  ?>

注意顶部有$x = 1;border-'.$x++.'位。感谢@Rick的想法! 基本上我将border-"*a number*"添加到包装器div的类中。这为每个推文提供了一个唯一的编号,并允许我使用特定的CSS来定位这些唯一的数字,即。边框。我需要花一些时间来确定变量需要在主foreach之外定义,然后可以使用foreach++中重复。但我了解了PHP的++

快乐

答案 1 :(得分:0)

if($tweet['text'])之前,你可以启动一个计数器,然后根据计数器中的当前步骤分配你的CSS。