Making WordPress.org


Ignore:
Timestamp:
12/02/2014 11:03:33 PM (12 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.