WordPress shortcode Table

Lasciatemi mostrare come sia possibile usare gli shortcode – indentati (nested) – di WordPress per creare tabelle da inserire in post e pagine. Ad esempio, vi mostrerò come creare tabelle comparative, quelle usate per mettere a confronto le caratteriste di applicazioni o prodotti, del tipo:


Quello che andremo ad ottenere sarà la possibilità di insere una tabella con una sintassi del tipo:

1
2
3
4
5
[table_compare title="Caratteristiche" cols="App 1,App 2,App 3"]
[table_compare_row title="features #1"]1,0,0[/table_compare_row]
[table_compare_row title="features #2"]1,Yes,0[/table_compare_row]
[table_compare_row title="features #3"]1,-,No[/table_compare_row]
[/table_compare]

La prima cosa da fare è preparare nel file functions.php le nostre funzioni per intercettare ed elaborare gli shortcode:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<?php
/**
 * Crea tabella di comparazione
 *
 * [table_compare title="features" cols="text,text,text"]
 *
 * @param  $attrs
 * @param null $content
 * @return void
 */
function ext_table_compare($attrs, $content = null) {
 $title = "";
 $cols = "";
 extract(shortcode_atts(array('title' => '',
  'cols' => '',
 ), $attrs));

 $aCols = explode(',', $cols);
 ob_start();
?><table class="extTableCompare" cellpadding="0" cellspacing="0" border="0">
 <thead>
  <tr>
   <th><?php _e($title, 'textdomain') ?></th>
    <?php foreach($aCols as $col) : ?>
     <th scope="col"><?php echo $col ?></th>
    <?php endforeach; ?>
    </tr>
 </thead>
 <tbody>
  <?php echo do_shortcode(str_replace("<br />", "", $content)); ?>
 </tbody>
</table>
<?php
 $result = ob_get_contents();
 ob_end_clean();
 return str_replace("<br />", "", $result);
}

add_shortcode("table_compare", "ext_table_compare");

/**
 * Crea una riga di una tabella comparativa
 *
 * [table_compare_row title="featured #1"]1,0,0[/table_compare_row]
 *
 * @param  $attrs
 * @param null $content
 * @return void
 */
function ext_table_row($attrs, $content = null) {
 $title = "";
 extract(shortcode_atts(array('title' => '',), $attrs));
 $aValues = explode(',', $content);
 ob_start();
?><tr>
 <th><?php _e($title, 'textdomain') ?></th>
 <?php foreach($aValues as $value) : ?>
 <?php
  // Questo è un esempio di come sostituire un determinato
  // valore con un'immagine - vedi css sotto
  if($value == "1") {
    $value = '<span class="true"></span>';
  } else if($value == "0")  {
    $value = '<span class="false"></span>';
  }
?>
<td><?php echo $value ?></td>
 <?php endforeach; ?>
</tr>
<?php
 $result = ob_get_contents();
 ob_end_clean();
 return $result;
}
add_shortcode("table_compare_row", "ext_table_row");
?>

Un possibile stile css da applicare è:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/* Ext Table Compare
-------------------------------------------------------------------------------*/
table.extTableCompare {
width:100%;
margin:32px 0;
}
table.extTableCompare thead {}
table.extTableCompare thead th:first-child {
-moz-border-radius:8px 0 0 0;
-webkit-border-radius:8px 0 0 0;
border-radius:8px 0 0 0;
}
table.extTableCompare thead th {
padding:12px;
border-bottom:1px solid #aaa;
}
table.extTableCompare thead th:nth-child(2) {
background-color: #a2daa0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#82b881), to(#a2daa0)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #82b881, #a2daa0); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient(top, #82b881, #a2daa0); /* FF3.6 */
background-image:     -ms-linear-gradient(top, #82b881, #a2daa0); /* IE10 */
background-image:      -o-linear-gradient(top, #82b881, #a2daa0); /* Opera 11.10+ */
background-image:         linear-gradient(top, #82b881, #a2daa0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#82b881', EndColorStr='#a2daa0'); /* IE6–IE9 */

color:#fff;
text-shadow:1px 1px 0px #888;
border:none;
font-size:20px;

-moz-border-radius:8px 8px 0 0;
-webkit-border-radius:8px 8px 0 0;
border-radius:8px 8px 0 0;
}
table.extTableCompare thead th:last-child {
-moz-border-radius:0 8px 0 0;
-webkit-border-radius:0 8px 0 0;
border-radius:0 8px 0 0;
}

table.extTableCompare tbody {}
table.extTableCompare tbody th {
vertical-align:middle;
text-align:left;
border-bottom:1px solid #aaa;
border-left:1px solid #bbb;
background:#fff;
}
table.extTableCompare tbody tr:nth-child(2n) {
background:#f3f3f3;
}
table.extTableCompare tbody td:nth-child(2) {
background:#a2daa0;
color:#fff;
border:none;
}
table.extTableCompare tbody tr:last-child td:nth-child(2) {
background-color: #a2daa0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a2daa0), to(#82b881)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #a2daa0, #82b881); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient(top, #a2daa0, #82b881); /* FF3.6 */
background-image:     -ms-linear-gradient(top, #a2daa0, #82b881); /* IE10 */
background-image:      -o-linear-gradient(top, #a2daa0, #82b881); /* Opera 11.10+ */
background-image:         linear-gradient(top, #a2daa0, #82b881);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#a2daa0', EndColorStr='#82b881'); /* IE6–IE9 */

}
table.extTableCompare tbody td:first-child {}
table.extTableCompare tbody td {
padding:12px;
border-bottom:1px solid #aaa;
border-right:1px solid #bbb;
text-align:center;
}

table.extTableCompare tbody td span.true {
display:block;
width:22px;
height:18px;
text-indent:-10000px;
background:url(images/okWrong.png) no-repeat;
margin:0 auto;
}
table.extTableCompare tbody td span.false {
display:block;
width:22px;
height:21px;
text-indent:-10000px;
background:url(images/okWrong.png) left -18px no-repeat;
margin:0 auto;
}

Non ci sono commenti per questo Post

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
					<code></code> // blocco generico
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA