{"id":5123,"date":"2012-11-02T16:31:11","date_gmt":"2012-11-02T16:31:11","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=5123"},"modified":"2015-07-14T22:11:45","modified_gmt":"2015-07-14T22:11:45","slug":"incrustar-codigo-php-dentro-de-clases-css","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/","title":{"rendered":"Incrustar c\u00f3digo PHP dentro de clases CSS"},"content":{"rendered":"<p>En este art\u00edculo vamos a ver como incrustar c\u00f3digo PHP dentro de clases CSS para dinamizar los estilos de una p\u00e1gina Web. Si necesitas crear un sitio en el cual es necesario por ejemplo que los usuarios puedan elegir los estilos para mostrar el contenido a su gusto este art\u00edculo te puede servir.<\/p>\n<p>La clave del asunto hay que montarlo en el &lt;head&gt; de nuestra p\u00e1gina donde deberemos a\u00f1adir algo como lo siguiente:<\/p>\n<pre>&lt;?php\r\nif (isset($_POST['send'])) {\r\n\u00a0\u00a0 \u00a0$background_content = $_POST['backgroundContentColor'];\r\n\u00a0\u00a0 \u00a0$width = $_POST['width'];\r\n\u00a0\u00a0 \u00a0$height = $_POST['height'];\r\n\u00a0\u00a0 \u00a0$padding = $_POST['padding'];\r\n\u00a0\u00a0 \u00a0$color = $_POST['color'];\r\n\u00a0\u00a0 \u00a0$fontsize = $_POST['fontsize'];\r\n\u00a0\u00a0 \u00a0$border = $_POST['border_width'].'px '.$_POST['border_type'].' '.$_POST['border_color'];\r\n}\r\nelse {\r\n\u00a0\u00a0 \u00a0$background_content = '#CCCCCC';\r\n\u00a0\u00a0 \u00a0$width = '400';\r\n\u00a0\u00a0 \u00a0$height = '250';\r\n\u00a0\u00a0 \u00a0$padding = '10';\r\n\u00a0\u00a0 \u00a0$color = '#000';\r\n\u00a0\u00a0 \u00a0$fontsize = '12';\r\n\u00a0\u00a0 \u00a0$border = 'none';\r\n}\r\n?&gt;<\/pre>\n<p>Como puedes observar, en el c\u00f3digo anterior tan solo estamos guardando en variables los valores seleccionados por el usuario en el formulario que veremos en el ejemplo. Si el usuario pulsa el bot\u00f3n de \u00abguardar\u00bb, capturamos esos par\u00e1metros recibos y en caso contrario tenemos unos valores por defecto.<\/p>\n<p>En el mismo &lt;head&gt; justo debajo del c\u00f3digo PHP anterior a\u00f1adiremos los siguientes estilos CSS incrustando las variables PHP:<\/p>\n<pre>.content {\r\n\u00a0\u00a0 \u00a0margin:0px auto;\r\n\u00a0\u00a0 \u00a0width: &lt;?=$width?&gt;px;\r\n\u00a0\u00a0 \u00a0height: &lt;?=$height?&gt;px;\r\n\u00a0\u00a0 \u00a0background-color:&lt;?=$background_content?&gt;;\r\n\u00a0\u00a0 \u00a0padding:&lt;?=$padding?&gt;px;\r\n\u00a0\u00a0 \u00a0font-size:&lt;?=$fontsize?&gt;px;\r\n\u00a0\u00a0 \u00a0color:&lt;?=$color?&gt;;\r\n\u00a0\u00a0 \u00a0border:&lt;?=$border?&gt;;\r\n}<\/pre>\n<p>En este caso tan solo estamos parametrizando una clase CSS pero podr\u00edamos parametrizar toda una hoja de estilos.<\/p>\n<p>En el &lt;body&gt; a parte del formulario tendremos el contenedor de aplicaci\u00f3n:<\/p>\n<pre>&lt;div class=\"content\"&gt;\r\n\u00a0\u00a0\u00a0 Texto del contenedor\r\n&lt;\/div&gt;<\/pre>\n<p>En el ejemplo que vamos a ver tenemos un formulario con distintos atributos o par\u00e1metros CSS que al pulsar el bot\u00f3n de \u00abGuardar\u00bb se visualizar\u00e1 este contenedor con los estilos elegidos. En este caso espec\u00edfico, vamos a permitir al usuario poder seleccionar el color de fondo del cotenedor, su border (ancho, tipo y color), el color del texto, el tama\u00f1o del texto, sus dimensiones (alto y ancho) y el padding.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/contenedor.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5124\" title=\"contenedor\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/contenedor.png\" alt=\"\" width=\"632\" height=\"325\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/contenedor.png 632w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/contenedor-300x154.png 300w\" sizes=\"auto, (max-width: 632px) 100vw, 632px\" \/><\/a><\/p>\n<p>Para los colores de fondo y del texto estamos empleando el plugin <a href=\"https:\/\/www.jose-aguilar.com\/blog\/colorpicker\/\" target=\"_blank\">ColorPicker <\/a>de jQuery que nos permite elegir un color de una paleta de colores.<\/p>\n<p>En el ejemplo al pulsar en el bot\u00f3n\u00a0 de guardar, estamos guardando en la variable $_POST de PHP para mostrar el efecto. No estamos guardando de forma permanente. Si necesitas guardar de forma permanente podr\u00edas guardar estos par\u00e1metros en una variable de sesi\u00f3n, en una base de datos o en un archivo.<\/p>\n<p>Ver el ejemplo en funcionamiento<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo vamos a ver como incrustar c\u00f3digo PHP dentro de clases CSS para dinamizar los estilos de una p\u00e1gina Web. Si necesitas crear un sitio en el cual es necesario por ejemplo que los usuarios puedan elegir los estilos para mostrar el contenido a su gusto este art\u00edculo te puede servir. La clave [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5125,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,3],"tags":[],"class_list":["post-5123","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-php"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Incrustar c\u00f3digo PHP dentro de clases CSS - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Incrustar c\u00f3digo PHP dentro de clases CSS - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a ver como incrustar c\u00f3digo PHP dentro de clases CSS para dinamizar los estilos de una p\u00e1gina Web. Si necesitas crear un sitio en el cual es necesario por ejemplo que los usuarios puedan elegir los estilos para mostrar el contenido a su gusto este art\u00edculo te puede servir. La clave [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-11-02T16:31:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-07-14T22:11:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/css_variable.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"262\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/\",\"name\":\"Incrustar c\u00f3digo PHP dentro de clases CSS - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/css_variable.jpg\",\"datePublished\":\"2012-11-02T16:31:11+00:00\",\"dateModified\":\"2015-07-14T22:11:45+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/css_variable.jpg\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/css_variable.jpg\",\"width\":500,\"height\":262},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Incrustar c\u00f3digo PHP dentro de clases CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Incrustar c\u00f3digo PHP dentro de clases CSS - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Incrustar c\u00f3digo PHP dentro de clases CSS - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a ver como incrustar c\u00f3digo PHP dentro de clases CSS para dinamizar los estilos de una p\u00e1gina Web. Si necesitas crear un sitio en el cual es necesario por ejemplo que los usuarios puedan elegir los estilos para mostrar el contenido a su gusto este art\u00edculo te puede servir. La clave [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-11-02T16:31:11+00:00","article_modified_time":"2015-07-14T22:11:45+00:00","og_image":[{"width":500,"height":262,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/css_variable.jpg","type":"image\/jpeg"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/","url":"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/","name":"Incrustar c\u00f3digo PHP dentro de clases CSS - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/css_variable.jpg","datePublished":"2012-11-02T16:31:11+00:00","dateModified":"2015-07-14T22:11:45+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/css_variable.jpg","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/css_variable.jpg","width":500,"height":262},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/incrustar-codigo-php-dentro-de-clases-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Incrustar c\u00f3digo PHP dentro de clases CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/5123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=5123"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/5123\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5125"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=5123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=5123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=5123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}