Make WordPress Core

Ticket #27055: 27055.5.diff

File 27055.5.diff, 29.0 KB (added by matveb, 11 years ago)
  • wp-admin/includes/theme.php

     
    452452         */
    453453        $prepared_themes = apply_filters( 'wp_prepare_themes_for_js', $prepared_themes );
    454454        return array_values( $prepared_themes );
     455}
     456
     457
     458/**
     459 * Get public themes from the themes directory
     460 * and prepare them for JavaScript
     461 *
     462 * @since 3.8.0
     463 *
     464 * @uses themes_api themes_directory_sections
     465 * @return array with $theme objects
     466 */
     467function prepare_public_themes_for_js( $themes = array() ) {
     468
     469        $sections = array(
     470                'featured' => __( 'Featured Themes' ),
     471                'popular'  => __( 'Popular Themes' ),
     472                'new'      => __( 'Newest Themes' ),
     473        );
     474
     475        $sections = array_keys( $sections );
     476
     477        $args = array(
     478                'page' => 1,
     479                'per_page' => 12,
     480        );
     481
     482        foreach ( $sections as $section ) {
     483                $args['browse'] = $section;
     484                $themes[ $section ] = themes_api( 'query_themes', $args );
     485        }
     486
     487        return $themes;
    455488}
     489 No newline at end of file
  • wp-admin/update.php

     
    199199
    200200                include_once ABSPATH . 'wp-admin/includes/theme-install.php'; //for themes_api..
    201201
    202                 check_admin_referer('install-theme_' . $theme);
     202                check_admin_referer( 'install-theme' );
    203203                $api = themes_api('theme_information', array('slug' => $theme, 'fields' => array('sections' => false, 'tags' => false) ) ); //Save on a bit of bandwidth.
    204204
    205205                if ( is_wp_error($api) )
  • wp-admin/js/theme.js

     
    1212themes.data = _wpThemeSettings;
    1313l10n = themes.data.l10n;
    1414
     15// Shortcut for (bool) isBrowsing check
     16themes.isInstall = themes.data.settings.isBrowsing;
     17
    1518// Setup app structure
    16 _.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
     19_.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template, orgAPI: {} });
    1720
    1821themes.model = Backbone.Model.extend({});
    1922
     
    5558                this.$el.append( '<br class="clear"/>' );
    5659        },
    5760
     61        // Defines search element container
     62        searchContainer: $( '#wpbody h2:first' ),
     63
    5864        // Search input and view
    5965        // for current theme collection
    6066        search: function() {
     
    6672                        return;
    6773                }
    6874
    69                 view = new themes.view.Search({ collection: self.collection, parent: this });
     75                view = new themes.view.Search({
     76                        collection: self.collection,
     77                        parent: this
     78                });
    7079
    7180                // Render and append after screen title
    7281                view.render();
    73                 $('#wpbody h2:first')
     82                this.searchContainer
    7483                        .append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
    7584                        .append( view.el );
    7685        },
     
    804813                        self.view.trigger( 'theme:close' );
    805814                        self.themes.doSearch( query );
    806815                });
     816
     817                this.extraRoutes();
     818        },
     819
     820        extraRoutes: function() {
     821                return false;
    807822        }
    808823};
    809824
     825// --------------------
     826// PUBLIC THEME BROWSER
     827// --------------------
     828//
     829// The public theme browser relies on the basic structure of the script
     830// but overwrites some aspects of the main views
     831//
     832// The theme collection is the same but models have different attributes
     833// as determined by the public themes_api
     834//
     835// @ bool check if it's the 'browsing themes' screen
     836if ( themes.isInstall ) {
     837
     838        // Extend the main view controller
     839        // @see themes.view.Appearance {}
     840        //
     841        // Overwrites properties and functions as needed
     842        _.extend( themes.view.Appearance.prototype, {
     843
     844                el: '#wpbody-content .wrap',
     845
     846                // Register events for sorting and filters in theme-navigation
     847                events: {
     848                        'click .theme-section': 'setSort',
     849                        'click .theme-filter': 'setFilter',
     850                        'click .more-filters': 'moreFilters'
     851                },
     852
     853                // Handles all the rendering of the public theme directory
     854                install: function( section ) {
     855                        // Create a new collection with the proper theme data
     856                        // for each section
     857                        this.collection = new themes.Collection( themes.data.browse.publicThemes[ section ].themes );
     858
     859                        // Set ups the view and passes the section argument
     860                        this.view = new themes.view.Themes({
     861                                collection: this.collection,
     862                                section: section,
     863                                parent: this
     864                        });
     865
     866                        // Reset pagination every time the install view handler is run
     867                        this.page = 0;
     868
     869                        // Render and append
     870                        this.$el.find( '.themes' ).remove();
     871                        this.view.render();
     872                        this.$el.find( '.theme-browser' ).append( this.view.el );
     873
     874                        this.uploader();
     875                },
     876
     877                // Initial render method
     878                render: function() {
     879                        this.search();
     880                        return this.install( this.options.section );
     881                },
     882
     883                // Sorting navigation
     884                setSort: function( event ) {
     885                        var $el = $( event.target ),
     886                                sort = $el.data( 'sort' );
     887
     888                        // Bail if this is already active
     889                        if ( $el.hasClass( this.activeClass ) ) {
     890                                return;
     891                        }
     892
     893                        $( '#theme-search-input' ).val( '' );
     894
     895                        $( '.theme-section, .theme-filter' ).removeClass( this.activeClass );
     896                        $el.addClass( this.activeClass );
     897
     898                        this.install( sort );
     899
     900                        // Trigger a router.naviagte update
     901                        themes.router.navigate( themes.router.baseUrl( '?sort=' + sort ), { replace: true } );
     902                },
     903
     904                // Filters and Tags
     905                setFilter: function( event ) {
     906                        var $el = $( event.target ),
     907                                filter = $el.data( 'filter' ),
     908                                self = this,
     909                                data;
     910
     911                        // Bail if this is already active
     912                        if ( $el.hasClass( this.activeClass ) ) {
     913                                return;
     914                        }
     915
     916                        $( '.theme-filter, .theme-section' ).removeClass( this.activeClass );
     917                        $el.addClass( this.activeClass );
     918
     919                        if ( ! filter ) {
     920                                return;
     921                        }
     922
     923                        // Construct the filter request
     924                        // using the default values
     925                        data = _.defaults( {}, themes.orgAPI.data );
     926
     927                        data.request = _.defaults({
     928                                tag: [ filter ]
     929                        }, themes.orgAPI.data.request );
     930
     931                        // Send Ajax POST request to api.wordpress.org/themes
     932                        $.ajax({
     933                                url: themes.orgAPI.url,
     934
     935                                // We want JSON data
     936                                dataType: 'json',
     937                                type: 'POST',
     938
     939                                // Request data
     940                                data: data,
     941
     942                                beforeSend: function() {
     943                                        // Spin it
     944                                        $( 'body' ).addClass( 'loading-themes' );
     945                                }
     946                        })
     947                                .done( function( data ) {
     948                                        // Update the collection with the queried data
     949                                        self.collection.reset( data.themes );
     950                                        // Trigger a collection refresh event to render the views
     951                                        self.collection.trigger( 'update' );
     952
     953                                        // Un-spin it
     954                                        $( 'body' ).removeClass( 'loading-themes' );
     955                        })
     956                                .fail( function() {
     957                                        // Fail
     958                        });
     959                },
     960
     961                activeClass: 'current',
     962
     963                // Overwrite search container class to append search
     964                // in new location
     965                searchContainer: $( '.theme-navigation' ),
     966
     967                uploader: function() {
     968                        $( 'a.upload.button' ).on( 'click', function() {
     969                                $( '.upload-theme' )
     970                                        .toggleClass( 'opened' )
     971                                        .hasClass( 'opened' ) ? $( this ).text( l10n.back ) : $( this ).text( l10n.upload );
     972                        });
     973                },
     974
     975                moreFilters: function( event ) {
     976                        $( 'body' ).toggleClass( 'more-filters-opened' );
     977                }
     978        });
     979
     980        // Extend the main Search view
     981        _.extend( themes.view.Search.prototype, {
     982
     983                events: {
     984                        'keyup': 'search'
     985                },
     986
     987                // Handles Ajax request for searching through themes in public repo
     988                search: function() {
     989                        var data,
     990                                self = this;
     991
     992                        this.collection = this.options.parent.view.collection;
     993
     994                        // Clear on escape.
     995                        if ( event.type === 'keyup' && event.which === 27 ) {
     996                                event.target.value = '';
     997                        }
     998
     999                        // Construct the main `search` request
     1000                        // using the default values
     1001                        data = _.defaults( {}, themes.orgAPI.data );
     1002
     1003                        data.request['search'] = event.target.value;
     1004
     1005                        // Intercept an [author] search.
     1006                        //
     1007                        // If input value starts with `author:` send a request
     1008                        // for `author` instead of a regular `search`
     1009                        if ( event.target.value.substring( 0, 7 ) === 'author:' ) {
     1010                                data.request['search'] = '';
     1011                                data.request['author'] = event.target.value.slice( 7 );
     1012                        }
     1013
     1014                        // Intercept a [tag] search.
     1015                        //
     1016                        // If input value starts with `tag:` send a request
     1017                        // for `tag` instead of a regular `search`
     1018                        if ( event.target.value.substring( 0, 4 ) === 'tag:' ) {
     1019                                data.request['search'] = '';
     1020                                data.request['tag'] = [ event.target.value.slice( 4 ) ];
     1021                        }
     1022
     1023                        // Send Ajax POST request to api.wordpress.org/themes
     1024                        $.ajax({
     1025                                url: themes.orgAPI.url,
     1026
     1027                                // We want JSON data
     1028                                dataType: 'json',
     1029                                type: 'POST',
     1030
     1031                                // Request data
     1032                                data: data,
     1033
     1034                                beforeSend: function() {
     1035                                        // Spin it
     1036                                        $( 'body' ).addClass( 'loading-themes' );
     1037                                }
     1038                        })
     1039                                .done( function( data ) {
     1040                                        // Update the collection with the queried data
     1041                                        self.collection.reset( data.themes );
     1042                                        // Trigger a collection refresh event to render the views
     1043                                        self.collection.trigger( 'update' );
     1044
     1045                                        // Un-spin it
     1046                                        $( 'body' ).removeClass( 'loading-themes' );
     1047                        })
     1048                                .fail( function() {
     1049                                        $( '#appearance' ).append( '<div class="error"><p>' + l10n['error'] + '</p></div>' );
     1050                        });
     1051                }
     1052        });
     1053
     1054        // Set up the `theme` model with relevant action attributes
     1055        _.extend( themes.model.prototype, {
     1056
     1057                // Adds attributes to the defaul data coming through the .org themes api
     1058                // Map `id` to `slug` for shared code
     1059                initialize: function() {
     1060                        var actions, install, preview;
     1061
     1062                        // Install url for the theme
     1063                        // using the install nonce
     1064                        install = {
     1065                                action: 'install-theme',
     1066                                theme: this.get( 'slug' ),
     1067                                _wpnonce: themes.data.settings._nonceInstall
     1068                        }
     1069
     1070                        // Build the url query
     1071                        install = themes.data.settings.updateURI + '?' + $.param( install );
     1072
     1073                        // Preview url for the theme
     1074                        preview = {
     1075                                tab: 'theme-information',
     1076                                theme: this.get( 'slug' )
     1077                        }
     1078
     1079                        preview = themes.data.settings.installURI + '?' + $.param( preview );
     1080
     1081                        // Set the attributes
     1082                        this.set({
     1083                                installURI: install,
     1084                                previewURI: preview,
     1085                                id: this.get( 'slug' )
     1086                        });
     1087                }
     1088        });
     1089
     1090        // Store api.wordpress.org/themes values and structure
     1091        // for internal access
     1092        themes.orgAPI = {
     1093
     1094                // Default data request
     1095                data: {
     1096                        action: 'query_themes',
     1097                        request: {
     1098                                fields: {
     1099                                        tags: true,
     1100                                }
     1101                        }
     1102                },
     1103
     1104                url: 'http://api.wordpress.org/themes/info/1.1/?action=query_themes'
     1105        };
     1106
     1107        _.extend( themes.view.Theme.prototype.events, {
     1108                'click .preview': 'preview'
     1109        });
     1110
     1111        _.extend( themes.view.Theme.prototype, {
     1112                preview: function( event ) {
     1113                        event.preventDefault();
     1114
     1115                        event = event || window.event;
     1116
     1117                        // this.trigger( 'theme:preview', this.model.cid );
     1118
     1119                        var preview = new themes.view.Preview({
     1120                                model: this.model
     1121                        });
     1122
     1123                        preview.render();
     1124                        $( '#appearance' ).append( preview.el );
     1125                }
     1126        });
     1127
     1128        // Theme Preview view
     1129        // Set ups a modal overlay with the expanded theme data
     1130        themes.view.Preview = wp.Backbone.View.extend({
     1131
     1132                className: 'wp-full-overlay expanded',
     1133                el: '#theme-installer',
     1134
     1135                events: {
     1136                        'click .close-full-overlay': 'close',
     1137                        'click .collapse-sidebar': 'collapse'
     1138                },
     1139
     1140                // The HTML template for the theme preview
     1141                html: themes.template( 'theme-preview' ),
     1142
     1143                render: function() {
     1144                        var data = this.model.toJSON();
     1145                        this.$el.html( this.html( data ) );
     1146
     1147                        themes.router.navigate( themes.router.baseUrl( '?preview=' + this.model.get( 'id' ) ), { replace: true } );
     1148
     1149                        this.$el.fadeIn( 200, function() {
     1150                                $( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
     1151                        });
     1152                },
     1153
     1154                close: function() {
     1155                        this.$el.fadeOut( 200, function() {
     1156                                $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
     1157                        });
     1158
     1159                        themes.router.navigate( themes.router.baseUrl( '' ) );
     1160                },
     1161
     1162                collapse: function( event ) {
     1163                        this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
     1164                }
     1165        });
     1166
     1167        // Modify routes
     1168        _.extend( themes.routes.prototype, {
     1169                routes: {
     1170                        'theme-install.php?theme=:slug': 'theme',
     1171                        '': 'themes',
     1172                        'theme-install.php?sort=:sortBy': 'sort',
     1173                        'theme-install.php?preview=:slug': 'preview'
     1174                },
     1175
     1176                baseUrl: function( url ) {
     1177                        return 'theme-install.php' + url;
     1178                }
     1179        });
     1180
     1181        themes.Run.extraRoutes = function() {
     1182                var self = this;
     1183                // Handles sort route events
     1184                themes.router.on( 'route:sort', function( sortBy ) {
     1185                        $( '.theme-section[data-sort="' + sortBy + '"]' ).trigger( 'click' );
     1186                });
     1187        },
     1188
     1189        // Overwrite main application initializer
     1190        themes.Run.init = function() {
     1191                // Initializes the main view
     1192                // and bootstraps the default sorting section
     1193
     1194                // Set up the view
     1195                // Passes the default 'section' as an option
     1196                this.view = new themes.view.Appearance({
     1197                        el: $( '#appearance' ),
     1198                        section: 'featured'
     1199                });
     1200
     1201                // Render results
     1202                this.render();
     1203        }
     1204
     1205}
     1206
    8101207// Ready...
    8111208jQuery( document ).ready(
    8121209
     
    8421239        };
    8431240
    8441241        $(window).resize(function(){ tb_position(); });
    845 });
     1242});
     1243 No newline at end of file
  • wp-admin/css/themes.css

     
    2525        margin-left: 20px;
    2626}
    2727
    28 .themes-php .wrap .theme-count {
     28.themes-php .wrap .theme-count,
     29.theme-navigation .theme-count {
    2930        color: #fff;
    3031        -webkit-border-radius: 30px;
    3132        border-radius: 30px;
     
    10641065  16.2 - Install Themes
    10651066------------------------------------------------------------------------------*/
    10661067
    1067 .theme-install-php h4 {
    1068         margin: 2.5em 0 8px;
     1068.theme-install-php h2 .upload {
     1069        margin-left: 10px;
    10691070}
    1070 
    1071 .theme-install-php .tablenav {
    1072         height: auto;
     1071.theme-navigation {
     1072        background: #fff;
     1073        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
     1074        -moz-box-sizing: border-box;
     1075        box-sizing: border-box;
     1076        color: #555;
     1077        display: inline-block;
     1078        font-size: 13px;
     1079        margin: 20px 0 30px;
     1080        padding: 0 20px;
     1081        position: relative;
     1082        width: 100%;
    10731083}
    1074 
    1075 .theme-install-php .spinner {
    1076         margin-top: 9px;
    1077 }
    1078 
    1079 .available-theme {
    1080         display: inline-block;
    1081         margin-right: 10px;
     1084.upload-theme {
     1085        /*background: #fff;
     1086        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);*/
     1087        -moz-box-sizing: border-box;
     1088        box-sizing: border-box;
     1089        margin: 0px 0 0;
     1090        padding: 0;
     1091        width: 100%;
     1092        height: 0;
     1093        -webkit-transition: height 200ms;
     1094        transition: height 200ms;
    10821095        overflow: hidden;
    1083         padding: 20px 20px 20px 0;
    1084         vertical-align: top;
    1085         width: 300px;
     1096        position: relative;
     1097                top: 10px;
    10861098}
    1087 
    1088 .available-theme .screenshot {
    1089         width: 300px;
    1090         height: 225px;
     1099.upload-theme.opened {
    10911100        display: block;
    1092         border: 1px solid #ccc;
    1093         margin-bottom: 10px;
    1094         overflow: hidden;
    1095         background-color: #fff;
     1101        height: auto;
    10961102}
    1097 
    1098 .available-theme img {
    1099         width: 300px;
     1103.upload-theme .wp-upload-form {
     1104        background: #fafafa;
     1105        border: 1px solid #e5e5e5;
     1106        padding: 30px;
     1107        margin: 30px auto;
     1108        max-width: 380px;
    11001109}
    1101 
    1102 .available-theme h3 {
    1103         margin: 15px 0 0;
     1110.upload-theme .install-help {
     1111        color: #999;
     1112        font-size: 18px;
     1113        font-style: normal;
     1114        margin: 0;
     1115        padding: 40px 0 0;
     1116        text-align: center;
    11041117}
    1105 
    1106 .available-theme .theme-author {
    1107         line-height: 18px;
     1118.upload-theme.opened + .theme-navigation,
     1119.upload-theme.opened + .theme-navigation + .theme-browser {
     1120        display: none;
    11081121}
    1109 
    1110 .available-theme .action-links {
    1111         margin-top: 10px;
    1112         overflow: hidden;
     1122.theme-navigation .theme-count {
     1123        top: 3px;
     1124        margin-left: 0;
    11131125}
    1114 
    1115 .available-theme a.screenshot:focus {
    1116         border-color: #777;
     1126.theme-section,
     1127.theme-filter {
     1128        border-bottom: 4px solid #fff;
     1129        color: #666;
     1130        cursor: pointer;
     1131        display: inline-block;
     1132        margin: 0 10px;
     1133        padding: 15px 0;
     1134        -moz-transition: border-color .1s ease-in;
     1135        -webkit-transition: border-color .1s ease-in;
    11171136}
    1118 
    1119 .available-theme .action-links li {
    1120         float: left;
    1121         padding-right: 10px;
    1122         margin-right: 10px;
    1123         border-right: 1px solid #dfdfdf;
     1137.theme-section.current,
     1138.theme-filter.current {
     1139        border-bottom: 4px solid #666;
     1140        color: #222;
    11241141}
    1125 
    1126 .available-theme .action-links li {
    1127         padding-right: 8px;
    1128         margin-right: 8px;
     1142.theme-top-filters {
     1143        display: inline-block;
     1144        /*padding-bottom: 4px;
     1145        padding-left: 20px;
     1146        margin-left: 20px;*/
    11291147}
    1130 
    1131 .ie8 .available-theme .action-links li {
    1132         padding-right: 7px;
    1133         margin-right: 7px;
     1148.theme-navigation .more-filters {
     1149        color: #666;
     1150        cursor: pointer;
     1151        display: inline-block;
     1152        margin: 0 10px;
     1153        padding: 4px 5px;
     1154        -moz-transition: color .1s ease-in;
     1155        -webkit-transition: color .1s ease-in, background .1s ease-in;
    11341156}
    1135 
    1136 .available-theme .action-links li:last-child {
    1137         padding-right: 0;
    1138         margin-right: 0;
    1139         border-right: 0;
     1157body.more-filters-opened .more-filters,
     1158.theme-navigation .more-filters.current {
     1159        background: rgb(46, 162, 204);
     1160        border-radius: 2px;
     1161        border: none;
     1162        color: #fff;
    11401163}
    1141 
    1142 .available-theme .action-links .delete-theme {
    1143         float: right;
    1144         margin-left: 8px;
    1145         margin-right: 0;
     1164.theme-install-php .theme-search {
     1165        position: absolute;
     1166                right: 10px;
     1167                top: 9px;
     1168        font-size: 16px;
     1169        font-weight: 300;
     1170        line-height: 1.5;
     1171        width: 280px;
    11461172}
     1173.more-filters {
    11471174
    1148 .available-theme .action-links .delete-theme a {
    1149         color: red;
    1150         padding: 2px;
    11511175}
    1152 
    1153 .available-theme .action-links .delete-theme a:hover {
    1154         background: red;
     1176.more-filters:before {
     1177        color: #777;
     1178        text-align: center;
     1179        margin: 0 5px 0 0;
     1180        content: "\f111";
     1181        display: inline-block;
     1182        width: 16px;
     1183        height: 16px;
     1184        -webkit-font-smoothing: antialiased;
     1185        font-size: 16px;
     1186        line-height: 1;
     1187        font-family: "dashicons";
     1188        text-decoration: inherit;
     1189        font-weight: normal;
     1190        font-style: normal;
     1191        vertical-align: top;
     1192        -moz-transition: color .1s ease-in 0;
     1193        -webkit-transition: color .1s ease-in 0;
     1194        text-align: center;
     1195}
     1196.more-filters.current:before {
    11551197        color: #fff;
    1156         text-decoration: none;
    11571198}
    1158 
    1159 .available-theme .action-links p {
    1160         float: left;
     1199.more-filters-container {
     1200        display: none;
     1201        padding: 30px;
     1202        border-top: 1px solid #eee;
     1203        margin: 0 -20px;
     1204        background: #fafafa;
    11611205}
    1162 
    1163 /* Allow for three-up in small windows when sidebar is collapsed */
    1164 @media only screen and (max-width: 1200px) {
    1165         .folded .available-theme,
    1166         .folded .available-theme .screenshot {
    1167                 width: 300px;
    1168         }
    1169 
    1170         .folded .available-theme .screenshot {
    1171                 height: 225px;
    1172         }
     1206body.more-filters-opened .more-filters-container {
     1207        display: block;
    11731208}
    1174 
    1175 /* Adjust three-up display in smaller windows when sidebar is collapsed */
    1176 @media only screen and (max-width: 1079px) {
    1177         .folded .available-theme,
    1178         .folded .available-theme .screenshot {
    1179                 width: 270px;
    1180         }
    1181 
    1182         .folded .available-theme .screenshot {
    1183                 height: 203px;
    1184         }
     1209.theme-install-php .add-new-theme {
     1210        display: none !important;
    11851211}
    11861212
    1187 /* Allow for three-up on 1024px wide screens, e.g. tablets */
    1188 @media only screen and (max-width: 1200px) {
    1189         .available-theme,
    1190         .available-theme .screenshot {
    1191                 width: 240px;
    1192         }
    1193 
    1194         .available-theme .screenshot {
    1195                 height: 180px;
    1196         }
    1197 
    1198         .available-theme img {
    1199                 width: 100%;
    1200         }
     1213.rating {
     1214        margin: 30px 0;
    12011215}
    1202 
    1203 .feature-filter {
    1204         padding: 8px 12px 0;
     1216.rating span:before {
     1217        color: #E6B800;
     1218        content: "\f154";
     1219        display: inline-block;
     1220        -webkit-font-smoothing: antialiased;
     1221        font: normal 20px/1 'dashicons';
     1222        vertical-align: top;
    12051223}
     1224/* Half stars */
     1225.rating-10 span.one:before,
     1226.rating-30 span.two:before,
     1227.rating-50 span.three:before,
     1228.rating-70 span.four:before,
     1229.rating-90 span.five:before {
     1230        content: "\f459";
     1231}
     1232/* Full stars */
     1233.rating-20 span.one:before {
     1234        content: "\f155";
     1235}
     1236.rating-30 span.one:before,
     1237.rating-40 span.one:before,
     1238.rating-40 span.two:before {
     1239        content: "\f155";
     1240}
     1241.rating-50 span.one:before,
     1242.rating-50 span.two:before,
     1243.rating-60 span.one:before,
     1244.rating-60 span.two:before,
     1245.rating-60 span.three:before {
     1246        content: "\f155";
     1247}
     1248.rating-70 span.one:before,
     1249.rating-70 span.two:before,
     1250.rating-70 span.three:before,
     1251.rating-80 span.one:before,
     1252.rating-80 span.two:before,
     1253.rating-80 span.three:before,
     1254.rating-80 span.four:before {
     1255        content: "\f155";
     1256}
    12061257
    1207 .feature-filter .feature-group {
    1208         float: left;
    1209         margin: 5px 10px 10px;
     1258.rating-90 span.one:before,
     1259.rating-90 span.two:before,
     1260.rating-90 span.three:before,
     1261.rating-90 span.four:before,
     1262.rating-100 span.one:before,
     1263.rating-100 span.two:before,
     1264.rating-100 span.three:before,
     1265.rating-100 span.four:before,
     1266.rating-100 span.five:before {
     1267        content: "\f155";
    12101268}
    12111269
    1212 .feature-filter .feature-group li {
    1213         display: inline-block;
    1214         vertical-align: top;
    1215         list-style-type: none;
    1216         padding-right: 25px;
    1217         width: 150px;
     1270.loading-themes .theme-browser,
     1271.error .theme-browser {
     1272        display: none;
    12181273}
     1274.loading-themes .spinner {
     1275        display: block;
     1276        margin: 40px auto 0;
     1277        float: none;
     1278}
    12191279
    12201280/*------------------------------------------------------------------------------
    12211281  16.3 - Custom Header Screen
  • wp-admin/theme-install.php

     
    2020        exit();
    2121}
    2222
    23 $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
    24 $pagenum = $wp_list_table->get_pagenum();
    25 $wp_list_table->prepare_items();
     23// $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
     24// $pagenum = $wp_list_table->get_pagenum();
     25// $wp_list_table->prepare_items();
    2626
    27 $title = __('Install Themes');
     27$title = __( 'Add Themes' );
    2828$parent_file = 'themes.php';
    29 if ( !is_network_admin() )
     29
     30if ( ! is_network_admin() ) {
    3031        $submenu_file = 'themes.php';
     32}
    3133
    32 wp_enqueue_script( 'theme-install' );
     34// wp_enqueue_script( 'theme-install' );
    3335wp_enqueue_script( 'theme-preview' );
    3436
    35 $body_id = $tab;
     37wp_localize_script( 'theme', '_wpThemeSettings', array(
     38        'themes'   => false,
     39        'settings' => array(
     40                'isBrowsing'    => (bool) ( get_current_screen()->id == 'theme-install' ),
     41                'canInstall'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ),
     42                'installURI'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null,
     43                'adminUrl'      => parse_url( admin_url(), PHP_URL_PATH ),
     44                'updateURI'     => admin_url( 'update.php' ),
     45                '_nonceInstall' => wp_create_nonce( 'install-theme' )
     46        ),
     47        'l10n' => array(
     48                'addNew' => __( 'Add New Theme' ),
     49                'search'  => __( 'Search Themes' ),
     50                'searchPlaceholder' => __( 'Search themes...' ),
     51                'upload' => __( 'Upload Theme' ),
     52                'back'   => __( 'Back' ),
     53                'error'  => __( 'There was a problem trying to load the themes. Please, try again.' ),
     54        ),
     55        'browse' => array(
     56                'sections' => apply_filters( 'install_theme_sections', array(
     57                        'featured' => __( 'Featured Themes' ),
     58                        'popular'  => __( 'Popular Themes' ),
     59                        'new'      => __( 'Newest Themes' ),
     60                ) ),
     61                'publicThemes' => ( get_current_screen()->id == 'theme-install' ) ? prepare_public_themes_for_js() : null,
     62        ),
     63) );
    3664
     65wp_enqueue_script( 'theme' );
     66
     67// $body_id = $tab;
     68
    3769/**
    3870 * Fires before each of the tabs are rendered on the Install Themes page.
    3971 *
     
    4375 *
    4476 * @since 2.8.0
    4577 */
    46 do_action( "install_themes_pre_{$tab}" );
     78// do_action( "install_themes_pre_{$tab}" );
    4779
    4880$help_overview =
    4981        '<p>' . sprintf(__('You can find additional themes for your site by using the Theme Browser/Installer on this screen, which will display themes from the <a href="%s" target="_blank">WordPress.org Theme Directory</a>. These themes are designed and developed by third parties, are available free of charge, and are compatible with the license WordPress uses.'), 'http://wordpress.org/themes/') . '</p>' .
     
    73105);
    74106
    75107include(ABSPATH . 'wp-admin/admin-header.php');
     108
     109/**
     110 * Uploader
     111 */
     112function install_themes_upload() {
     113        ?>
     114        <div class="upload-theme">
     115                <p class="install-help"><?php _e( 'If you have a theme in a .zip format, you may install it by uploading it here.' ); ?></p>
     116                <form method="post" enctype="multipart/form-data" class="wp-upload-form" action="<?php echo self_admin_url('update.php?action=upload-theme'); ?>">
     117                        <?php wp_nonce_field( 'theme-upload'); ?>
     118                        <input type="file" name="themezip" />
     119                        <?php submit_button( __( 'Install Now' ), 'button', 'install-theme-submit', false ); ?>
     120                </form>
     121        </div>
     122        <?php
     123}
     124add_action( 'install_themes_upload', 'install_themes_upload', 10, 1 );
     125
    76126?>
    77 <div class="wrap">
    78 <h2><?php echo esc_html( $title ); ?></h2>
    79 <?php
     127<div id="appearance" class="wrap">
     128        <h2>
     129                <?php echo esc_html( $title ); ?>
     130                <a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
     131        </h2>
    80132
    81 $wp_list_table->views(); ?>
     133        <?php install_themes_upload(); ?>
    82134
    83 <br class="clear" />
     135        <div class="theme-navigation">
     136                <span class="theme-count"></span>
     137                <span class="theme-section current" data-sort="featured"><?php esc_html_e( 'Featured' ); ?></span>
     138                <span class="theme-section" data-sort="popular"><?php esc_html_e( 'Popular' ); ?></span>
     139                <span class="theme-section" data-sort="new"><?php esc_html_e( 'Latest' ); ?></span>
     140                <div class="theme-top-filters">
     141                        <span class="theme-filter" data-filter="photoblogging">Photography</span>
     142                        <span class="theme-filter" data-filter="responsive-layout">Responsive</span>
     143                        <span class="theme-filter more-filters">More</span>
     144                </div>
     145                <div class="more-filters-container">
     146                        Display more filters.
     147                </div>
     148        </div>
     149        <div class="theme-browser"></div>
     150        <div class="theme-overlay"></div>
     151        <div id="theme-installer" class="wp-full-overlay expanded"></div>
     152
     153        <span class="spinner"></span>
     154
     155        <br class="clear" />
    84156<?php
    85157/**
    86158 * Fires at the top of each of the tabs on the Install Themes page.
     
    93165 *
    94166 * @param int $paged Number of the current page of results being viewed.
    95167 */
    96 do_action( "install_themes_{$tab}", $paged );
     168// do_action( "install_themes_{$tab}", $paged );
    97169?>
    98170</div>
     171
     172
     173<script id="tmpl-theme" type="text/template">
     174        <# if ( data.screenshot_url ) { #>
     175                <div class="theme-screenshot">
     176                        <img src="{{ data.screenshot_url }}" alt="" />
     177                </div>
     178        <# } else { #>
     179                <div class="theme-screenshot blank"></div>
     180        <# } #>
     181        <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
     182        <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
     183        <h3 class="theme-name">{{{ data.name }}}</h3>
     184
     185        <div class="theme-actions">
     186                <a class="button button-primary" href="{{{ data.installURI }}}"><?php esc_html_e( 'Install' ); ?></a>
     187                <a class="button button-secondary preview install-theme-preview" href=""><?php esc_html_e( 'Preview' ); ?></a>
     188        </div>
     189</script>
     190
     191<script id="tmpl-theme-single" type="text/template">
     192        <div class="theme-backdrop"></div>
     193        <div class="theme-wrap">
     194                <div class="theme-header">
     195                        <button alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></button>
     196                        <button alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></button>
     197                        <button alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></button>
     198                </div>
     199                <div class="theme-about">
     200                        <div class="theme-screenshots">
     201                        <# if ( data.screenshot_url ) { #>
     202                                <div class="screenshot"><img src="{{ data.screenshot_url }}" alt="" /></div>
     203                        <# } else { #>
     204                                <div class="screenshot blank"></div>
     205                        <# } #>
     206                        </div>
     207
     208                        <div class="theme-info">
     209                                <h3 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span></h3>
     210                                <h4 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></h4>
     211                                <p class="theme-description">{{{ data.description }}}</p>
     212
     213                                <div class="rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
     214                                        <span class="one"></span>
     215                                        <span class="two"></span>
     216                                        <span class="three"></span>
     217                                        <span class="four"></span>
     218                                        <span class="five"></span>
     219                                </div>
     220                        </div>
     221                </div>
     222
     223                <div class="theme-actions">
     224                        <a href="{{{ data.installURI }}}" class="button button-primary"><?php _e( 'Install' ); ?></a>
     225                        <a href="" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
     226                        <a href="" class="button button-secondary"><?php _e( 'Download' ); ?></a>
     227                </div>
     228        </div>
     229</script>
     230
     231<script id="tmpl-theme-preview" type="text/template">
     232        <div class="wp-full-overlay-sidebar">
     233                <div class="wp-full-overlay-header">
     234                        <a href="" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
     235                        <a href="{{{ data.installURI }}}" class="button button-primary theme-install"><?php _e( 'Install' ); ?></a>
     236                </div>
     237                <div class="wp-full-overlay-sidebar-content">
     238                        <div class="install-theme-info">
     239                                <h3 class="theme-name">{{{ data.name }}}</h3>
     240                                <span class="theme-by"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></span>
     241
     242                                <img class="theme-screenshot" src="{{ data.screenshot_url }}" alt="" />
     243
     244                                <div class="theme-details">
     245                                        <div class="star-rating" title="4.5 rating based on 25 ratings"></div>
     246                                        <div class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></div>
     247                                        <div class="theme-description">{{{ data.description }}}</div>
     248                                </div>
     249                        </div>
     250                </div>
     251                <div class="wp-full-overlay-footer">
     252                        <a href="" class="collapse-sidebar" title="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
     253                                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
     254                                <span class="collapse-sidebar-arrow"></span>
     255                        </a>
     256                </div>
     257        </div>
     258        <div class="wp-full-overlay-main">
     259                <iframe src="{{{ data.preview_url }}}" />
     260        </div>
     261</script>
     262
    99263<?php
    100264include(ABSPATH . 'wp-admin/admin-footer.php');