Oxygenados Com

                    <?php
/****
 * La clase wpdb se utiliza para interactuar con la base de datos de WordPress. 
 * Primero, necesitas incluir el archivo wp-load.php en tu script para acceder a las funciones 
 * de WordPress y luego usar la instancia global $wpdb para realizar consultas a la base de datos. 
 * Aquí tienes un ejemplo básico de cómo hacer una consulta a la base de datos de WordPress:

 1 - Asegúrate de que tu archivo PHP esté en el mismo directorio que el archivo wp-load.php 
 o modifica la ruta según sea necesario.
 */
require_once('wp-load.php');

/****
 * 2 - Utiliza la instancia global $wpdb para realizar consultas a la base de datos. 
 * Por ejemplo, para obtener todos los posts de la tabla de posts:
*****/
global $wpdb;

// Consulta a la base de datos para obtener todos los posts
$results = $wpdb->get_results("SELECT * FROM {$wpdb->prefix}posts WHERE post_type = 'post' AND post_status = 'publish'");

// Imprimir los resultados
foreach ($results as $post) {
    echo "ID: " . $post->ID . "<br>";
    echo "Título: " . $post->post_title . "<br>";
    echo "Contenido: " . $post->post_content . "<br>";
    echo "<hr>";
}
/****
 * Esta consulta seleccionará todos los posts con el tipo 'post' y el estado 'publicado' y luego 
 * imprimirá sus ID, títulos y contenidos.
 * Recuerda que siempre debes validar y desinfectar los datos que provienen de fuentes no 
 * confiables antes de usarlos en consultas a la base de datos para evitar la inyección de SQL. 
 * Puedes usar las funciones proporcionadas por la clase wpdb como $wpdb->prepare() para preparar y proteger tus consultas.

Para obtener más información sobre cómo trabajar con la clase wpdb, consulta la documentación oficial de WordPress:

https://developer.wordpress.org/reference/classes/wpdb/
*/
?>

                  

                    document.addEventListener('DOMContentLoaded', ()=>{
    const ubicacionActual = window.location.href
    const enlacesCabecera = document.querySelectorAll('.header_link')
    const direcciones = ['email','facebook','linkedin','twitter','instagram' ];
    const carRedonda = document.querySelector('.card-imagen-redonda')
    const textoResalta = document.querySelector('.texto-resalta-hover')
    const canva = document.getElementById('seccion-canva-hire')
    const botones = document.querySelectorAll('.boton-hire-me')
    let move = false //Control de posición Canva de Hire Me
    let cantidad = 200 // % Desplazamiento Canva de Hire Me 
    
    enlacesCabecera.forEach((enlaceCab)=>{
       ponActivo = () => enlaceCab.classList.add('activo')
        if(enlaceCab.href == ubicacionActual)  setTimeout(ponActivo, 300);
    })
    direcciones.forEach((direccion)=>{
        let enlazados = document.querySelectorAll('.link-social-link__' + direccion);
        let destino = "facebook.com/Noelia.Amado.Photography/";//If remove this semicolon with minimify option is active console gives error.
        enlazados.forEach((enlazado) =>{ 
            if(direccion === 'email')
                enlazado.href = 'mailto:noelia@noeliaamado.com';
            else{
                 switch(direccion){
                    case'instagram':  destino ="instagram.com/noelia.amado.photography/";
                    break;
                    case'linkedin':   destino ="www.instagram.com/noelia.amado.photography/";
                    break;
                }
            }
                enlazado.href = 'https://'+destino;
        });
     });
     if(ubicacionActual==="https://noeliaamado.com/"){
     textoResalta.addEventListener('mouseover', ()=>{
         carRedonda.classList.add('sobreTexto')
        })
        textoResalta.addEventListener('mouseout', ()=>{carRedonda.classList.remove('sobreTexto')})
    }
    botones.forEach((boton) => {
        boton.addEventListener('click',(e)=>{
            e.preventDefault()
        	move = (move)? false: true
        	if(move){
        	    clase = 'canva-hire-translated-mas';
              canva.style.transform='translateX(0px)'
        	    cantidad = cantidad * -1
        		}else{
        		    clase = 'canva-hire-translated-menos';
                  canva.style.transform='translateX('+cantidad+'%)'
        		} 
        		 
        	})
        })
})
                  

                    <?php
/***Primero, asegúrate de tener acceso a la instancia global de `$wpdb` agregando la siguiente línea de código
 * en tu archivo de funciones (`functions.php`)
 * de tu tema o en un plugin personalizado:
 * **/
global $wpdb;
/*** Utiliza el método `get_results` o `get_row` de la clase `$wpdb` para ejecutar la consulta SQL. 
 * Por ejemplo, si deseas obtener todos los registros de una tabla personalizada llamada `wp_custom_table`,
 * puedes usar el siguiente código:
****/
$table_name = $wpdb->prefix . 'custom_table';
$results = $wpdb->get_results("SELECT * FROM {$table_name}", ARRAY_A);

foreach ($results as $row) {
    // Procesa cada fila de resultados aquí
    echo 'ID: ' . $row['id'] . ', Nombre: ' . $row['name'] . '<br>';
}

/**En este ejemplo, reemplaza `'custom_table'` con el nombre real de tu tabla y asegúrate de que 
 * los nombres de las columnas coincidan con tu estructura de tabla. 
 * También puedes modificar la consulta SQL según tus necesidades.
 * Por favor, toma en cuenta que realizar consultas directas a la base de datos puede tener implicaciones 
 * de seguridad y rendimiento. Asegúrate de utilizar consultas seguras y de seguir las mejores prácticas 
 * de WordPress al interactuar con la base de datos.
****/
?>


                  

                    //scrollIntoView propiedad de cualquier elemento HTML
const boton = document.querySelector('#scrolea')
const enlaces = document.querySelectorAll('.enlace')
const scrollAnimado = (elemento) =>{
    const destino = document.querySelector(elemento)
    destino.scrollIntoView({
        behavior: "smooth"
        })
}

enlaces.forEach(enlace => {
    enlace.addEventListener('click', (e)=>{
        e.preventDefault()
       scrollAnimado(enlace.getAttribute('href'))
     })
    })

boton.addEventListener('click', () =>{
    scrollAnimado('.ultimo')
})
                  

                    /* https://codepen.io/t_afif/pen/RweZBRg*/

img {
    --s: 200px; /* the size need to match the intrinsic image size for "center" and "random" */
    
    width: var(--s);
    height: var(--s); /* better than aspect-ratio in case the image has a height attribute */
    box-sizing: border-box;
    cursor: pointer;
    transition: .5s;
  }
  img.center {
    object-fit: none; /* this is doing the magic, not a common value but it allows to keep the intrinsice size of the replaced content */
    padding: calc(var(--s)/2);
    background: #88C425;
  }
  img.vertical {
    object-fit: cover; /* we can also use "none" here, it will give the same result */
    padding-block: calc(var(--s)/2);
    background: #F07818;
  }
  img.horizontal {
    object-fit: cover;
    padding-inline: calc(var(--s)/2);
    background: #AB3E5B;
  }
  /* you can use any combination of padding. 
    make sure the padding will cover all the area
    also make sure to correctly set object-position and object-fit to create the illusion of a fixed image
    I may write a small article for it
  */
  img.random {
    object-position: top left;
    object-fit: none;
    padding: 0 var(--s) var(--s) 0;
    background: #0E2430;
  }
  
  img:hover {
    padding: 0;
  }
  
  
  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-columns: auto auto;
    place-content: center;
    gap: 30px;
    background: #C6E5D9;
  }