WordPress.org

Making WordPress.org


Ignore:
Timestamp:
12/02/2014 11:03:33 PM (6 years ago)
Author:
obenland
Message:

WP.org Themes: First pass at improved single theme page.

  • Synchronizes content between modal and single view.
  • Displays a banner if the theme is outdated.
  • Removes unused inline CSS for easier code scanning.

See #745.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/content-single.php

    r1009 r1021  
    1 <?php global $theme; ?>
     1<?php
     2include ABSPATH . 'wp-admin/includes/theme.php';
     3$theme = themes_api( 'theme_information', array( 'slug' => get_post()->post_name ) );
     4?>
     5<div id="themes" class="wrap">
     6    <div class="theme-wrap">
     7        <div class="theme-about">
    28
    3 <div class="theme-backdrop"></div>
    4 <div class="theme-wrap">
    5     <div class="theme-header">
    6         <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
    7         <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
    8         <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
    9     </div>
    10     <div class="theme-about">
    11         <div class="theme-screenshots">
    12             <div class="screenshot"><?php the_post_thumbnail(); ?></div>
     9            <?php if ( strtotime( '-2 years' ) > strtotime( $theme->last_updated ) ) : ?>
     10                <div class="theme-notice notice notice-warning">
     11                    <p><?php _e( 'This theme <strong>hasn&#146;t been updated in over 2 years</strong>. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.', 'wporg-themes' ); ?></p>
     12                </div><!-- .theme-info -->
     13            <?php endif; ?>
     14
     15            <div class="theme-info hentry">
     16                <h3 class="theme-name entry-title"><?php the_title(); ?></h3>
     17                <span class="theme-version">
     18                    <?php
     19                        printf( __( 'Version: %s' ),
     20                            sprintf( '<abbr title="%1$s">%2$s</abbr>',
     21                                esc_attr( sprintf( __( 'Last updated: %s' ), date_i18n( get_option( 'date_format' ), strtotime( $theme->last_updated ) ) ) ),
     22                                $theme->version
     23                            )
     24                        );
     25                    ?>
     26                </span>
     27                <h4 class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">' . $theme->author . '</span>' ); ?></h4>
     28
     29                <div class="theme-description entry-summary"><?php the_content(); ?></div>
     30
     31                <?php if ( ! empty( $theme->template ) ) : ?>
     32                <div class="theme-notice notice notice-info">
     33                    <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), sprintf( '<a href="/%1$s">%2$s</a>', $theme->template, $theme->template ) ); ?></p>
     34                </div>
     35                <?php endif; ?>
     36
     37                <p class="theme-tags">
     38                    <span><?php _e( 'Tags:' ); ?></span>
     39                    <?php
     40                        foreach( $theme->tags as &$tag ) :
     41                            $tag = sprintf( '<a href="/tags/%1$s">%1$s</a>', $tag );
     42                        endforeach;
     43                        echo implode( ', ', $theme->tags );
     44                    ?>
     45                </p>
     46            </div><!-- .theme-info -->
     47
     48            <div class="theme-screenshots">
     49                <div class="screenshot"><?php the_post_thumbnail(); ?></div>
     50            </div><!-- .theme-screenshots -->
     51
     52            <div class="theme-ratings" itemprop="aggregateRating" itemscope
     53                 itemtype="http://schema.org/AggregateRating">
     54                <meta itemprop="ratingValue" content="<?php echo esc_attr( number_format_i18n( $theme->rating / 20, 1 ) ); ?>"/>
     55                <meta itemprop="ratingCount" content="<?php echo esc_attr( $theme->num_ratings ); ?>"/>
     56                <h4><?php _e( 'Ratings', 'wporg-themes' ); ?></h4>
     57
     58                <div class="star-holder">
     59                    <div class="star-rating" style="width: <?php echo esc_attr( number_format_i18n( $theme->rating, 1 ) ); ?>%">
     60                        <?php printf( __( '%d stars', 'wporg-themes' ), number_format_i18n( $theme->rating / 20 ) ); ?>
     61                    </div>
     62                </div>
     63                <span><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), number_format_i18n( $theme->rating / 20, 1 ) ); ?></span>
     64                <?php
     65                $ratingcount = array(); // TODO: Rating counts
     66                foreach ( range( 1, 5 ) as $val ) {
     67                    if ( empty( $ratingcount[ $val ] ) ) {
     68                        $ratingcount[ $val ] = 0;
     69                    }
     70                }
     71                krsort( $ratingcount );
     72                foreach ( $ratingcount as $key => $ratecount ) :
     73                    ?>
     74                    <div class="counter-container">
     75                        <a href="//wordpress.org/support/view/theme-reviews/<?php echo esc_attr( $theme->slug ); ?>?filter=<?php echo $key; ?>"
     76                           title="<?php printf( _n( 'Click to see reviews that provided a rating of %d star', 'Click to see reviews that provided a rating of %d stars', $key, 'wporg-themes' ), $key ); ?>">
     77                            <span class="counter-label" style="float:left; margin-right:5px;"><?php printf( __( '%d stars', 'wporg-themes' ), $key ); ?></span>
     78                        <span class="counter-back" style="height:17px;width:92px;background-color:#ececec;float:left;">
     79                            <span class="counter-bar" style="width: <?php echo 92 * ( $ratecount / count( 1 ) ); ?>px;height:17px;background-color:#fddb5a;float:left;"></span>
     80                        </span>
     81                        </a>
     82                        <span class="counter-count" style="margin-left:5px;"><?php echo $ratecount; ?></span>
     83                    </div>
     84                <?php endforeach; ?>
     85            </div><!-- .theme-rating -->
     86
     87            <div class="theme-devs">
     88                <h4><?php _e( 'Developers', 'wporg-themes' ); ?></h4>
     89                <h5><?php _e( 'Subscribe', 'wporg-themes' ); ?></h5>
     90                <ul class="unmarked-list">
     91                    <li>
     92                        <a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $theme->slug ); ?>?limit=100&mode=stop_on_copy&format=rss">
     93                            <img src="//s.w.org/style/images/feedicon.png" style="vertical-align:text-top;"/>
     94                            <?php _e( 'Development Log', 'wporg' ); ?>
     95                        </a>
     96                    </li>
     97                </ul>
     98
     99                <h5><?php _e( 'Browse the Code', 'wporg-themes' ); ?></h5>
     100                <ul class="unmarked-list">
     101                    <li><a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
     102                    <li><a href="//themes.svn.wordpress.org/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
     103                    <li><a href="//themes.trac.wordpress.org/browser/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Browse in Trac', 'wporg-themes' ); ?></a></li>
     104                </ul>
     105            </div><!-- .theme-devs -->
     106
     107            <div class="theme-downloads">
     108                <h4><?php _e( 'Downloads Per Day' ); ?></h4>
     109
     110                <div id="theme-download-stats-<?php echo esc_attr( $theme->slug ); ?>" class="chart"></div>
     111                <script type="text/javascript">
     112                    google.load("visualization", "1", {packages:["corechart"]});
     113                    google.setOnLoadCallback(drawThemeDownloadsChart);
     114
     115                    function drawThemeDownloadsChart() {
     116                        jQuery(document).ready(function($){
     117                            jQuery.getJSON('https://api.wordpress.org/stats/themes/1.0/downloads.php?slug=<?php echo $theme->slug; ?>&limit=267&callback=?', function (downloads) {
     118                                var data = new google.visualization.DataTable(),
     119                                    count = 0,
     120                                    sml;
     121
     122                                data.addColumn('string', _wpThemeSettings.l10n.date);
     123                                data.addColumn('number', _wpThemeSettings.l10n.downloads);
     124
     125                                $.each(downloads, function (key, value) {
     126                                    data.addRow();
     127                                    data.setValue(count, 0, new Date(key).toLocaleDateString() );
     128                                    data.setValue(count, 1, Number(value));
     129                                    count++;
     130                                });
     131
     132                                sml = data.getNumberOfRows() < 225;
     133
     134                                new google.visualization.ColumnChart(document.getElementById('theme-download-stats-<?php echo esc_attr( $theme->slug ); ?>')).draw(data, {
     135                                    colors: ['#253578'],
     136                                    legend: {
     137                                        position: 'none'
     138                                    },
     139                                    titlePosition: 'in',
     140                                    axisTitlesPosition: 'in',
     141                                    chartArea: {
     142                                        height: 280,
     143                                        left: sml ? 30 : 0,
     144                                        width: sml ? '80%' : '100%'
     145                                    },
     146                                    hAxis: {
     147                                        textStyle: {color: 'black', fontSize: 9}
     148                                    },
     149                                    vAxis: {
     150                                        format: '###,###',
     151                                        textPosition: sml ? 'out' : 'in',
     152                                        viewWindowMode: 'explicit',
     153                                        viewWindow: {min: 0}
     154                                    },
     155                                    bar: {
     156                                        groupWidth: ( data.getNumberOfRows() > 100 ) ? "100%" : null
     157                                    },
     158                                    height: 350
     159                                });
     160                            });
     161                        });
     162                    }
     163                </script>
     164            </div><!-- .theme-downloads -->
     165
    13166        </div>
    14167
    15         <div class="theme-info hentry">
    16             <h3 class="theme-name entry-title"><?php the_title(); ?></h3>
    17             <span class="theme-version"><?php printf( __( 'Version: %s' ), $theme->version ); ?></span>
    18             <h4 class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">' . $theme->author . '</span>' ); ?></h4>
    19 
    20             <p class="theme-description entry-summary"><?php the_content(); ?></p>
    21 
    22             <div class="rating rating-<?php echo round( $theme->rating, -1 ); ?>">
    23                 <span class="one"></span>
    24                 <span class="two"></span>
    25                 <span class="three"></span>
    26                 <span class="four"></span>
    27                 <span class="five"></span>
    28 
    29                 <p class="votes"><?php printf( __( 'Based on %s ratings.' ), $theme->num_ratings ); ?></p>
    30             </div>
    31 
    32             <div class="theme-stats">
    33                 <div><strong><?php _e( 'Last updated:' ); ?></strong> <span class="updated"><?php echo $theme->last_updated; ?></span></div>
    34                 <div><strong><?php _e( 'Downloads:' ); ?></strong> <?php echo $theme->downloaded; ?></div>
    35                 <div><a href="<?php echo esc_url( $theme->homepage ); ?>"><?php _e( 'Theme Homepage &raquo;' ); ?></a></div>
    36             </div>
    37 
    38             <p class="theme-tags">
    39                 <span><?php _e( 'Tags:' ); ?></span>
    40                 <?php echo implode( ', ', $theme->tags ); ?>
    41             </p>
     168        <div class="theme-actions">
     169            <a href="<?php echo esc_url( '//downloads.wordpress.org/theme/' . $theme->slug . '.' . $theme->version . '.zip' ); ?>" class="button button-primary"><?php _e( 'Download' ); ?></a>
     170            <a href="<?php echo esc_url( $theme->preview_url ); ?>" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
    42171        </div>
    43172    </div>
    44 
    45     <div class="theme-actions">
    46         <a href="<?php echo esc_url( '//downloads.wordpress.org/theme/' . $theme->slug . '.' . $theme->version . '.zip' ); ?>" class="button button-primary"><?php _e( 'Download' ); ?></a>
    47         <a href="<?php echo esc_url( $theme->preview_url ); ?>" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
    48     </div>
    49173</div>
Note: See TracChangeset for help on using the changeset viewer.