<

Lista tags wordpress

Questo pattern racchiude una lista dei tag relativi al post corrente. Il pattern può essere inserito ovunque ed è completamente personalizzabile utilizzando gli strumenti del Gpci framework evidenziati nella documentazione rilevante. Notare che come sempre il css è scritto nel contenitore più esterno e, dato che probabilmente sarà utilizzato in una query, ricordarsi di spostare il codice a livello template, pagina o globale per non ripeterlo ad ogni blocco!

<!-- wp:gpci/container {"tag":"nav","className":"tags-nav","style":{"spacing":{"margin":{"left":"0"}}},"metadata":{"name":"Nav"},"ClientId":"1747189e-da40-480b-89c7-57aeca829099","CssBlock":".tags-nav{\n\tmax-width:100%;\n\twidth:fit-content;\t\n}\n.tags-nav ul{\n\tlist-style:none;\n\tpadding:0;\n\tdisplay:flex;\n\tgap:1rem;\n\tmargin-bottom:1rem;\n}\n\n.tags-nav a{ transition:none; }\n\n.tags-nav .tag{\n\tdisplay: inline;\n  border-radius: 3px;\n  padding: 5px;\n\tbox-shadow:var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dbox-shadow);\n\ttransition:var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dtransition);\n}\n.tags-nav .tag:hover{\n\tbox-shadow:none;\t\n}\n\n\n.tags-nav .tag-php{\n\tbackground:var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dnero);\n\tcolor:white;\n}\n.tags-nav .tag-php:hover{ background:var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dgrigio-normale); }\n\n.tags-nav .tag-wordpress{\n\tbackground:#888887;\n\tcolor:white;\n}\n.tags-nav .tag-wordpress:hover{ background:#595958; }\n\n.tags-nav .tag-gpciframework{\n\tbackground:var(\t\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dblu);\n\tcolor:white;\n}\n.tags-nav .tag-gpciframework:hover{ background:var(\t\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dblu-scuro); }\n\n.tags-nav .tag-pattern{\n\tbackground:white;\t\n}\n.tags-nav .tag-pattern:hover{ background:var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dgrigio-chiaro); }","ForeachArrayInType":"string","AdminOnlySettings":[],"AncestorQuery":true,"IsInnerBlock":false,"BlockBackendLocation":"GutenbergBackendPost"} -->
<nav class="wp-block-gpci-container tags-nav" style="margin-left:0"><!-- wp:gpci/container {"tag":"ul","metadata":{"name":"Ul"},"ClientId":"3308c2ca-cae8-4c90-b974-8b44323ba5c5","ForeachArrayInType":"string","AdminOnlySettings":[],"AncestorQuery":true,"IsInnerBlock":true,"BlockBackendLocation":"GutenbergBackendPost"} -->
<ul class="wp-block-gpci-container"><!-- wp:gpci/container {"anchor":"","tag":"li","layout":{"type":"default"},"metadata":{"name":"Li"},"ClientId":"a6399515-6be5-447b-9c23-fe40e0ac8f5a","ForeachActive":true,"ForeachArrayInType":"function","ForeachArrayIn":"get_the_tags","ForeachIndex":"tags","AdminOnlySettings":["ForeachArrayInType"],"AncestorQuery":true,"IsInnerBlock":true,"BlockBackendLocation":"GutenbergBackendPost"} -->
<li class="wp-block-gpci-container"><!-- wp:gpci/container {"tag":"a","metadata":{"name":"A"},"ClientId":"4bf2626e-0b7c-43f2-b0d3-7d31efc1974f","AttributesServerSide":true,"AttributesDefinition":[[{"AttributeName":"href"},{"AttributeValue":"/tag/[globals data=\u0022foreach,tags,value,slug\u0022]"},{"AttributeSelector":"tag"},{"AttributeSelectorContent":"a"},{"RepeatSelection":false},{"prependAttribute":false},{"AttributeValueType":"string"}]],"ForeachArrayInType":"string","AdminOnlySettings":[],"AncestorQuery":true,"IsInnerBlock":true,"BlockBackendLocation":"GutenbergBackendPost"} -->
<a class="wp-block-gpci-container"><!-- wp:gpci/element {"tag":"span","ClientId":"501e5541-dd45-44f0-a185-67a905f3edac","AttributesServerSide":true,"AttributesDefinition":[[{"AttributeName":"class"},{"AttributeValue":"tag tag-[globals data=\u0022foreach,tags,value,slug\u0022] "},{"AttributeSelector":"tag"},{"AttributeSelectorContent":"span"},{"RepeatSelection":false},{"prependAttribute":true},{"AttributeValueType":"string"}]],"ForeachArrayInType":"string","AdminOnlySettings":[],"AncestorQuery":true,"IsInnerBlock":true,"BlockBackendLocation":"GutenbergBackendPost"} -->
<span class="wp-block-gpci-element">[globals data="foreach,tags,value,name"]</span>
<!-- /wp:gpci/element --></a>
<!-- /wp:gpci/container --></li>
<!-- /wp:gpci/container --></ul>
<!-- /wp:gpci/container --></nav>
<!-- /wp:gpci/container -->

Risultato

Vedi parte superiore di questa pagina e query nella pagina snippets.