elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Sigue las noticias más importantes de seguridad informática en el Twitter! de elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web
| | |-+  PHP (Moderador: #!drvy)
| | | |-+  [Resuelto] como poner css en plugin de WP
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] como poner css en plugin de WP  (Leído 2,133 veces)
p4xk3

Desconectado Desconectado

Mensajes: 8


Ver Perfil
[Resuelto] como poner css en plugin de WP
« en: 23 Abril 2018, 01:18 am »

Hola

he estado trabajando en un plugin para wordpress para generar un galeria de imagenes a partir de una fuerte RSS

me base en este codigo:


Código
  1.  
  2. <?php
  3. function getPortfolio($feed_url) {
  4.  
  5.    $content = file_get_contents($feed_url); // get XML string
  6.    $x = new SimpleXmlElement($content); // load XML string into object
  7.  
  8.    echo '<ul class="portfolio-items clearfix">';
  9.    $i=1; // start count at 1
  10.  
  11.    // loop through posts
  12.    foreach($x->channel->item as $entry) {
  13.  
  14.        $content = $entry->description; // get post content
  15.        preg_match('/(<img[^>]+>)/i', $content, $matches); // extract featured image from post description and place in $matches array
  16.  
  17.        // format portfolio item output
  18.        echo '<li class="portfolio-item">';
  19.        echo '<div><a href="'.$entry->link.'" title="'.$entry->title.'" target="_blank">' . $matches[0] . '</a></div>'; // output first image in $matches array, output link & title
  20.        echo '</li>';
  21.  
  22.        $i++; // increment counter
  23.  
  24.        if($i >= 7) // if counter more than 6 - quit
  25.        break;        
  26.    }
  27.    echo "</ul>";
  28. } ?>
  29.  
  30.  
de este autor:
http://redvinestudio.com/how-to-read-rss-feeds-with-php-using-simplexml/

y luego dentro de una pagina pongo este codigo con la url del feed

Código
  1. <?php getPortfolio("http://yoururl.com/feed/?post_type=portfolio"); ?>

y me queda asi:


ahora intente agregar codigo CSS para poner las imagenes de forma horizontal

dejando el codigo asi:

imagenes-desde-rss.php
Código
  1. <?php
  2.  
  3.  
  4. function my_enqueued_assets() {
  5.        wp_enqueue_style('my-css-file', plugin_dir_url(__FILE__) . '/gal.css', '', time());
  6. }
  7. add_action('wp_enqueue_scripts', 'my_enqueued_assets');
  8.  
  9. function getPortfolio($feed_url) {
  10.  
  11.    $content = file_get_contents($feed_url); // get XML string
  12.    $x = new SimpleXmlElement($content); // load XML string into object
  13.  
  14.    echo '<ul class="portfolio-items clearfix">';
  15.    $i=1; // start count at 1
  16.  
  17.    // loop through posts
  18.    echo "<ul>";
  19.    foreach($x->channel->item as $entry) {
  20.  
  21.        $content = $entry->description; // get post content
  22.        preg_match('/(<img[^>]+>)/i', $content, $matches); // extract featured image from post description and place in $matches array
  23.  
  24.        // format portfolio item output
  25.        echo '<div id="navmenui">';
  26.  
  27.        echo '<li class="portfolio-item"><a href="'.$entry->link.'" title="'.$entry->title.'" target="_blank">' . $matches[0] . '</a>'; // output first image in $matches array, output link & title
  28.        echo '</li>';
  29.  
  30.        $i++; // increment counter
  31.  
  32.        if($i >= 20) // if counter more than 6 - quit
  33.        break;        
  34.    }
  35.    echo "</ul>";
  36. echo "</div>";
  37. } ?>

como ven hice archivo css

Código
  1. function my_enqueued_assets() {
  2.        wp_enqueue_style('my-css-file', plugin_dir_url(__FILE__) . '/gal.css', '', time());
  3. }
  4. add_action('wp_enqueue_scripts', 'my_enqueued_assets');


que trae el siguiente codigo para decir que los los elementos:

gal.css

Código
  1. #navmenui ul {margin: 0; padding: 0;
  2. list-style-type: none; list-style-image: none; }
  3. #navmenui li {display: inline; padding: 5px 20px 5px 20px}
  4.  
pero alineo las imagenes de forma horizontal


que me falto?


« Última modificación: 29 Mayo 2018, 19:26 pm por #!drvy » En línea

p4xk3

Desconectado Desconectado

Mensajes: 8


Ver Perfil
Re: como poner css en plugin de WP
« Respuesta #1 en: 25 Abril 2018, 01:09 am »

Resuelto.

esta usando un mal script en el plugin

para llamar a un archivo css use el siguiente codigo del:

imagenes-desde-rss.php

Código
  1.  
  2. // css
  3. /**
  4.  * Register with hook 'wp_enqueue_scripts', which can be used for front end CSS and javascript
  5.  */
  6. add_action( 'wp_enqueue_scripts', 'prefix_add_my_stylesheet' );
  7.  
  8. /**
  9.  * Enqueue plugin style-file
  10.  */
  11. function prefix_add_my_stylesheet() {
  12.    // Respects SSL, Style.css is relative to the current file
  13.    wp_register_style( 'prefix-style', plugins_url('gal.css', __FILE__) );
  14.    wp_enqueue_style( 'prefix-style' );
  15. }
  16.  
  17.  
  18.  


y para el gal.css el siguiente:

Código
  1.  
  2.  
  3. #photos {
  4.  opacity: .88;
  5. }
  6.  
  7. #photos img {
  8.  width: 30%;
  9.  float: left;
  10.  display: block;
  11.  margin: 2px;
  12. }
  13.  
  14. ul {
  15.  list-style: none;
  16.  margin: 0px auto;
  17.  padding: 10px;
  18.  display: block;
  19.  max-width: 780px;
  20.  text-align: center;
  21. }
  22.  
  23. #overlay {
  24.  background: rgba(0,0,0, .8);
  25.  width: 100%;
  26.  height: 100%;
  27.  position: absolute;
  28.  top: 0;
  29.  left: 0;
  30.  display: none;
  31.  text-align: center;
  32. }
  33.  
  34. #overlay img {
  35.  margin: 10% auto 0;
  36.  width: 550px;
  37.  border-radius: 5px;
  38. }
  39.  
  40. #photos {
  41.  width: 100%;
  42. }
  43.  
  44. #photo-gallery {
  45.  width: 100%;
  46. }
  47.  
  48.  



espero que alguien le sirva


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines