Código para versão mobile

[LuisV 0]

Olá gostaria de saber qual código devo usar para quando o cliente acessar meu site por um mobile automaticamente rotacionar a tela.



Indicar onde aplicar o código, exemplo header, index, etc

Meu site: www.xjoias.com.br

[L. Henrique 179]

Bem, fazer um site não responsivo para modo retrato é meio esquisito até pra W3C... Mas vamos lá.

Você pode fazer isso com o media query do CSS e usar um método rotate pra página. Exemplo:

@media only screen and (min-width: 360px) and (max-width: 1024px) and (orientation-portrait){
   body{
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      transform: rotate(90deg);
      min-width: 100%;
      min-height: 100%;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
   }
}

Você também pode chegar no mesmo resultado com JavaScript juntamente com CSS, creio que ficaria até mais fácil de entender. Exemplo:

JS

(function () {
   modoRetrato();
   
   $(window).resize(function () {
      modoRetrato("#ID_body");
   });

   function modoRetrato(body){
      if ( screen.width < screen.height ){
         $(body).addClass("modo-retrato");
      } else {
         $(body).removeClass("modo-retrato");
      }
   }
})();

CSS

.modo-retrato{
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
}

É isso, espero que tenha entendido.

[LuisV 0]

Bem, fazer um site não responsivo para modo retrato é meio esquisito até pra W3C... Mas vamos lá.

 

Você pode fazer isso com o media query do CSS e usar um método rotate pra página. Exemplo:

@media only screen and (min-width: 360px) and (max-width: 1024px) and (orientation-portrait){
   body{
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      transform: rotate(90deg);
      min-width: 100%;
      min-height: 100%;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
   }
}

Você também pode chegar no mesmo resultado com JavaScript juntamente com CSS, creio que ficaria até mais fácil de entender. Exemplo:

JS

(function () {
   modoRetrato();
   
   $(window).resize(function () {
      modoRetrato("#ID_body");
   });

   function modoRetrato(body){
      if ( screen.width < screen.height ){
         $(body).addClass("modo-retrato");
      } else {
         $(body).removeClass("modo-retrato");
      }
   }
})();

CSS

.modo-retrato{
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
}

É isso, espero que tenha entendido.

Amigo, tentei em diversos locais colocar os código mas não consegui, teria como instruir onde inserir eles ?

Sou leigo ainda em desenvolvimento!

Foto do meu manager:

[L. Henrique 179]

Para o código CSS:

wp-content > themes > nome do seu tema > style.css

 

Para o código JavaScript:

wp-content > themes > nome do seu tema > footer.php

 

Claro que pra deixar tudo isso mais organizado, você pode colocar os arquivos dentro das pastas respectivas (pasta CSS e pasta JS), e depois chamar no header.php o CSS e no footer.php chamar o JS.

Exemplos:
Header.php

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/seunovoestilo.css">

Footer.php

<script src="<?php echo get_template_directory_uri(); ?>/js/novo_javascript.js"></script>

[LuisV 0]

 

Para o código CSS:

wp-content > themes > nome do seu tema > style.css

 

Para o código JavaScript:

wp-content > themes > nome do seu tema > footer.php

 

Claro que pra deixar tudo isso mais organizado, você pode colocar os arquivos dentro das pastas respectivas (pasta CSS e pasta JS), e depois chamar no header.php o CSS e no footer.php chamar o JS.

 

Exemplos:

Header.php

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/seunovoestilo.css">

Footer.php

<script src="<?php echo get_template_directory_uri(); ?>/js/novo_javascript.js"></script>

Amigo, eu tentei fazer como disse na primeira parte, porém deu erro e não rotacionou a tela em mobile. Há grande possibilidade de ter sido inserido em local errado o código. Segue abaixo o código inteiro dos arquivos onde você instruiu para inserir, desde já agradeço sua gentileza, paciência e sabedoria ;)

 

footer.php

 

 

<?php

/**

* Footer Template

*

* Here we setup all logic and XHTML that is required for the footer section of all screens.

*

* @package WooFramework

* @subpackage Template

*/

global $woo_options;

$total = 4;

if ( isset( $woo_options['woo_footer_sidebars'] ) && ( $woo_options['woo_footer_sidebars'] != '' ) ) {

$total = $woo_options['woo_footer_sidebars'];

}

if ( ( woo_active_sidebar( 'footer-1' ) ||

woo_active_sidebar( 'footer-2' ) ||

woo_active_sidebar( 'footer-3' ) ||

woo_active_sidebar( 'footer-4' ) ) && $total > 0 ) {

?>

<?php woo_footer_before(); ?>

<section id="footer-widgets" class="col-full col-<?php echo $total; ?> fix">

<?php $i = 0; while ( $i < $total ) { $i++; ?>

<?php if ( woo_active_sidebar( 'footer-' . $i ) ) { ?>

<div class="block footer-widget-<?php echo $i; ?>">

<?php woo_sidebar( 'footer-' . $i ); ?>

</div>

<?php } ?>

<?php } // End WHILE Loop ?>

</section><!-- /#footer-widgets -->

<?php } // End IF Statement ?>

<footer id="footer" class="col-full">

<div id="copyright" class="col-left">

<?php if( isset( $woo_options['woo_footer_left'] ) && $woo_options['woo_footer_left'] == 'true' ) {

echo stripslashes( $woo_options['woo_footer_left_text'] );

} else { ?>

<p><?php bloginfo(); ?> © <?php echo date( 'Y' ); ?>. <?php _e( 'All Rights Reserved.', 'woothemes' ); ?></p>

<?php } ?>

</div>

<div id="credit" class="col-right">

<?php if( isset( $woo_options['woo_footer_right'] ) && $woo_options['woo_footer_right'] == 'true' ) {

echo stripslashes( $woo_options['woo_footer_right_text'] );

} else { ?>

<p><?php _e( 'Powered by', 'woothemes' ); ?> <a href="http://www.wordpress.org">WordPress</a>. <?php _e( 'Designed by', 'woothemes' ); ?> <a href="<?php echo ( isset( $woo_options['woo_footer_aff_link'] ) && ! empty( $woo_options['woo_footer_aff_link'] ) ? esc_url( $woo_options['woo_footer_aff_link'] ) : 'http://www.woothemes.com' ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/woothemes.png" width="74" height="19" alt="Woo Themes" /></a></p>

<?php } ?>

</div>

</footer><!-- /#footer -->

</div><!-- /#wrapper -->

</body>

</html>

style.css

 

Adicionei para download pois contém 3740 linhas, iria poluir o post.

 

http://www.4shared.com/document/rDLE4_1Kce/style.html

 

SCAN:

(ARQUIVO)

https://www.virustotal.com/pt/file/4aea4b05d9ec8c87f367a7dd12199dc4bf0aaa93e92b69a2be11b0de692d6f6c/analysis/1450594526/

 

(LINK)

https://www.virustotal.com/pt/url/170f4898770288d3178ed14d3c1ef23aec4cc9be0650e37be4a9fdd949fe4019/analysis/1450594594/

 

Obrigado, aguardo resposta, se possível me envie uma mensagem privada com seu facebook, seria mais fácil de resolver!