CSS Flags library

外掛說明

The CSS Flags plugin / library for WordPress loads a dynamicaly created CSS with responsive flags.

Note: CSS Flags is not a standalone plugin/library, To display the flags you will have to add code to your theme using your own plugin or theme functions.php

You can view the flags at my site

Sample CSS:

.css-flag.sami {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAyMCIgaGVpZ2h0PSIxNTAwIj48cmVjdCB3aWR0aD0iNjQ1IiBoZWlnaHQ9IjE1MDAiIGZpbGw9IiNkODFlMDUiLz48cmVjdCB4PSI2NDUiIHdpZHRoPSIxNDAiIGhlaWdodD0iMTUwMCIgZmlsbD0iIzAwN2EzZCIvPjxyZWN0IHg9Ijc4NSIgd2lkdGg9IjE0MCIgaGVpZ2h0PSIxNTAwIiBmaWxsPSIjZmNkMTE2Ii8+PHJlY3QgeD0iOTI1IiB3aWR0aD0iMTA5NSIgaGVpZ2h0PSIxNTAwIiBmaWxsPSIjMDAzOGE4Ii8+PHBhdGggZD0iTSA3ODUsMzEwIGEgNDQwIDQ0MCAwIDAgMCAwLDg4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAzOGE4IiBzdHJva2Utd2lkdGg9IjgwIi8+PHBhdGggZD0iTSA3ODUsMzEwIGEgNDQwIDQ0MCAwIDAgMSAwLDg4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDgxZTA1IiBzdHJva2Utd2lkdGg9IjgwIi8+PC9zdmc+');
    height: 100%;
    width: 134.666666667%;
    background-size: 100% 100%;
}
.css-flag.sami-landscape {
    height: 100%;
    width: 134.666666667%;
}
.css-flag.sami-portrait {
    height: 74.2574257426%;
    width: 100%;
}

Usage

The total CSS file size is 4 MB, and you don’t want to send all that data back to the users, so you must use one of the following filters in your plugin or theme.

css_flags_countries: Load flags for one or more countries

add_filter('css_flags_countries', function() {
    return array('no'); // Array with ISO_3166-1_alpha-2 country codes: http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements
});

css_flags_regions: Load the flags for one or more regions. You can choose between europe, oceania, africa, asia, northamerica, southamerica and middleeast.

add_filter('css_flags_regions', function() {
    return array('europe'); //europe, oceania, africa, asia, northamerica, southamerica, middleeast
});

css_flags_exclude: Exclude some countries from the list. This filter must be used in combination with the css_flags_countries or css_flags_regions filters

add_filter('css_flags_exclude', function() {
    return array('eu');
});

css_flags_cachetime: Change the cache time, default it’s 7200 (60x60x2 = 2 hours)

add_filter('css_flags_cachetime', function() {
    return 172800; // 2 days
});

If you must (but you shouldn’t), you can load all the CSS flags using the following:

add_filter('css_flags_countries', function() {
    return array('all'); // load all country flags (don't it's 4MB)
});

More information at GitHub

Credits

The original CSS file is from http://www.phoca.cz/cssflags/. If you only need the CSS file, grab it there.