Thứ Năm, 22 tháng 1, 2015

Set Default Terms for your Custom Taxonomies

Wordpress - Set Default Terms for your Custom Taxonomies


---o0o---


Original link

Set default category for custom post type

            
function mfields_set_default_object_terms( $post_id, $post ) {
    if ( 'publish' === $post->post_status && $post->post_type === 'your_custom_post_type' ) {
        $defaults = array(
            'your_taxonomy_id' => array( 'your_term_slug' )
            //'your_taxonomy_id' => array( 'your_term_slug', 'your_term_slug' )
            );
        $taxonomies = get_object_taxonomies( $post->post_type );
        foreach ( (array) $taxonomies as $taxonomy ) {
            $terms = wp_get_post_terms( $post_id, $taxonomy );
            if ( empty( $terms ) && array_key_exists( $taxonomy, $defaults ) ) {
                wp_set_object_terms( $post_id, $defaults[$taxonomy], $taxonomy );
            }
        }
    }
}
add_action( 'save_post', 'mfields_set_default_object_terms', 100, 2 );
Người đăng: vào lúc Không có nhận xét nào:

Google Maps Overlays

Google Maps Overlays


---o0o---


Original link

Overlays are objects on the map that are bound to latitude/longitude coordinates.

Google Maps has several types of overlays:

  • Marker - Single locations on a map. Markers can also display custom icon images
  • Polyline - Series of straight lines on a map
  • Polygon - Series of straight lines on a map, and the shape is "closed"
  • Circle and Rectangle
  • Info Windows - Displays content within a popup balloon on top of a map
  • Custom overlays

1. Add a marker


<script>
    var myCenter = new google.maps.LatLng(51.508742,-0.120850);
    function initialize()
    {
        var mapProp = {
            center:myCenter,
            zoom:5,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

        var marker = new google.maps.Marker({
            position:myCenter,
        });
        marker.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
  • google.maps.Marker: creat new marker
  • marker.setMap(map): add the marker to the map

2. Using icon instead marker

add icon property when creat the marker


var marker = new google.maps.Marker({
    position:myCenter,
    icon:'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Left-Pink-icon.png'
});

3. InforWindow

inforWindow's position depend on marker position

var infowindow = new google.maps.InfoWindow({
    content:"Hello World!"
});

infowindow.open(map,marker);

4. Set Markers and Open InfoWindow for Each Marker

http://www.w3schools.com/googleAPI/google_maps_events.asp
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:

Wordpress - Creat new theme

Wordpress - Creat new theme


---o0o---


1. Create new folder to content theme

wp-content/themes/allegro

wp-content/themes/allegro/style.css

Create style.css file with content as below


/*
Theme Name: Allegro
*/

Create file: allegro/index.php

Login Admin => Appearance Tab, new theme named 'Allegro'

Click [Active] button to active this theme

Go to Timber to download Timber plugin

Create folders: allegro/views, allegro/js, allegro/images, allegro/fonts ... to separate files by their function

2. Create html file to show content

a) Create file: allegro/views/base.html with content


<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        {{ wp_head }}

        <link href='{{ template_uri }}/main.css' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

        <link rel="shortcut icon" href="{{ template_uri }}/images/favicon.ico" type="image/x-icon">
        <link rel="icon" href="{{ template_uri }}/images/favicon.ico" type="image/x-icon">
        <meta name="viewport" content="width=device-width, user-scalable=no">

        <script type="text/javascript" src="{{ template_uri }}/js/app.js"></script>
    </head>
    <body>
        <div class="header">

        </div>
        {% block content %}
        {% endblock %}

        <div class="footer">

        </div>
        {{ wp_footer }}
        {% block scripts %}
        {% endblock %}
    </body>
</html>

b) in index.php file

<?php
$context = Timber::get_context();
Timber::render('home.html', $context);

So create allegro/views/home.html file


{% extends "base.html" %}


{% block content %}
<div class="page">

</div<
{% endblock %}





{% block scripts %}
<script type="text/javascript"<
    jQuery(window).load(function() {
        var newClass = 'home_page';
        jQuery('body').addClass(newClass);
    });
</script<
{% endblock %}

