Stripe Generator

Para no perder tiempo tratando de hacer tramados que funcionen bien con photosop:

http://www.stripegenerator.com

poner tweets sin twitter widget ni plugin

Éste es el código, donde dice Camilo_B2012 se cambia el nombre de usuario, también se pueden cambiar el número de tweets, etcétera. Simplemente pegar el código y después meterle todo el css.



<?php
/****************************CODE-1**************************************
* @Author: Boutros AbiChedid
* @Date:   May 30, 2012
* @Websites: bacsoftwareconsulting.com/ ; blueoliveonline.com/
* @Description: Display your Latest tweets (from your Twitter account) on
* your WordPress Blog.
* @Tested on: WordPress version 3.3.2
*************************************************************************/
?>
<div class="box">
<div class="box_title">Latest Tweets</div>
<div class="box_content">
    <?php
    //Path to include feed.php file located in wp-includes folder.
    include_once(ABSPATH . WPINC . '/feed.php');

    //Retrieves the feed and parses it. Specify the feed URL. This is my feed, put yours.
    $rss = fetch_feed('http://twitter.com/statuses/user_timeline/Camilo_B2012.rss');

    $tweetnumber = 4;  /** How many tweets you want to show. Must be >= 1 **/
    $maxitems = $rss->get_item_quantity($tweetnumber);

    $firstitem = 0; /** Specify the first item. 0 to start from the newest tweet. **/
    $rss_items = $rss->get_items($firstitem, $maxitems);
    ?>

    <div class="twitter-list">
        <ul>
        <?php
        if ($maxitems == 0)
                echo '<li>No Tweets Yet!</li>';
        else
        //Loop through each feed item and display it as a link.
        foreach ( $rss_items as $item ) { ?>
            <li>
            <!-- Get the tweet item title as an external link.-->
            <a href='<?php echo $item->get_permalink(); ?>' target="_blank" title="External Link&#8230;" rel="nofollow">
            <?php echo $item->get_title(); ?></a> <br />
            <!-- Get the tweet item date.-->
            <span><?php echo 'Posted: ' . $item->get_date(); ?></span>
            </li>
        <?php } ?>
        </ul>
    </div>
</div>

eso.

Usar theme-options en wordpress

Sin sabe nada de php pude poner unas theme-options en un template de wordpress. Me sirvieron estos dos manuales: éste http://www.webdesignerdepot.com/2012/02/creating-a-custom-wordpress-theme-options-page/, y éste http://themeshaper.com/2010/06/03/sample-theme-options/, desde donde bajas un php llamado theme-options.php, ese se pone en tu template, y se modifica para usar las opciones que se quiera.

yo uso las opciones que vienen por defecto, aunque camiándole las palabras, obvio.

Para usar el texto que hay en un cuadro de texto del theme-options, se hace hace así:

<?php
    $options = get_option('sample_theme_options');
    echo $options['NOMBREDELAOPCION'];
?>

O por ejemplo, para poner uno u otro div del template según si un check box del theme-options, así:

<?php if ($options['option1'] == 0) { ?>
<div id="introtext">
ASDFASDFASDFASDFASDF
</div>
<?php }else{ ?>
<div id="introtext">
2345234523452345234523452345234523452345
</div>
<?php } ?> 

el ==0 se puede cambiar por ==1 dependiendo de cómo esté planteada la opción.


Para usar los RadioInput, así:

<?php if ($options['radioinput'] == yes) { ?>
<div id="introtext">
ASDFASDFASDFASDFASDF
</div>
<?php } elseif ($options['radioinput'] == no){ ?>
<div id="introtext">
2345234523452345234523452345234523452345
</div>
<?php }elseif ($options['radioinput'] == maybe){ ?>
<div id="introtext">
MAUBE
</div>
<?php } ?> 

Poner una imagen de fondo que cubra siempre toda la ventana

La idea es que sin importar el tamaño  en que esté la ventana, la imagen siempre cubra la pantalla completa. Se hace así, yo lo pude en el body:

