the_title() : affiche le titre de l’article ou de la page
   
the_content() : affiche le contenu
   
the_post_thumbnail() : affiche l’éventuelle image mise en avant
   
the_excerpt() : affiche un extrait de l’article
   
the_category() : affiche une liste de la ou les catégories sélectionnées
   
the_tags() : affiche une liste des éventuelles étiquettes de l’article
   
the_author() : affiche le nom de l’auteur
   
the_author_link() : affiche le nom de l’auteur avec un lien vers son site personnel
   
the_date() : affiche une fois les dates où des articles ont été publiés
   
the_time() : affiche la date de publication de chaque article
   
the_permalink() : affiche l’URL vers l’article, à mettre dans une balise <a>
   
comment_number() : affiche le nombre de commentaires publiés dans l’article

Les fonctions en the_ affichent directement la donnée dans le template

Pour récupérer la valeur sans directement l’afficher dans un template, afin de la traiter en PHP.

Exemple : pour récupérer la valeur du titre sans l’afficher, the_title(), il faut utiliser son équivalent get_the_title()

<p>
Publié le <?php the_date(); ?>
par <?php the_author(); ?>
dans la catégorie <?php the_category(); ?>
avec les étiquettes <?php the_tags(); ?>
</p>
   

Les fonctions en get_ récupèrent les données sans les afficher, en vue d’un traitement.

Zoom

class App extends React.Component {

state = {
   titre: "Mon catalogue voiture"
  }
  
changeTitle = (ev) => {
  this.setState({
    titre:'Mon nouveau titre'
  })
}
 
 
changeViaParam = (param) => {
  this.setState({
    titre: param
  })
} 

changeViaBind = (param2) => {
  this.setState({
    titre: param2
  })
} 

changeViaInput = (event) => {
  this.setState({
    titre: event.target.value
  })
} 
  
  render() {
     
    return (
        <div>
            < MesVoitures  title={this.state.titre} />
            <button onClick ={this.changeTitle}>Titre en dur</button><br/>
            <button onClick ={() => this.changeViaParam("Via paramètre")}>Via param</button><br/>
            <button onClick ={this.changeViaBind.bind(this, "Via bind")}>Via Bind</button>
            <input type="text" onChange={this.changeViaInput} value={this.state.titre} />
        </div>
    );
  }
}

class MesVoitures extends React.Component {

addStyle = (e) => {
  
e.target.classList.toggle('styled');
}

state  = {
     cars: [
          {brand: "Ford", color: "noire"},
          {brand: "Peugeot", color: "rouge"}
          
         ]
         
  }

  render() {
      return (
          <div>
              <h1 onMouseOver={this.addStyle}>{this.props.title}</h1>
              <Voiture marque={this.state.cars[0].brand} couleur={this.state.cars[0].color} /> 
              <Voiture marque={this.state.cars[1].brand} couleur={this.state.cars[1].color} /> 
              
              {
                  this.state.cars.map(vehicule =>{
                      return(
                          <Voiture marque={vehicule.brand} couleur={vehicule.color} /> 
                      )            
                  })
              }
          </div>
    );
  }
}

const Voiture = (props) => {


  return (
    <div className="voiture">
      <p>Marque  : { props.marque }</p>
      <p>Couleur : { props.couleur }</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Zoom

Testez vos propres exemples sous Jsfiddle. Cliquez ici