3. Note for ubuntu

Display images

chmod - R 777 wp-content/themes/allegro/images/logo.png

4. Create header Menu & footer Menu

In allegro/functions.php file


add_action( 'init', 'register_my_menus' );

function register_my_menus() {
    register_nav_menus(
        array(
          'header-menu' => __( 'Header Menu' ),
          'footer-menu' => __( 'Footer Menu' )
        )
    );
}

Call object menu


add_filter('timber_context', 'add_to_context');

function add_to_context($data){
        $data['header_menu'] = new TimberMenu('header-menu');
        $data['footer_menu'] = new TimberMenu('footer-menu');

        return $data;
 }

Display menu

In base.html


HEADER MENU
<ul class="menu-items">
    {% for item in header_menu.get_items %}
    <li class="{% if item.current %}current{% endif %} {{ item.class }}">
        <a href="{{ item.get_path }}">{{item.title}}</a>
        {% if item.get_children %}
        <ul class="nav-drop">
            {% for child in item.get_children %}
            <li class="nav-drop-item"><a href="{{child.get_link}}">{{child.title}}</a></li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
</ul>

FOOTER MENU
<ul class="menu-items">
    {% for item in footer_menu.get_items %}
    <li class="{% if item.current %}current{% endif %} {{ item.class }}">
        <a href="{{ item.get_path }}">{{item.title}}</a>
    </li>
    {% endfor %}
</ul>

5. Create new post_type width taxonomy

init function


add_action('init', 'create_posttype');
add_action('init', 'create_taxonomies', 0);

declaring new post_type named allegro_artist

function create_posttype() {
        //allegro_artist post_type
        register_post_type('allegro_artist', array(
                'labels' => array(
                    'name' => __('Artists'),
                    'singular_name' => __('Artist'),
                ),
                'public' => true,
                'rewrite' => array('slug' => 'artist'),
                'taxonomies' => array('artist_category'),
                'supports' => array('title'),
            )
        );
}

declaring new taxonomy like category for allegro_artist post_type

function create_taxonomies() {
    //allegro_artist category
    $labels = array(
        'name' => _x( 'Artists Categories', 'taxonomy general name' ),
        'singular_name' => _x( 'Artists Category', 'taxonomy singular name' ),
        'search_items' =>  __( 'Search Artists Categories' ),
        'all_items' => __( 'All Artists Categories' ),
        'parent_item' => __( 'Parent Artists Category' ),
        'parent_item_colon' => __( 'Parent Artists Category:' ),
        'edit_item' => __( 'Edit Artists Category' ),
        'update_item' => __( 'Update Artists Category' ),
        'add_new_item' => __( 'Add New Artists Category' ),
        'new_item_name' => __( 'New Artists Category' ),
    );

    register_taxonomy('artist_category',array('allegro_artist'), array(
        'hierarchical' => true,
        'labels' => $labels,
        'show_ui' => true,
        'query_var' => true,
        'show_in_nav_menus' => true,
        'show_admin_column' => true,
        'rewrite' => array('slug' => 'artist_category', 'with_front' => false),
    ));
}

declaring new taxonomy like tags for allegro_artist post_type

function create_taxonomies() {
    //allegro_artist taxonomy
    $labels = array(
        'name' => __('Artists tags'),
        'singular_name' => __('Artist tag'),
    );

    $args = array(
        'hierarchical' => false,
        'labels' => $labels,
        'show_ui' => true,
        'show_admin_column' => true, //is display in admin colum
        'query_var' => true,
    );

    register_taxonomy('artist_tags', array('allegro_artist'), $args);
}
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: ,

Chủ Nhật, 11 tháng 1, 2015

Google Map - Creat a map

Google Map


---o0o---


Original link

I. Creates a Google Map - when the page is loaded

1. Call API


<script src="http://maps.googleapis.com/maps/api/js"></script>

2. Init js function to set map properties