body {
background:url(img/fondo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Efecto cuático con sombras en CSS

La idea de todo esto es escribir un texto, y con :before y :after meter dos textos iguales, pero casi transparentes, puestos encima, y el primero moverlo 1px abajo de la derecha, y el siguiente moverlo 2 pixeles abajo a la derecha. Como son semitransparentes, van a cambiar el color del texto. El problema es que si el color de fondo donde aparecen las sombras no es oscuro, no se van a notar las sombras exteriores.

con este div:

<div class="tit" title="Esto y lo otro">Esto y lo otro</div>

y este CSS:

.tit {font-size: 80px;  padding: .5em 0; color:#black; font-weight:bold; position:relative;}
.tit:before, .tit:after  {content:attr(title); font-size: 80px; padding: .5em 0; position:absolute; color:rgba(255,255,225,0.1)}
.tit:before  { top:1px; left:1px; right:0;}
.tit:after  { top:2px; left:2px; right:0;}

Poner la fecha de hoy en español con javascript

Primero se crea la función en el header:

<script language="JavaScript">
function Fecha()
{
meses = new Array("Enero","Febrero","Marzo","Abril","Mayo","Ju nio","Julio","Agosto","Septiembre","Octubre","Novi embre","Diciembre");
data = new Date();
index = data.getMonth();
diasemana=new Array("Lunes","Martes","Miércoles","Jueves","Viern es","Sábado","Domingo");
indexday = data.getDay();
if (indexday == 0)
indexday = 7;
any = data.getYear();
if (any < 1900)
any = 1900 + any;
document.write(diasemana[indexday-1]+ "," + ' '+data.getDate()+ " de " + meses[index] + " de " + any);
}
</script>

y donde quiero meter la fecha, le chanto:

<SCRIPT language=JavaScript>Fecha()</SCRIPT>

Indicadores económicos de Chile con javascript

Entera buena esta forma que encontré para poner la UF u otros indicadores económicos usando un documento .js que tienen el en BCI

el documento es este: http://www.bci.cl/common/include/valores.js

Pa sacar sólo la UF, pongo esto en el header:

     <script type="text/javascript" src="http://www.bci.cl/common/include/valores.js"></script>
    <script type="text/javascript">
function g(id){return document.getElementById(id);}
function valor(indice){return formatear_numero(arrValores[indice].valor2);}
window.onload=function(){
var uf=4;
if(typeof(arrValores)!="undefined"){
g('uf').innerHTML=valor(uf);
}
}
</script>

y donde quiero poner la UF, le chanto:

<span id="uf"></span>

la explicación entera está aquí:

Indicadores económicos con javascript

poner elementos encima de videos de youtube

no hace problema en todos los navegadores, pero si poner algún div sobre un video, el video se one encima y se ve feo. para solucionarlo en videos de youtube, hay que agregar el parámetro wmode=transparent en el código embed.

Por ejemplo, si este es tu código embed

<iframe width="315" height="242" src="http://www.youtube.com/embed/WV-Mr3t8uYQ" frameborder="0" allowfullscreen></iframe>

lo dejas así

<iframe width="315" height="242" src="http://www.youtube.com/embed/WV-Mr3t8uYQ?wmode=transparent" frameborder="0" allowfullscreen></iframe>

o sea, le agregas ?wmode=transparent después de la ruta del video.

sombra bacancita con CSS

metí un div con la clase cuadro, y le chanté este CSS, que quedó pulentito.

.cuadro:before {content: ""; position:absolute; background:transparent; width:90%; height:90%; z-index:-1; left:7%;
-webkit-box-shadow: 0px 10px 9px -2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 10px 9px -2px rgba(0, 0, 0, 0.5);
transform:rotate(4deg);
-ms-transform:rotate(4deg); /* IE 9 */
-moz-transform:rotate(4deg); /* Firefox */
-webkit-transform:rotate(4deg); /* Safari and Chrome */
-o-transform:rotate(4deg); /* Opera */}
.cuadro {width:200px; height:100px; margin:40px 0; background:orange; position:relative; }
.cuadro:after {content: ""; position:absolute; background:transparent; width:90%; height:90%; z-index:-1; left:3%;
-webkit-box-shadow: 0px 10px 9px -2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 10px 9px -2px rgba(0, 0, 0, 0.5);
transform:rotate(-4deg);
-ms-transform:rotate(-4deg); /* IE 9 */
-moz-transform:rotate(-4deg); /* Firefox */
-webkit-transform:rotate(-4deg); /* Safari and Chrome */
-o-transform:rotate(-4deg); /* Opera */}

compartir post de wordpress en facebook

La cosa es tomar el código que te entrega facebook, y cambiar el data-href por el post, obvio que dentro del loop:

así:  <div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-action="recommend"></div>

y no olvidar poner lo siguiente en el header:

<div id="fb-root"></div>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

twittear un post de wordpress

Sólo hay que meter lo siguiente en el loop

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="<?php the_permalink(); ?>"
data-via="Camilo_B2012"
data-text="<?php the_title(); ?>"
data-count="horizontal">Tdd</a>

en data-url está el link al post de wordpress que estás tweeteando
en data-via, se pone el usuario desde el que se tuitea la cuestión
en data-text, está el título del post, se puede agregar algo más
en data-count, se puede poner vertical, horizontal o none.
el texto del a href, aunque lo trato de cambiar, sigue diciendo "Tweet", así que filo

Ejemplo de uso de setInterval, if, else if, y nth-child en jQuery

he aquí el ejemplo que funciona perfect en wordpress


<script type="text/javascript">
$(document).ready(function(){


setInterval(function(){
if ( $(".noticiasSlider .post:nth-child(1)").css("display")   == "block" ){
$(".menuSlider span").css("background", "#a99e93");
$(".menuSlider span:nth-child(2)").css("background", "#227090");$(".noticiasSlider .post").fadeOut('slow');
$(".noticiasSlider .post:nth-child(2)").fadeIn('slow');
}
else if ( $(".noticiasSlider .post:nth-child(2)").css("display")   == "block" ){
$(".menuSlider span").css("background", "#a99e93");
$(".menuSlider span:nth-child(3)").css("background", "#227090");$(".noticiasSlider .post").fadeOut('slow');
$(".noticiasSlider .post:nth-child(3)").fadeIn('slow');
}
else if ( $(".noticiasSlider .post:nth-child(3)").css("display")   == "block" ){
$(".menuSlider span").css("background", "#a99e93");
$(".menuSlider span:nth-child(4)").css("background", "#227090");$(".noticiasSlider .post").fadeOut('slow');
$(".noticiasSlider .post:nth-child(4)").fadeIn('slow');
}
else if ( $(".noticiasSlider .post:nth-child(4)").css("display")   == "block" ){
$(".menuSlider span").css("background", "#a99e93");
$(".menuSlider span:nth-child(1)").css("background", "#227090");
$(".noticiasSlider .post").fadeOut('slow');
$(".noticiasSlider .post:nth-child(1)").fadeIn('slow');
}
},3000);

      });
</script>

usar los campos personalizados de wordpress

Hay que poner el siguiente código dentro del loop:

<?php echo get_post_meta($post->ID, XXXXXXX, true); ?>


Evidentemente, hay que cambiar las XXXXX por el nombre que le diste al campo perzonalizado.