<script>
    function initialize() {
        var mapProp = {
            center:new google.maps.LatLng(51.508742,-0.120850),
            zoom:5,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

3. Creat div to contain the map

<div id="googleMap" style="width:500px;height:200px;"<>/div>
  • initialize : Init function
  • mapProp: Creat an object to define the properties for the map
  • google.maps.Map: Creat new map object which have the mapProp properties
  • google.maps.event.addDomListener: Add an event listener to execute the initialize() function when the page is loaded

I. Creates a Google Map - after the page is loaded

1. Creat js function

 <script>
     function init()
     {
         var mapProp = {
             center: new google.maps.LatLng(51.508742,-0.120850),
             zoom:7,
             mapTypeId: google.maps.MapTypeId.ROADMAP
         };
         var map = new google.maps.Map(document.getElementById("googleMap1"),mapProp);
     }

     function loadScript()
     {
         var script = document.createElement("script");
         script.type = "text/javascript";
         script.src = "http://maps.googleapis.com/maps/api/js?callback=init";
         document.body.appendChild(script);
     }
     window.onload = loadScript;
 </script>
  • The loadScript() function creates the Google Maps API <script> tag
  • callback=init: this parameter to execute init() function after the API is fully loaded
  • window.onload: load the Google Maps API after the page has fully loaded
Người đăng: vào lúc 2 nhận xét:
Nhãn: , ,

Thứ Sáu, 9 tháng 1, 2015

JavaScript

JavaScript


---o0o---


Original link

1. Change HTML Content

a) Creat content


<p id="demo">Before.</p>

b) Add js to change content


<button type="button" onclick="document.getElementById('demo').innerHTML = 'After'"> Click Me!</button>

Before

  • getElementById(): accesses the first element with the specified id
  • innerHTML: This property sets or returns the HTML content of an element.

2. Change HTML Attributes

a) Creat object


<img id="myImage" onclick="changeImage()" src="http://www.w3schools.com/js/pic_bulboff.gif" width="50">

b) Add js to change src of image


<script>
    function changeImage() {
        var image = document.getElementById('myImage');
        if (image.src.match("bulbon")) {
            image.src = "http://www.w3schools.com/js/pic_bulboff.gif";
        } else {
            image.src = "http://www.w3schools.com/js/pic_bulbon.gif";
        }
    }
</script>
  • image.src: get src of image => return a string(http://www.w3schools.com/js/pic_bulboff.gif)
  • image.src.match: Search "bulbon" text in above string => return true or false

3. Change HTML Styles

a) Creat content


<p id="demo1">Content</p>

b) Add js to change style


<script>
    function myFunction1() {
        var x = document.getElementById("demo1");
        x.style.fontSize = "25px";
        x.style.color = "red";
    }
</script>

c) Call js by onclick


<p id="demo1" onclick="myFunction1()">Content</p>

Click on content to change style

Content

  • x.style: Set the style properties of an existing element

4. Validate Data

a) Creat input


<input id="numb" type="number">

b) Add js to validate

<script>
    function myFunction2() {
        var x, text;

        // Get the value of the input field with id="numb"
        x = document.getElementById("numb").value;

        // If x is Not a Number or less than one or greater than 10
        if (isNaN(x) || x < 1 || x > 10) {
            text = "Input not valid";
        } else {
            text = "Input OK";
        }
        document.getElementById("demo2").innerHTML = text;
    }
</script>

c) Call function


<button type="button" onclick="myFunction2()">Submit</button>

d) Print result


<p id="demo2"></p>

Please input a number between 1 and 10:

  • isNaN(): Check whether a number is an illegal number
  • .value: Return the value property
  • innerHTML: This property sets or returns the HTML content of an element.
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:

Thứ Ba, 6 tháng 1, 2015

jQuery - div move with page scroll jquery

jQuery - div move with page scroll jquery


---o0o---


Original link

1. Creat div

This div move when scroll

            <div id="div">This div move when scroll</div>

2. Styled for div

            <style>
                #div {
                    background-color: #fca9a9;
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            </style>

3. Add jQuery


        <script>
            $(window).scroll(function () {
                $('#div').stop().animate({
                    'marginTop': $(window).scrollTop() + 'px',
                    'marginLeft': $(window).scrollLeft() + 'px'
                }, 'slow');
            });
        </script>

4. Sample data to see how it works

scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:
Đăng ký: Nhận xét (Atom)